/* ///////////	//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AKKORDEON
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.akkordeon1 {}

.akkordeon1 label{
position: relative;
z-index: 3;
display: block;
height: 50px;
cursor: pointer;
color: #3a3a3a;
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out; 
		  margin-bottom:0px;
		  margin-top:15px;
		  padding:0px;
}

.akkordeon1 label:hover{ }

.akkordeon1 input:checked + label,
.akkordeon1 input:checked + label:hover{}

.akkordeon1 label:hover:after,
.akkordeon1 input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 15px;
top: 0px;
background: transparent url(http://code-snippet-blog.dennispollack.de/wp-content/uploads/2012/07/arrow_down.png) no-repeat center center;	
}

.akkordeon1 input:checked + label:hover:after{ background:none; }

.akkordeon1 input{ display: none; }



.akkordeon1 article{
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 15;
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
margin-bottom:20px;}

.akkordeon1 article p{ padding: 0px;}

.akkordeon1 input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
}

.akkordeon1 input:hover ~ article{
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
}


.akkordeon1 input:checked ~ article.a-001{
text-align:left; height:600px; margin-top:10px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-002{
text-align:left; height:300px; margin-top:10px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-003{
text-align:left; height:150px; margin-top:10px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-004{
text-align:left; height:310px; margin-top:10px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-005{
text-align:left; height:200px; margin-top:10px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-team{
text-align:left; height:540px; margin-top:10px; overflow:auto;}



/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TABELLENSTRUKTUR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/		

.titelbild { width:99%; }

.tabellenbreite { width:100%; vertical-align:top; padding:0px; margin:0px; border:0px; border-bottom: #CCC; }	

.tabellethumb { width:80px; height:80px; vertical-align:top; padding:0px; padding-right:20px; margin:0px; border:0px; }

.tabellethumb img { width:100%; height:auto;}

.tabelletext { width: auto; vertical-align:top; padding:0px; margin:0px; border:0px; }

.tabellentext img { width:100%; }

tabellenueberschrift { font-family: Courier, "Courier New", monospace; font-size:16px; color:#E04410; font-weight:bold;}

.tabellerightspace { width:60px; }

.tabellelinks { width:45%; vertical-align:top; text-align:justify; line-height:22px; }

.tabellelinks img {width:100%;}

.tabellerechts { width:45%; padding-left:40px; vertical-align:top; margin:0px;}

.tabellerechts img { margin-top:17px; }

.tabellerechts img .erstesbild { margin-top:72px; }

.profilbild { width: 150px; vertical-align:top; }	

.profilbild img { width:100%; }	

.profiltext { vertical-align:top; width:auto; padding-left: 10px; }

.tabellenabstand { padding-bottom:10px; }

		
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
HTML-ELEMENTE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

/* Responsive Images */

img {
max-width: 100%;
/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
height: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

.bild img { width: 100%; height:auto; float: left; margin-right: 20px; }

::-webkit-scrollbar {
width: 16px;
height: 16px; }

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }



/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SEITENEIGENSCHAFTEN
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.bildimtext { text-align:left; margin: 10px 20px 10px 0; width:240px; float:left;}

.zeilenabstand { line-height: 22px; }

.blocksatz { text-align:justify; margin:5px 10px 0px 0px;  }

gralstablet {display:block;}

tablet { display:none;}

.displaymobile { display:none; }

.absolute { top:0px; position:absolute; }

.abstandheader { margin-top:50px; }


.abstand30 { margin-top:0px;}

.abstandoben { margin-top:100px;}

.center { text-align:center;}

.white { background-color:#FFF; padding: 2px 0px 70px 0;}

.grey { background-color:#EFEFEF; padding: 2px 0px 70px 0;}

.kategorie { font-family:Verdana, Geneva, sans-serif; color:#999; position:absolute; margin-top:14px;}

.alignright { text-align:right;}

.border { border-bottom:medium solid #999; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TYPOGRAFIE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.akkordueber br { line-height:21px; }

subheader { font-size:12px; font-weight:bold; font-style:italic; padding-top:10px;}

logoschrift { font-size:50px; font-family:Courier,"Courier New", monospace; padding-right:-10px; }

net { font-size:25px;  font-family:Courier,"Courier New", monospace;  }

impbaurat { font-size:18px; font-family: Courier, "Courier New", monospace;}

impnet { font-family: Courier, "Courier New", monospace;}

farbe { color: #E04410;}

.rahmen { border-top: solid thin #CCC; }

.text { }

.beschreibung { width:60%; font-family:Verdana, Geneva, sans-serif; vertical-align:middle;}

.nebenbeschreibung { width:auto; }

.akkordueber { font-size:20px; }

.akkordueber:hover { color:#999;   
-webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out; }



/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
NAVIGATION
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.my-sticky-element { 

   -moz-transition: all 0.2s ease-out;
     -o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;}

.my-sticky-element.stuck { z-index:50; background-color:#FFF; position:fixed; top:0px;  
  -webkit-border-bottom-left-radius: 30px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-bottom-left-radius: 30px;
}
		
.navi { width:100%; position:relative;}

.pseudobalken { height:98px; width:100%;}

.navi li { float:right; list-style-type:none; cursor:pointer; margin-bottom:0px; vertical-align:top; margin-top: -5px;}

.navi li ul { float:left; font-size:14px;transition: all 0.3s ease-out; margin-left:-10px;
	-webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;}
	
.navi li ul:hover { color:#E04410;}

markiert { color: #E04410; }
		
.kontakt { text-align:right; }
.kontakt:hover { }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOOTER
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
		
.pagefooter { width:100%; padding: 20px 0px 20px 0px;  background-color:#CCC;}

.footheader { text-align:center;; margin-bottom:0px; font-family: Courier, "Courier New", monospace;}

.foot { font-size:16px; color:#666;}










/* Basis
============================================= */

body {
margin: 0; 
font: 12px/18px Verdana, Geneva, sans-serif;
 color: #000;
 scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0; 
 }	
 

/* Links */

a {
color: inherit;
text-decoration: none;
-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
}

a:hover, a:focus { text-decoration: none; }

a:hover,
a:active {
outline: 0;
}


/* Raster
============================================= */

/* Clearfix und Abstandsausgleich für die Zeilen */

.row { margin-left: -20px; 
*zoom: 1; }

.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}

.row:after { clear: both; }

/* Info zum folgenden Selektor
http://blog.teamtreehouse.com/css3-substring-matching-attribute-selectors */

[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;

/* nur um die Spalten sichbar zu machen  */
/*background:#999; color:#FFF; margin-bottom:10px;*/
}

.container { width: 940px; }

.span12 { width: 940px; }
.span11 { width: 860px; }
.span10 { width: 780px; }
.span9 	{ width: 700px; }
.span8  { width: 620px; }
.span7  { width: 540px; }
.span6  { width: 460px; }
.span5  { width: 380px; }
.span4  { width: 300px; }
.span3  { width: 220px; }
.span2  { width: 140px; }
.span1  { width: 60px; }

.offset12 { margin-left: 980px; }
.offset11 { margin-left: 900px; }
.offset10 { margin-left: 820px; }
.offset9  { margin-left: 740px; }
.offset8  { margin-left: 660px; }
.offset7  { margin-left: 580px; }
.offset6  { margin-left: 500px; }
.offset5  { margin-left: 420px; }
.offset4  { margin-left: 340px; }
.offset3  { margin-left: 260px; }
.offset2  { margin-left: 180px; }
.offset1  { margin-left: 100px; }


/* Clearfix + Zentrieren für den Container */

.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}

.container:before,
.container:after {
display: table;
content: "";
line-height: 0;
}

.container:after { clear: both; }







/*
==============================================
==============================================
   Responsive / CSS3 Media Queries
==============================================
============================================== */


/*
   Elemente ein- und ausblenden
==============================================*/

@-ms-viewport { width: device-width; }

.hidden { display: none; visibility: hidden; }
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.hidden-desktop { display: none !important; }
.visible-desktop { display: inherit !important; }


@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
.visible-tablet { display: inherit !important; }
.hidden-tablet { display: none !important; }
}

@media (max-width: 767px) {
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
.visible-phone { display: inherit !important; }
.hidden-phone { display: none !important; }
}

.visible-print { display: none !important; }

@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}

/* Mobile 
==============================================*/

@media (max-width: 767px) {
	

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
VERÄNDERUNGEN
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


.logo { margin:30px 50px 0; padding-bottom:80px; text-align:center; background:url(../img/Logo/Logo.jpg) center no-repeat; background-size:100%;}
.logobg { }
impbaurat { font-size:50px; }
kleinbaurat { font-size:14px; }
.mobileueberschrift { font-family: Verdana, Geneva, sans-serif; font-size:35px; margin:80px 20px 0; text-align:left; color:#666; }

.profiltext { padding: 0px; margin:0px; }

.akkordeon1 label { height:20px; display:block;}

.akkordeon1 input:checked ~ article.a-001{
text-align:left; height:100px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-002{
text-align:left; height:100px; margin-top:10px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-003{
text-align:left; height:100px; margin-top:10px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-004{
text-align:left; height:100px; margin-top:10px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-005{
text-align:left; height:200px; margin-top:10px; overflow:auto;}


.akkordeon1 input:checked ~ article.a-team{
text-align:left; height:130px; margin-top:10px; overflow:auto;}

.border { padding:30px 0; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SEITENEIGENSCHAFTEN
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
	
	
	
.mobile { display:none;}
.displaymobile { display:block;}	
	
body {
padding-left: 20px;
padding-right: 20px;
font-size: 0.7em;
line-height: 1.6em;

}


.container { width: auto; }

.row { margin-left: 0; }

[class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}




}


/* Tablet 
==============================================*/


@media (min-width: 768px) and (max-width: 979px) {


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TYPOGRAFIE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

logoschrift { font-size:40px; padding-right:0px; }

net { font-size:24px;  }

.kategorie { font-size:8px; line-height:12px; margin-top:18px; }

.akkordueber { font-size:16px; margin-left:0px; padding-left:0px; }

.akkordueber br { line-height:20px; }

subheader { font-size:12px; font-weight:normal; font-style:italic; padding-top:10px; white-space: nowrap;}

impbaurat { font-size:22px; font-family: Courier, "Courier New", monospace;}

.blocksatz { line-height:18px; }

.bildimtext { width:200px; height:auto; }

.akkordeon1 input:checked ~ article.a-001{
text-align:left; height:500px; margin-top:10px; overflow:auto;}

.akkordeon1 input:checked ~ article.a-team{
text-align:left; height:200px; margin-top:10px; overflow:auto;}

.profilbild { width: 100px; }	

.foot { font-size:12px; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
NAVIGATION
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.akkordeon1 label{ height: 42px;}

.akkordeon1 article{ margin-bottom:5px; margin-top:5px;}

.akkordeon1 input:checked ~ article.a-001{
margin-bottom:20px;}

.akkordeon1 input:checked ~ article.a-002{
margin-bottom:20px;}

.akkordeon1 input:checked ~ article.a-003{
margin-bottom:20px;}

.akkordeon1 input:checked ~ article.a-004{
margin-bottom:20px;}

.akkordeon1 input:checked ~ article.a-005{
margin-bottom:20px;}

.akkordeon1 input:checked ~ article.a-team{
margin-bottom:20px;}

.pseudobalken { height:96px;}

.navi li { margin-top: -5px;}

.navi li ul { font-size:14px; margin-left:-20px;}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SEITENEIGENSCHAFTEN
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.white { padding: 1px 0px 40px 0; margin:0px;}

.grey { padding: 1px 0px 40px 0; margin:0px;}

::-webkit-scrollbar {
width: 8px;
height: 8px; }

.abstand30 { margin-top:20px; }

.abstandheader { margin-top:15px; }


body {
font-size: 10px/18px; }	
 
gralstablet {display:none;}
tablet { display:block;}	

.row {
margin-left: -20px;
*zoom: 1;
}

.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after { clear: both; }

[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}

.container { width: 724px; }

.span12 { width: 724px; }
.span11 { width: 662px; }
.span10 { width: 600px; }
.span9 { width: 538px; }
.span8 { width: 476px; }
.span7 { width: 414px; }
.span6 { width: 352px; }
.span5 { width: 290px; }
.span4 { width: 228px; }
.span3 { width: 166px; }
.span2 { width: 104px; }
.span1 { width: 42px; }

.offset12 { margin-left: 764px; }
.offset11 { margin-left: 702px; }
.offset10 { margin-left: 640px; }
.offset9 { margin-left: 578px; }
.offset8 { margin-left: 516px; }
.offset7 { margin-left: 454px; }
.offset6 { margin-left: 392px; }
.offset5 { margin-left: 330px; }
.offset4 { margin-left: 268px; }
.offset3 { margin-left: 206px; }
.offset2 { margin-left: 144px; }
.offset1 { margin-left: 82px; }


/*TYPOGRAFIE*/
/*Logotypo*/






}

/* Large Desktop 
==============================================*/

@media (min-width: 1200px) {

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
VERÄNDERUNGEN
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
	
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TYPOGRAFIE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


logoschrift { font-size:60px; padding-right:-10px; }

net { font-size:30px;  }

.akkordueber { font-size:20px; }

.akkordueber br { line-height:23px; }

subheader { font-size:14px; font-weight:bold; font-style:italic; padding-top:10px;}

impbaurat { font-size:22px; font-family: Courier, "Courier New", monospace;}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
NAVIGATION
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


.pseudobalken { height:98px;}

.navi li { margin-top: -5px;}

.navi li ul { font-size:16px; margin-left:0px;}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SEITENEIGENSCHAFTEN
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
	
body { font-size: 14px;}
	
.row {
 margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
.container { width: 1170px; }

.span12 { width: 1170px; }
.span11 { width: 1070px; }
.span10 { width: 970px; }
.span9 { width: 870px; }
.span8 { width: 770px; }
.span7 { width: 670px; }
.span6 { width: 570px; }
.span5 { width: 470px; }
.span4 { width: 370px; }
.span3 { width: 270px; }
.span2 { width: 170px; }
.span1 { width: 70px; }

.offset12 { margin-left: 1230px; }
.offset11 { margin-left: 1130px; }
.offset10 { margin-left: 1030px; }
.offset9 { margin-left: 930px; }
.offset8 { margin-left: 830px; }
.offset7 { margin-left: 730px; }
.offset6 { margin-left: 630px; }
.offset5 { margin-left: 530px; }
.offset4 { margin-left: 430px; }
.offset3 { margin-left: 330px; }
.offset2 { margin-left: 230px; }
.offset1 { margin-left: 130px; }



}