@charset "utf-8";
/* CSS Document */

/*Grafiken----------------------------------*/
img {
 display:block;
 /*width: 100%; auf kleineren Displays wird das Bild, wenn es zu gro� ist, verkleinert*/
 height: auto;
 border: 0;
 -ms-interpolation-mode: bicubic;/*Art der Berechnung beim Skalieren f�r IE7*/ 
}

/*Fragen, Vorläufiges, Arbeitsversion-------------------------*/
.work{color:#F60; font-style:italic;}

* {
margin: 0;	padding: 0;
border: 0 none; 
vertical-align: baseline;
}

html {
height: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; 
}

body {
min-height: 100%;
font-size: 100.01%;
/*overflow-y: scroll; */
}

/* Mixins , behebt BUGs in den Browsern
=================================================== */
/*clearfix bewirkt bei floatenden Elementen in einer Box, dass diese korrekt in der Box stehen*/
.clearfix {*zoom: 1; }/*100%Darstellung f�r IE*/
.clearfix:before {display: table; content: ""; }
.clearfix:after {display: table; content: ""; clear: both; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto; width: auto; margin: 0;
  overflow: visible; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  }
  *:first-child + html .clearfix {zoom: 1; }
  *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

/* IE7 */
/* #Basic Styles
================================================== */
/* apply a natural box layout model to all elements */
html {
  background:#eaeaea;
  margin: 0; padding: 0;
  height: 100%;
  font-size: 100.01%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f3f5f6;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  background-color: transparent;
  margin: 0; padding: 0;
  font-family: TitilliumWeb,Arial, Verdana, Helvetica, sans-serif;
  font-size: 100.01%; color:#132142; line-height:1.7em;
  -webkit-font-smoothing: antialiased;
   /*Fix for webkit rendering*/ 
  -webkit-text-size-adjust: 100%;
  	background-color:#BDBCA7;
	background-image:url(picts/bg.jpg); background-position:0 0; background-repeat:repeat-x; 
   }
  

/*SCHRIFTGRÖSSEN, LISTEN--------------------------------------------------------------------------------------*/
h1,h2,h3{font-weight:normal;}
h1{font-size:26px; color:#FF9900; font-weight:bold;  /*letter-spacing:1px;*/}
h2{font-size:24px; color:#666666; }
h3{font-size:20px; color:#FF9900;}
p{/*font-size:18px;*/ font-size:1.125em;}

ul{list-style-type:none; /*font-size:18px;*/ font-size:1.125em;}
li{list-style-type:none;}
/*-----------------------------------------------------------------------------------------------------------*/



/*HYPERLINK ALLGEMEIN---------------------------------------------------------------------------------------*/
a{
text-decoration:none;
color:#FFFFFF;
}
a:hover{
text-decoration:none;
color:#FF9900;
}

a.textlink{
text-decoration:none;
color:#132142;
}
a.textlink:hover{
text-decoration:none;
color:#FF9900;
}

.highlight{color:#FF9900;}

/*für die E-Mail Adressen um @ zu verstecken*/
noscript span {display:none;}

/*Telefonnummern Smartphone*/
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:focus,
a[href^="tel"]:hover  {
	display:inline; text-decoration: none; color:#132142;
	cursor: pointer; 
}
/*------------------------------------------------------------------------------------------------------------*/

/*ALLGEMEINE KLASSEN---------------------------------------------------------------------------------------------*/
.antifloat{clear:both;}
.quad-white{background-image:url(picts/quad_white.gif); background-position:0 5px; background-repeat:no-repeat;}
.quad-orange{background-image:url(picts/quad_orange.gif);}
/*---------------------------------------------------------------------------------------------------*/

/*WRAPPER zum zentrieren der Seite---------------------------------------------------------------------------*/
#wrapper{
	margin: 0 auto; padding: 0;
	max-width:1200px; 
}
/*----------------------------------------------------------------------------------------------------------*/

/*HEAD-------------------------------------------------------------------------------------------------------------------*/
#head{
	position:relative;
	float:left;
	max-width:1200px; height:150px;
	background-image:url(picts/bg_head.jpg); background-position:right ; background-repeat:no-repeat; background-size:auto 100%;
	background-color:#F7F8FA;
	border-right:2px dotted #87877C;
}

#logo{
	float:left;
	margin:0 auto; padding:0;
	width:222px; height:150px;
	border-right:2px dotted #87877C;
	background:#F7F8FA;
}
#logo img{margin:0 auto;}

.slogan{float:left;  width:976px; height:30px; margin-top:120px; background-color:#F90; background-color:#132142; }
.slogan li{float:left;height:30px; padding:0 57px 0 57px; font-size:18px; color:#fff; text-align:center; letter-spacing:1px; background-image:url(picts/quad_orange.gif); background-position:left; background-repeat:no-repeat;  background-color:#132142;}
.slogan li.spalte1{background-image:none;}

.slogan li.btn-englisch{float:right; width:120px; padding:0; font-size:16px; background-image:none; background-color:#F90;}
.slogan li.btn-englisch a:hover{color:#132142;}

/*----------------------------------------------------------------------------------------------------------------------*/
#container{float:left; margin-top:0px; background:#fff; width:1200px; height:auto;   border-right:2px dotted #87877C;}

/*nur für Mobil, auf dem PC nicht sichtbar*/
.menu-btn{display:none;}/*Riffellinien für Menü bei kleinem Display*/

/*LINKE SPALTE*/
#left-column{
float:left;
width:220px;
background:#F7F8FA;
}

/*MITTLERE SPALTE*/
#center-column{
min-height:600px;
margin:0 120px 0 220px;
padding:80px 40px 30px 25px;
border-left:2px dotted #87877C;
}
/*MITTLERE SPALTE, Startseite*/
#center-column-start{
min-height:600px;
margin:0 0px 0 220px;
padding:10px 0px 30px 25px;
border-left:2px dotted #87877C;
}

/*RECHTE SPALTE*/
#right-column{
float:right;
width:120px;
}

/*Bild mit aktiven Bereichen auf der Startseite*/
img.pict-startseite{display:block; margin:0; padding:0;}

/*FOOTER----------------------------------------------------------------------------------------------*/
#footer{float:left; width:1200px; height:auto; margin:0; background-color:#132142;}
#footer ul{float:left; margin:0 0 0 220px;}
#footer ul li{float:left; padding:3px auto 3px auto; width:320px; text-align:center;  font-size:0.9em; color:#FFF; background-image:url(picts/quad_orange.gif); background-position:right; background-repeat:no-repeat;}
#footer .noquad{background-image:none;}


/*MENÜ LAW------------------------------------------*/
.nav-mobil, .law{display:none;}/*Menüpunkte im Hauptmenü nur für Smartphone*/

.nav-law{float:left;}
.nav-law p{font-size:13px;  padding:0 30px 0 20px; color:#fff; text-align:center;}
.nav-law a{color:#fff;}
.nav-law a:hover{color:#666;}

/*-----------------------------------------------------------------------------------------------------------------*/


/*BESCHREIBUNG INHALT---------------------------------------------------------------------------------------------------*/

/*LEFT COLUMN: NAVIGATION----------------------------------------------------------------------------*/
#nav-left{position:relative; margin:50px 0 0 0;}

#nav-left ul li{
	margin-top:4px; padding:1px 0 2px 15px;
	font-weight:normal; color:#FF9900; 
	background-color:#132142;
}
#nav-left ul li a{display:block;}/*Blockelement*/

#nav-left ul li.submenue{
	margin:0; padding:2px 0 2px 20px;
	font-size:16px; color:#FF9900;
	background-color:#FFFFFF;
	border-bottom:2px dotted #87877C; 
}
#nav-left ul li.noborder{border:none; margin-bottom:-2px; /*-2px, da keine Border*/}

#nav-left ul li.submenue a{ color:#132142;}
#nav-left ul li.submenue a:hover{ color:#FF9900;}
/*----------------------------------------------------------------------------------------------------------------*/

/*Center COLUMN----------------------------------------------------------------------------------------------*/
#content{position:relative;  margin:0; padding:0 90px 40px 42px;} 

h1{padding-bottom:22px;}
#content h2{padding-bottom:10px;}

#content .startseite-mobil li{display:none;}
#startseite #content, #landingpage #content{background-image:none;}/* Hintergrundbild für Smartphone*/

#content p{padding:0 0 10px 0; line-height:1.5em;}
#content p.bold{font-weight:600;}

#content .absatz{padding-top:20px;}
#content .absatz2{margin-top:10px;}
#content .absatz3{padding-top:5px;}
#content .absatz4{padding-top:22px;}


#content ul li{margin-bottom:5px; padding-left:20px;  padding-right:50px; line-height:1.5em; background-image:url(picts/pfeil_re.gif); background-position:2px 10px; background-repeat:no-repeat;}
#content ul li.eingerueckt{margin-left:20px; background-image:url(picts/pfeil_re.gif); background-position:1 7px; background-repeat:no-repeat;}
#content ul li.ohne{margin-bottom:5px; padding-left:20px; line-height:1.5em;}
#content ul li.eingerueckt{margin-left:20px; background-image:url(picts/pfeil_re.gif); background-position:1 7px; background-repeat:no-repeat;}

.pict2-mobil{display:none;}/*Profilbild nur fürs Smartphone*/

/*RIGHT COLUMN-----------------------------------------------------------------------------------------------------------*/
#right-column{margin-top:0px; }
#right-column .pict{position:relative; margin-top:0; left:0px;} 
#right-column .pict2{position:relative; margin-top:20px; left:0px;}
#right-column .pict3{position:relative; margin-top:310px; left:0px;}
/*--------------------------------------------------------------------------------------------------------------*/

#sabmar{position:relative; clear:left; padding:50px 0 0 0;}
#sabmar a{text-decoration:none; color:#132142;}
#sabmar a:hover{text-decoration:none; color:#FF9900;}
.underline{text-decoration:underline;}



/* Smartphones*/
@media screen and (min-width: 320px) and (max-width: 849px){
	
body{background-image:none; background:#fff;}

#wrapper{
	margin: 0 auto; padding: 0;
	width:100%; height:100%; 
}

/*HEAD-------------------------------------------------------------------------------------------------------------------*/
#head{width:100%; border-right:none;}

#logo{width:auto; margin:0; background-color:#FBFDFC; border-right:2px dotted #eaeaea;}

.slogan{margin:0;  width:100%; height:auto; background-color:#132142;}
.slogan li{margin-left:10px; padding:0 0 0 15px; color:#fff; font-size:14px;  text-align:left;  }
.slogan li.spalte1{border-left:none;}

.head-start .slogan{height:30px;}
.head-start .slogan li{display:none;}/*Auf der Startseite keine Sloganwörter, nur blauer Balken*/
.slogan li.btn-englisch{ display:block; position:absolute; top:5px; right:20px; width:auto; margin:0; padding:0 ; color:#FFA016; font-size:15px; font-weight:bold; background-color:transparent; }
.slogan li.btn-englisch a{padding-right:15px; color:#132142; background-image:url(picts/quad_orange.gif); background-position:right; background-repeat:no-repeat;}



/*MITTLERE SPALTE*/
#center-column, #center-column-start{
width:100%; min-height:500px; height:100%;
margin:0; padding:50px 0;/*regelt den Seitenabstand der content-box*/
border-left:0;
}

/*RECHTE SPALTE*/
#right-column{display:none;}

/* MENÜBUTTON , Die Menüs sind mit diesem Button ein- und ausblendbar---------------------------------------------------------------*/
.menu-btn {display:block; position:absolute;  top:100px; right:0px; width:60px; height:auto;  padding:10px 15px 0 0;  background:transparent;  z-index:6; }
.menu-btn a{margin-right:0; background-image:url(picts/pict_menue.png); background-position: right; background-repeat:no-repeat;}

/*NAVIGATION----------------------------------------------------------------------------*/
#nav-left{display:none; position:absolute; width:92%; top:210px; left:0; background-color:#fff; z-index:20;margin:20px 0 0 4%;}

#nav-left ul li{margin-top:4px; padding:3px 0 3px 15px;}

#nav-left ul li.submenue{padding:6px 0 5px 30px;}

#nav-left ul li.submenue a{ color:#132142;}
#nav-left ul li.submenue a:hover{ color:#FF9900;}

#menu-open:target #nav-left{display:block;}

.menu-btn a.open{display:block; }
.menu-btn a.close{display:none;}

#menu-open:target .menu-btn a.open{display:none;  }
#menu-open:target .menu-btn a.close{display:block; background-image:url(picts/menu_pfeil.png); background-position:right; background-repeat:no-repeat;}

#container{ width:100%;   border-right:0;}

#content{  padding:0 10px 40px 20px; width:100%; min-height:700px;}

h1{margin-top:50px;}

/*Bild auf der Startseite wird ausgeblendet*/
img.pict-startseite{display:none;}

/*Portrait fürs Smartphone*/
.pict2-mobil{display:block; float:right; padding:0 10px 10px 10px;}

/*FOOTER----------------------------------------------------------------------------------------------*/
#footer{float:left; width:100%; height:30px; background-color:#132142;}
#footer ul{display:none; float:left; margin-left:10px;}
#footer ul li{float:left; padding:3px auto 3px auto; width:240px; text-align:center;  font-size:0.9em; color:#FFF; background-image:url(picts/quad_orange.gif); background-position:right; background-repeat:no-repeat;}
#footer .noquad{background-image:none;}

.nav-pc{display:none;}/*Menüpunkt Kontakt, wird fürs Smartphone ausgeblendet*/
.nav-mobil, .law{display:block;}/*Submenüpunkte im Hauptmenü, Kontakt/Impressum, Datenschutz*/

/*MENÜ LAW in der Fußzeile------------------------------------------*/
.nav-law{width:100%; margin-top:-30px;}
.nav-law p{text-align:right; color:#fff;}
.nav-law a{color:#fff;}
}

@media screen and (min-width: 320px) and (max-width: 500px){
#head{background-image:none;}

.slogan li.spalte1{margin-left:0;  width:50%; padding-right:10px; text-align:right;}
.slogan li.spalte2{margin-left:0;}
.slogan li.spalte3{clear:left; margin-left:35%;}

/*Anstellle des Startbildes wird ein kleines Hintergrundbild eingeblendet un die aktiven Begriffe draufgelegt*/
#startseite #content{ background-image:url(picts/pict_start-small.png); background-position:-20px 20px; background-repeat:no-repeat; background-size:100%;}/*Hintergrundbild bei kleinen Displays*/
#landingpage #content{background-image:url(picts/pict_start-en-small.png); background-position:-20px 40px; background-repeat:no-repeat; background-size:100%;}
#content .startseite-mobil li {display:block; font-weight:bold; color:#132142;  background-image:url(picts/stosspfeil.png); background-position:70px 30px; background-repeat:no-repeat; }

#content .startseite-mobil li.riskmanagement{padding:40px 0 0 0px; background-position:40px 0px ;}
#content .startseite-mobil li.informationsecurity{padding:70px 0 0 10px; background-position:50px 30px ;}
#content .startseite-mobil li.management{ padding:70px 0 0 170px; background-position: 210px 30px; }
}

@media screen and (min-width: 501px) and (max-width: 699px){
	
#head{background-position: top right; background-size:auto 100%;}
.slogan li.spalte1{margin-left:0px;}	

img.pict-startseite{display:none;}/*Bild mit aktiven Bereichen auf der Startseite*/

/*Anstellle des Startbildes wird ein kleines Hintergrundbild eingeblendet un die aktiven Begriffe draufgelegt*/
#startseite #content{ background-image:url(picts/pict_start-small.png); background-position:0 40px; background-repeat:no-repeat; background-size:100%;}/*Hintergrundbild bei kleinen Displays*/
#landingpage #content{background-image:url(picts/pict_start-en-small.png); background-position:0 40px; background-repeat:no-repeat; background-size:100%;}
#content .startseite-mobil li {display:block; font-weight:bold; color:#132142;  background-image:url(picts/stosspfeil.png); background-position:70px 30px; background-repeat:no-repeat; }

#content .startseite-mobil li{font-size:24px;}
#content .startseite-mobil li.riskmanagement{padding:90px 0 0 50px;}
#content .startseite-mobil li.informationsecurity{padding:120px 0 0 10px; background-position:50px 80px ;}
#content .startseite-mobil li.management{ padding:80px 0 0 270px; background-position: 300px 40px; }

#nav-left{width:94%; top:180px; margin:20px 0 0 3%;}
}

@media screen and (min-width: 700px) and (max-width: 767px){
#head{background-position: top right; background-size:auto 100%;}
.slogan li.spalte1{margin-left:180px;}

img.pict-startseite{display:none;}/*Bild mit aktiven Bereichen auf der Startseite*/

#startseite #content{padding:0; margin:0; background-image:url(picts/pict_start-middle.png); background-position:left 40px; background-repeat:no-repeat; background-size:100%;}/*Hintergrundbild bei kleinen Displays*/
#landingpage #content{background-image:url(picts/pict_start-en-middle.png); background-position:left 40px; background-repeat:no-repeat; background-size:100%;}

#content .startseite-mobil li {display:block; font-weight:bold; color:#132142;  background-image:url(picts/stosspfeil.png); background-position:70px 30px; background-repeat:no-repeat; }

#content .startseite-mobil li{font-size:24px;}
#content .startseite-mobil li.riskmanagement{padding:100px 0 0 30px; background-position:90px 60px ;}
#content .startseite-mobil li.informationsecurity{ padding:120px 0 0 10px; background-position:60px 80px ;}
#content .startseite-mobil li.management{ padding:100px 0 0 290px; background-position: 340px 60px; }

#nav-left{width:96%; top:160px; margin:20px 0 0 2%;}
}


/* Tablet, portrait*/
@media screen and (min-width: 768px) and (max-width: 849px){
img.pict-startseite{display:none;}/*Bild mit aktiven Bereichen auf der Startseite*/

#startseite #content{padding:0; margin:0; background-image:url(picts/pict_start-middle.png); background-position:0 40px; background-repeat:no-repeat; background-size:100%;}/*Hintergrundbild bei kleinen Displays*/
#landingpage #content{background-image:url(picts/pict_start-en-middle.png); background-position:0 40px; background-repeat:no-repeat; background-size:100%;}

#content .startseite-mobil li {display:block; font-weight:bold; color:#132142;  background-image:url(picts/stosspfeil.png); background-position:70px 30px; background-repeat:no-repeat; }

#content .startseite-mobil li{font-size:24px;}
#content .startseite-mobil li.riskmanagement{padding:100px 0 0 30px; background-position:90px 60px ;}
#content .startseite-mobil li.informationsecurity{ padding:120px 0 0 10px; background-position:60px 80px ;}
#content .startseite-mobil li.management{ padding:100px 0 0 290px; background-position: 340px 60px; }


}


@media screen and (min-width: 850px) and (max-width: 1199px){
body{background-image:none;}
#wrapper{width:100%;}	

/*HEAD-------------------------------------------------------------------------------------------------------------------*/
#head{width:100%;  background-position:right; background-size:auto 100%; border:none;}

#logo{ 	border-right:2px dotted #87877C;}

.slogan{float:left; margin-top:0px; width:100%;  margin-left:0; background-color:#132142;}
.slogan li.spalte1{padding-left:220px;}
.slogan li{padding:0 30px 2px 30px; font-size:15px;}

.slogan li.btn-englisch{ display:block; position:absolute; top:5px; right:20px; width:auto; margin:0; padding:0 ; color:#FFA016; font-size:15px; font-weight:bold; background-color:transparent; }
.slogan li.btn-englisch a{padding-right:15px; color:#132142; background-image:url(picts/quad_orange.gif); background-position:right; background-repeat:no-repeat;}
.slogan li.btn-englisch a:hover{background-image:none;}


/*MITTLERE SPALTE*/
#center-column{
 min-height:600px;
margin:0 120px 0 220px;
padding:80px 10px 30px 25px;
border-left:2px dotted #87877C;
}

#container{float:left; margin-top:30px; width:100%; height:auto; background-color:#fff;  border-right:none;}

#nav-left{display:block; position:relative; width:auto; top:130px;  margin:0;}

#content{  padding:0 0px 40px 0px; width:auto; min-height:700px;}

.pict2-mobil{display:none;}/*Portraitbild für Smartphone ausblenden*/

img.pict-startseite{display:none;}/*Bild mit aktiven Bereichen auf der Startseite*/

/*Anstellle des Startbildes wird ein kleines Hintergrundbild eingeblendet un die aktiven Begriffe draufgelegt*/
#startseite #content{padding:0; margin:0; background-image:url(picts/pict_start-middle.png); background-position:left 40px; background-repeat:no-repeat; background-size:100%;}/*Hintergrundbild bei kleinen Displays*/
#landingpage #content{background-image:url(picts/pict_start-en-middle.png); background-position:left 40px; background-repeat:no-repeat; background-size:100%;}

#content .startseite-mobil li {display:block; font-weight:bold; color:#132142;  background-image:url(picts/stosspfeil.png); background-position:70px 30px; background-repeat:no-repeat; }

#content .startseite-mobil li{font-size:24px;}
#content .startseite-mobil li.riskmanagement{padding:100px 0 0 30px; background-position:90px 60px ;}
#content .startseite-mobil li.informationsecurity{ padding:120px 0 0 10px; background-position:60px 80px ;}
#content .startseite-mobil li.management{ padding:100px 0 0 290px; background-position: 340px 60px; }

/*FOOTER----------------------------------------------------------------------------------------------*/
#footer{float:left; width:100%; height:30px; background-color:#132142;}
#footer ul{display:none;}
}


/* i-Pad*/
@media screen and (min-width: 1024px) and (max-width: 1199px){
img.pict-startseite{display:block;  margin:0px 0 0 0px; padding:0; width:100%;}
#content .startseite-mobil{display:none;}
#startseite #content, #landingpage #content{background-image:none;}
}