/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** ######################################################################################################
** 
**  YAML Version: 2.5.2
**  css modified by peperoni werbeagentur / toni mamic
**
*/

/*-------------------------------------------------------------------
--- allgemeine styles ---
-------------------------------------------------------------------*/ 

/* Hiermit werden die Randabstaende und border aller HTML-Elemente auf Null gesetzt. Damit wird das       
** Aussehen der Webseite in unterschiedlichen Browsern vereinheitlicht. 
*/


@font-face {
  font-family: "dinEng";
 /* src: url('webfont.eot');*/ /* IE9 Compat Modes */
  src: url('schriftarten/e030000d.ttf'); /* Safari, Android, iOS */
  /*src: url('schriftarten/e030000d.woff');*/
       /*url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: "dinEng2";
 /* src: url('webfont.eot');*/ /* IE9 Compat Modes */
  /*src: url('schriftarten/e030000d.ttf'); /* Safari, Android, iOS */
  src: url('schriftarten/e030000d.woff') format('woff');
       /*url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: "dinEng3";
 /* src: url('webfont.eot');*/ /* IE9 Compat Modes */
  /*src: url('schriftarten/e030000d.ttf'); /* Safari, Android, iOS */
  src: url('schriftarten/e030000d.woff2') format('woff2');
       /*url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: "dinEng4";
 /* src: url('webfont.eot');*/ /* IE9 Compat Modes */
  src: url('schriftarten/e030000dx.ttf'); /* Safari, Android, iOS */
  /*src: url('schriftarten/e030000d.woff');*/
       /*url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


* { 
	margin:0 auto;
	padding: 0;
	box-sizing: border-box;
	/*hyphens:auto;*/
/* funktioniert leider nicht: */
	/*-webkit-hyphens: auto;*/
	   /*-moz-hyphens: auto;*/
	      /*-ms-hyphens: auto;*/
	      /*word-break: normal;*/
		/*word-wrap: normal;*/
	/*-webkit-hyphenate-limit-lines: 2;*/
	/*        hyphenate-limit-lines: 2;*/
	/*-webkit-hyphenate-limit-chars: auto 4;*?
	/*        hyphenate-limit-chars: auto 4;*/
} 

/* Das zuruecksetzen der Innen- und Aussenabstaende verursacht zu kleine Selectboxen. Dies wird korrigiert */
option {padding-left: 0.4em}


html { 
	/*min-height: 100%;*/
	/*bottom:0;*/
	/*height: 105vh;*/
	/*background-color:  #cecece;*/
	background-color: #900;  /*roter hintergrund*/
	/*background: url(../bilder/marg_plakat.jpg) no-repeat; */
	/*background-size: 100% auto;*/
	/*overflow-y:scroll; */
 }

body { 
	max-width:1000px;
 	/*min-height: 101%;*/
 /*Beseitigung des Rundungsfehlers bei Schriftgroessen im Opera sowie Standardformatierungen */
 /*font-size: 100.01%; */
/* FIX: Verhindert, dass positionierte Elemente nicht verschoben werden when die Groesse des Browser Fensters geaendert wird. */
 position: relative; 
/* Vorgabe der Standardfarben und Textausrichtung*/     
 width : 100%;
 /*height:5000px;*/
 /*background:#ccd9df;*/
 color: #000;        
 text-align: left; 
 /*font-family: "dinEng";*/
 font: normal 100.01% verdana, sans-serif, sans-serif;
 background-color: #ffffff;
 /*background-color:  #cecece;*/
 bottom:0;

 } 

html{
  /*height:100%;*/
}

 
/** html body { text-align: left;}  text-align:center; wenn layout mittig (fuer ie)*/

p{
	font-size:0.875em;
}

h1,h2,h3,h4,h5,h6 {
 font-size: 1em ;
 margin : 0;
 padding : 0;
 text-align:left;
 /*margin-bottom: 0.5em;*/
}
h2 { line-height: 1.25em;}
 
p {font-family: verdana, sans-serif;}



/*-------------------------------------------------------------------
--- projektbeschreibungen ---
-------------------------------------------------------------------*/
/*this was all text modul*/
/*{
 padding:.5em .5em .5em 0.5em; .75em
}*/






.fussnote {
font-size:.75em !important;
color:#666;
}

a.content-top,
a.content-top:link,
a.content-top:visited {
display:block;
text-align:right;
border-bottom:1px solid #999;
padding:1em 0;
color:#999;
font-size:.75em;
}

a.content-top:hover {color:#000;}

a.content-top:active {color:#c00;}

hr {
margin:1em 0 0 0;
height:.125em;
background:#fff;
border:none;
border-top:1px solid #9ab;
font-size:.125em;
}



/*-------------------------------------------------------------------
--- allgemeine linkstyles ---
-------------------------------------------------------------------*/ 
a:link, a:visited {
 text-decoration : none;
 color :#900; /* 369 */
 text-decoration : underline;
}
a:hover, a:active {
 text-decoration : underline;
 color :#210; /* 012 */
}

#col3 p a {
 display:inline-block; 
 /*font-size:.8em;*/
 /*line-height:1.5em;*/
}

a.hi, a.hi:link, a.hi:hover, a.hi:active, a.hi:visited {
 text-decoration : none;
 color :#000;
}

a span {
 font-size:.875em;
 color:#666;
}
 
a img {border:none;}
ul, ol, li, dl, dd, dt {margin:0;}

/*-------------------------------------------------------------------
--- content-body ---
#contbody div { border:1px solid red;}
-------------------------------------------------------------------*/
/*#contbody { */
	/*width: auto;*/
	 /*margin:0;*/
	 /*}  background:#09f;*/



 h1 {
 font-size:1.375em;
 line-height:1.375em;
 font-weight: normal;
 font-style:normal;
 color:#005e87;/*057 900*/
 padding:.25em 0;
}

h2 {
	font-size: 1.125em;
 	font-weight:normal;
 	line-height:1.375em;
 	/*line-height: 1.5em;*/
 	color:#333;
 	padding:.25em 0;
}

h3 {padding-top:1em;}
h4 {padding-top:.125em;}
h6 {font-size:.75em; font-weight:100; color:#666; padding:.25em 0 .5em;}

 p, ul, .text2 p {
 line-height:1.5em;
 font-size: 1em;
 list-style-type:square;
 padding:.25em 0;
}
li {
margin:1em;
}
 p img {float:left; margin:.25em .75em .5em  0; border:0px solid #036;}
p img.right {float:right; margin:.25em 0 .5em .75em ; border:0px solid #036;}



/*-------------------------------------------------------------------
--- HAUPTNAVIGATION ---
-------------------------------------------------------------------*/ 
/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** ######################################################################################################
**
**  YAML Version: 2.5.2
**  css modified by peperoni werbeagentur / toni mamic
**
*/


/*-------------------------------------------------------------------
--- HEADER ---
-------------------------------------------------------------------*/ 

/*
#header div{border:1px solid red;}
*/
#header {
 margin:0 auto;
 width:100%; 
 height:11.875em; 
 position:relative;
 z-index:20;
 /*overflow:show;*/
 /*border-bottom:.25em solid #b3c3d0;*/
 background:#ced9e3 url(images/head_verlauf.jpg) no-repeat;
}

/*-------------------------------------------------------------------
--- KAENGURU SCHRIFTZUG ---
-------------------------------------------------------------------*/
/*#headline {
 margin: 0em 0 0 1.5em;
 padding:1em 0em 0 0;
 height: 8em;
 float:left;
 display: inline;
}*/
#headline {
	/*color: #0A4F6C;*/
 	margin: 2em 0 0 1.5em;
 	/*padding:em 0em 0 0;*/
 	/*height: 8em;*/
 	float:left;
 	display: inline;
}

#headline a {
	font-family: dinEng2;
 	color: #0A4F6C;
 	font-size: 400%;
 	font-weight: normal;
 	/*letter-spacing: px;*/
 	text-decoration:none;
 /*display:block;*/
 height:100%;
 /*margin:2em;*/
}

#headline sup{
	font-size: 50%;
}

#headline a:hover { color:#F29400; }

/*#headline a.hi { color:black; }*/
/*#headline a img{ height:100%; margin:0;}*/




/*-------------------------------------------------------------------
--- HEADERIMAGE ---
-------------------------------------------------------------------*/

#headerimagewettbewerb {
	position: relative;
	display:inline-block;
	float:left;
 	padding:0;
 	margin-left:22%;
	height: 11em;
	z-index:6;
	/*left:33em;*/
 }

/*#headerimagewettbewerb div {
 margin:0;
 display:block;
 height:100%;
}*/

#headerimagewettbewerb img {
	/*width: 100%;*/
 	height:11em;
 	position: absolute;
 	bottom:0;
 }





/*-------------------------------------------------------------------
--- HOME ---
-------------------------------------------------------------------*/
/*
#headerimage {
	margin:0em;
	padding:0;
	display:block;
	height:11.625em;
	width:33%;
	display:block;
	position:absolute;
	z-index:33;
	top:0;
	left:1em;
 }

#headerimage div {
 margin:0;
 display:block;
 height:100%;
}

#headerimage div img {
 height:100%;
}*/


/*-------------------------------------------------------------------
--- SERVICE NAVIGATION ---
-------------------------------------------------------------------*/
#servicenav {
	float: right;
	display: inline;
 	position:absolute;
 	right: 1em;
 	bottom:.1em; ;
 	z-index:8;
}

#servicenav ul {
 padding: 0;
 /*width:6.25em;*/
 display:inline;
 padding:0 0 1px 1px ;
 height:3.125em;
}

#servicenav ul li {
 padding:1px 1px 0 0;
 list-style: none;
 display:block;
 color:#999999;
 height:3.0em;
 width:3em;
 margin:0;
 float:left;
 overflow:hidden;
}

* html #servicenav ul  { margin:0 0 -.25em -.187em;}

#servicenav ul li a {
 display:block;
 text-decoration: none;
 font-weight: 100;
 color: #999999;
 width:3em;
 height:3.0em;
}

#servicenav ul li a:hover { color:#666666; margin:0 0 0 -3em;  display:block;}

#servicenav ul li a:active { color:#666666; margin:0 0 0 -6em;}

#servicenav ul li a.hi { color: #000000; margin:0 0 0 -3em;}

#servicenav ul li a img { height:3em;}


/* div tester

 body div DIV {
  border:0px solid#f09;
  BACKGROUND:#fff;
 }

*/





/*-------------------------------------------------------------------
--- TOP LINK IMAGE ---
-------------------------------------------------------------------*/
#toplink { /*
 position:absolute;
 left:48em;
 top:8em;8.125em*/
 padding: 0;
 display:block;
 padding:0;
 position:relative;
 left:0em;
 top:2.75em;
}


#toplink div {
 padding:1px 1px 0 0;
 list-style: none;
 display:block;
 color:#999;
 height:2.0em;
 width:2em;
 margin:0;
 float:left;
 overflow:hidden;
}



#toplink div a {
 display:block;
 text-decoration: none;
 font-weight: 100;
 color: #999;
 width:2em;
 height:2.0em;
}

#toplink div a:hover { color:#666; margin:0 0 0 -2em;  display:block;}

#toplink div a:active { color:#666; margin:0 0 0 -4em;}

#toplink div a.hi { color: #000; margin:0 0 0 -2em;}

#toplink div a img { height:2em;}






/*/*
/*-------------------------------------------------------------------
--- 1ST LEVEL navigation (HAUPTNAVIGATION) ---
-------------------------------------------------------------------*/
/*#navigation  {
 margin:0;
 position:absolute;
 top:8.125em;
 left:1.5em;
 text-align:left;
 display:block;
 height:2.25em;
 background:#fff ;/*637380*/
 /*padding:1px 0 0 1px ;
}

#navigation li {
 display:block;
 float:left;
}


#navigation a {
 margin:0 1px 0 0;
 padding: 0 1em ;
 font-size:1.125em;
 font-weight:100;
 color:#697380;
 text-decoration:none;
 line-height:2em;
 display:block;
 background:#ced9e3 url(images/nav_verlauf.jpg) repeat-x;
}

#navigation a:hover, #navigation a:active {
 color:#456; /*D39D29*/
 /*text-decoration:none;
 background:#ced9e3;/*dee9f3*/
/*}

#navigation li.hi a {
 color:#789;
 background:#fff;
}

#navigation a.hi, #navigation a:hover.hi {
 color:#fff;
 text-decoration:none;
 background:#637380 url(images/nav_verlauf_hi.jpg) repeat-x;
}*/


#navigationmenu{
	position: absolute;
	background:#ced9e3 url(images/head_verlauf.jpg) no-repeat;
	height:2.5em;
	bottom: 0em;
	width:100%;
	max-width:1000px;
}



.topnav {
	position: absolute;
	float:left;
  	/*overflow: hidden;*/
  	margin:0;
 	bottom:0em;
 	margin-left:1.5em;
 	text-align:left;
 	display:block;
 	height:2.5em;
 	padding:1px 0 0 1px ;
 	z-index: 5;
}

.topnav a {
	display:table-cell;
	float:left;
	margin:0 2px 0 0;
 	padding: 0 1em ;
 	font-size:1.125em;
 	color:#697380;
	text-decoration:none;
	line-height:200%;
	height:100%;
	background:#ced9e3 url(images/nav_verlauf.jpg) repeat-x;
	text-align: center;
	}


.topnav a:hover, a:active{
 	color:#666666;
	background: white;	/*#ced9e3;*//*dee9f3*/
	text-decoration: underline;
}


#active {
	background: none !important; 
  	background-color: #637380 !important;
  	color: white !important;
}
#active a{
	color:white;
}

.topnav a.icon{
	display:none;
	width: 4em !important;
	vertical-align: middle !important;
}


.navigationline  {
 margin:0;
 position:absolute;
 top:100%;
 left:0em;
 display:block;
 width:100%;
 border-top:.25em solid;
 border-color:#637380; /*aeb9c3*/
}



.unternav {
	position: absolute;
	float:left;
	width:100%;
	background: #637380;
  	/*overflow: hidden;*/
  	/*margin:0;*/
 	bottom:0;
 	margin-left:0em;
 	text-align:left;
 	display:block;
 	height:2em;
 	padding:1px 0 0 1px ;
}

.unternav a {
	display:table-cell;
	float:left;
	margin:0 0 0 0;
 	padding: 0 0.5em 0 0.5em ;
 	font-size:1em;
 	font-weight:100;
 	color:white;
	 text-decoration:none;
	 line-height:200%;
	 height:100%;
	 width:25%;
	 border-right: dotted 1px white;
	 /*display:block;*/
	 /*background:#ced9e3 url(images/nav_verlauf.jpg) repeat-x;*/
	 
	  text-align: center;
	  /*vertical-align: middle;*/
	  /*padding: 14px 16px;*/
	  text-decoration: none;
	  /*font-size: 17px;*/
	}

@media only screen and (max-width: 900px) {
  #headerimagewettbewerb{
  	display:inline;
    float:left;
    height: 9em;
    /*width: 10em;*/
    margin-left: 2%;
    margin-top: 0em;
  }
  #headerimagewettbewerb img{
  	height:100%;
  }
}




@media screen and (max-width: 700px) {
	#headline a{
		font-size: 300%;
	}

/*	.topnav{
		width:50%;
	}*/

  .topnav a {
 	font-weight:bold;
  	display: none;
  }
  #active{
  	display:inline;
  	pointer-events: none;
  }  

  .topnav a.icon {
    float: left;
    display: inline !important;
    width:4em ;
    font-weight: normal;
  }
}

@media only screen and (max-width: 750px) {
  .topnav.responsive a {
  	width:100%;
    /*float: none;*/
    display: inline !important;
    text-align: left;
    /*border: solid #637380 1px ;*/
  }
  .topnav.responsive .icon {
    text-align: center !important;
    /*border: solid #637380 1px ;*/
  }

}

@media only screen and (max-width: 620px) {
 /* #headline { 
  	margin-top:0.5em;
  }*/
  #headline{
  	margin-left: 1em;
  }
   #headline a { 
  	font-size: 250%;
  }

  #headerimagewettbewerb{
  	display:inline;
    float:left;
    height: 7em;
    /*width: 6em;*/
    margin-left: 2%;
    margin-top: 1em;
  }
   #headerimagewettbewerb img{
  	height:100%;
  }

  #header{
   	height:9.875em;
   }
}


@media only screen and (max-width: 435px ){
	#active{
		display:none;

	}
  #headerimagewettbewerb{
  	position:absolute;
  	height:4.5em;
  	bottom: 0.5em;
  	/*display:none;*/
	/*float:;*/
	left:35%;
   }
    #headerimagewettbewerb img{
    	height:100%;
  }

   .unternav a{
   		padding: 0 0.125em 0 0.125em;	
   	}
   	#header{
   		text-align: center;
   	}

/*   	#headline{
  	margin-left: 1.5em;
  	}*/
  /* #headline a { 
  	font-size: 150%;
  }*/

	
}

@media only screen and (max-width: 400px){
	.unternav a{
   		padding: 0 0.25em 0 0.25em;
   		width: auto ;
   }
}


@media only screen and (max-width: 950px) {
 #unternav a{
 	padding: 0 0.25em; 
 }
}

.activeNav:after {
    /* Rahmen nur an einer Seite einblenden */
    border-color: #637380 transparent  transparent transparent;
    border-style:solid;
    border-width:1em;

    /* Pseudo-Element stylebar machen */
    content:" ";
    display:block;
    height:0;
    width:0;

    /* Pseudo-Element positionieren */
    /*float:center;*/
    top:-0.2em;
    margin-left:auto;
    margin-right: auto;
    position:relative;
}

.activenav {
	font-weight: bold;
    /*min-height:100px;*/
    /*padding-left:60px;*/
    /*position:relative;*/
}





.unternav a:hover {
 	text-decoration:underline;
 	font-weight: bold;
}

.unternav a.icon{
	display:none;
	vertical-align: middle;
}



/*-------------------------------------------------------------------
--- 2ND, 3RD and 4TH LEVEL navigation ---
-------------------------------------------------------------------  */
button{
	/*float:left;*/
	padding: 0 0 0 0 ;
	margin: 0.5em 0 0.5em 0;
 	font-size:1.275em;
 	font-weight:800;
 	line-height:2em;
 	color:#8393a0;
 	text-decoration:none;
 	display:inline-block;
 	width:100%;
 	background:#dee9f3;
 	box-shadow: none;
 	min-height: 3em;
 	cursor:pointer;
 	/*border-bottom:1px solid white;*/
 	/*border-top:0px solid white;*/
}

#id101{
	text-align:center; 
}
#alleAufgaben{
	width:11em;
	text-align:center;
	background:#005e87;
	color:white;
	min-height:1em;
	border: 1px solid #bbb;
	font-size: 1em;
	border-radius: 0.2em;
	margin-top: 0em;
	z-index:99;


}
.broschuereButton{
	width: 48%;
	bottom:0;
	position: absolute;
	float:left;
	z-index:99;
	min-height:2em;
	color:#697380;
}


button:hover, button:active{
 	color:#666666;
	background: white;
	text-decoration: underline;
}


.b38{
	left:0.25em;
}

.b713{
	right:0.25em;
}

/*.card{
	border-radius: 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.125);
}*/

.fold {
	display:flex;
	/*background: -webkit-linear-gradient(top, #ccc, white);*/
	padding: 0.25em;
	float:left;
	width: 100%;
	height: auto;
	/*color: #999;*/
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	transition: all 0.3s linear;
	/*hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;*/
	
}

.wettbewerbfold{
	/*border: 1px solid grey;*/
}



.unfolder { display: none; }

.toggle-label {
	width:100%;
	display: inline-block;
	cursor: pointer;
	font-size: 1.2em;
	border-radius: 5px;
	font-size:1.375em;
 	line-height:1.375em;
 	font-weight:100;
	font-style:normal;
 	color:#005e87;
 	padding:.25em 0;
}

/*does not work
.toggle-label:visited {
	color: purple;
}

.toggle-label:hover > * {
	font-size: 1.5em;
}*/
.unfold-icon, .fold-icon {
  color: #999;
  /* fixed width to stop the icon from wiggling*/
  width: 10px;
  margin-right: 0.5em;
  display: inline-block;

}
.unfold-icon:hover .fold-icon:hover {
	font-weight: bold;
}


.unfolder ~ .fold {
  display: none;
}
.unfolder ~ label .fold-icon {
  display: none;
}

.unfolder:checked ~ .fold {
  display: block;
}
.unfolder:checked ~ label .fold-icon {
  display: inline-block;
}
.unfolder:checked ~ label .unfold-icon {
  display: none;
}

.zuklappen{
	display:inline;
	float:right;
	font-style:italic;
	z-index:1;
	cursor:pointer;
	font-weight: bold;
}

.anchor{
	position: absolute;
	padding-top: 4em;
}



.wettbewerb{
	background: #F5F5F5;
	padding: 0.25em 0.5em 0.25em 0.5em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	text-align: left;
	vertical-align: middle;
	/*width:25%;*/
}

.card p{
	float:right;
	padding-right: 2em;
	top: 20em;
}


 .arrow {
 	/*display: block;*/
 	/*position: relative;*/
 	/*float: right;*/
 	/*text-align:right;*/
 	/*line-height: 20px;*/
 	/*display: flex;*/
  	/*align-items: center;*/
  	/*justify-content: center;*/
  	padding-right: 2em;
  	padding-bottom: 0.25em;
	border: 8px solid #444;
	font-size:0;
	/*line-height:0;*/
	/*height:0;*/
	/*padding:0;*/
	/*margin-top:auto;*/
	/*padding-left: 20em;*/
	/*left: 20em;*/
	/*margin-bottom: auto;*/
}
 .arrow.down {
	border-right-color:  transparent;
	border-bottom-color: transparent;
	border-left-color:   transparent;
}
.arrow.up {
	border-top-color:    transparent;
	border-right-color:  transparent;
	border-left-color:   transparent;
}
.arrow.left {
	border-top-color:    transparent;
	border-bottom-color: transparent;
	border-left-color:   transparent;
}
.arrow.right {
	border-top-color:    transparent;
	border-right-color:  transparent;
	border-bottom-color: transparent;
}
/*

.collapse{
	display:none;
	overflow:auto;
	padding-left: 1em;
	width:100%;

}*/
/*.collapse.in{display:block}*/

#navigation234  {
 margin:0 0 0em 0em;
 text-align:left;
 list-style-type:none;
 border-width:.125em 0 ;
 border-color:#dee9f3 ;
 border-style:solid;
 display:block;
 padding-top:1px;
 padding-bottom:1px;
 overflow:auto;
}

#navigation234 li {
	margin:0;
 display:block;
 list-style-type:none;}

#navigation234 li.hi a,
#navigation234 ul li.hi a {
 background:#fff;
}


#navigation234 a,
#navigation234 a:link,
#navigation234 a:visited {
 padding: 0 0 0 1.5em ;
 font-size:.875em;
 font-weight:800;
 line-height:2em;
 color:#8393a0;
 text-decoration:none;
 display:block;
 width:auto;
 background:#dee9f3;
 border-bottom:1px solid white;
 border-top:0px solid white;
}

#navigation234 li ul li a,
#navigation234 li ul li a:link,
#navigation234 li ul li a:visited {
 padding-left:2.25em;
 font-weight:100;
 background:#fff;
 color:#8393a0;
}

#navigation234 li ul li ul li a,
#navigation234 li ul li ul li a:link,
#navigation234 li ul li ul li a:visited {
 padding-left:3.5em;
 font-weight:100;
 font-size:.75em;
 background:#fff;
}

#navigation234 a:hover,
#navigation234 a:active {
 color:#000;
 /* das bg laesst im ie6 die spalte collabieren */
 background:#d0e0f0 url(images/nav_2ndlevel_hover.gif) .25em center no-repeat;

}

#navigation234 li ul li a:hover,
#navigation234 li ul li a:active,
#navigation234 li ul li ul li a:hover,
#navigation234 li ul li ul li a:active {
 color:#234;
 /* das bg laesst im ie6 die spalte collabieren */
 background: url(images/nav_2ndlevel_hover.gif) .25em center no-repeat;
}

#navigation234 li.hi a {
 color:#005e87;
 background:#fff;
}

#navigation234 li a.hi,
#navigation234 li a:hover.hi,
#navigation234 li a:active.hi,
#navigation234 li ul li a.hi,
#navigation234 li ul li a:hover.hi,
#navigation234 li ul li a:active.hi,
#navigation234 li ul li ul li a.hi,
#navigation234 li ul li ul li a:hover.hi,
#navigation234 li ul li ul li a:active.hi  {
 color:#000;
 text-decoration:none;
 background:#fff url(images/nav_2ndlevel_hi.gif) .25em center no-repeat !important ;
}
/*
*/



#jahrePacken  {
 margin:0 0 3em 0em;
 text-align:left;
 list-style-type:none;
 border-width:.125em 0 ;
 border-color:#dee9f3 ;
 border-style:solid;
 display:block;
 padding-top:1px;
 overflow:auto;
}

#jahrePacken li {
 display:block;
 list-style-type:none;}

#jahrePacken li.hi a,
#jahrePacken ul li.hi a {
 background:#fff;
}


#jahrePacken a,
#jahrePacken a:link,
#jahrePacken a:visited {
 padding: 0 0 0 1.5em ;
 font-size:.875em;
 font-weight:800;
 line-height:1.25em;
 color:#8393a0;
 text-decoration:none;
 display:block;
 width:auto;
 background:#dee9f3;
 border-bottom:1px solid white;
 border-top:0px solid white;
}

#jahrePacken li a,
#jahrePacken li a:link,
#jahrePacken li a:visited {
 padding-left:2.25em;
 font-weight:100;
 background:#fff;
 color:#8393a0;
}




#jahrePacken li a:hover,
#jahrePacken li a:active{
 color:#234;
 /* das bg laesst im ie6 die spalte collabieren */
 /*background: url(images/nav_2ndlevel_hover.gif) .25em center no-repeat;*/
 text-decoration: underline;
}

#jahrePacken li.hi a {
 color:#005e87;
 background:#fff;
}

#jahrePacken li a.hi,
#jahrePacken li a:hover.hi,
#jahrePacken li a:active.hi
 {
 color:#000;
 text-decoration:none;
 font-weight: bold;
 text-decoration: underline;
 /*background:#fff url(images/nav_2ndlevel_hi.gif) .25em center no-repeat !important ;*/
}

/*-------------------------------------------------------------------
--- WETTBEWERB ---
-------------------------------------------------------------------*/



/*-------------------------------------------------------------------
--- BUTTON - JETZT anmelden ---
-------------------------------------------------------------------*/
.anmelden {
width:15em;
height:3em;
overflow:hidden;
position:relative;
margin:0 auto;
}

.anmelden a,
.anmelden a:link,
.anmelden a:visited {
display:block;
height:3em;
}

.anmelden a:hover {
margin-left:-15em;
}

.anmelden a:active {
margin-left:-30em;
}

.anmelden a img {
border:none;
height:3em;
width:45em;
}



/*-------------------------------------------------------------------
--- TEASER ---
-------------------------------------------------------------------*/
.teaser {
 position:relative; /*fuer ie6 damit hinterguende und farben nicht verschwinden*/
 border:0 double #637380;
 margin:0 0 1em 0;
 padding: 0 0 0 0;
 border:.25em solid #637380;
 background:#fff;
 line-height:0;
}

.teaser p{ background:#fff;}
.teaser img{ width:100%;}
.teaser h1, .teaser p {margin:0; padding:.25em; font-size:.875em; font-weight:100; line-height:1.5em; text-align:center; background:#637380;}
.teaser p {color:#000; background:#fff;}
.teaser h1 {color:#c3d3e0;}
.teaser h1 a {color:#c3d3e0 !important; display:block; text-decoration:none;}
.teaser h1 a:hover {color:#fff !important; display:block; text-decoration:underline;}
.teaser p a{ font-size:1em !important;}

#col3 .teaser {
 margin:1em 0 0 0em;
}

/*-------------------------------------------------------------------
Aufgabe
----------------------------------------------------------------*/
  @font-face {
    font-family: "Computer Modern1";
    src: url('Schriftarten/cmunss.otf') format("opentype");
  }
/*  @font-face {
    font-family: "Computer Modern";
    src: url('Schriftarten//cmunsx.otf');
    font-weight: bold;
  }
  @font-face {
    font-family: "Computer Modern";
    src: url('Schriftarten/cmunsi.otf');
    font-style: italic, oblique;
  }
  @font-face {
    font-family: "Computer Modern";
    src: url('Schriftarten//cmunbxo.otf');
    font-weight: bold;
    font-style: italic, oblique;
  }*/


#beispielaufgabe{
	border: 1px solid;
	padding: 0.5em 0.5em 0.5em 0.5em;
	font-family: "Computer Modern1";
	font-size: 1.2em;
	/*font-weight: bold;*/
	text-align:left;
	width:98%;
	overflow:auto;
}


#beispielaufgabe h1 {
 font-size:1.375em;
 line-height:1.375em;
 font-weight:100;
 font-style:normal;
 color: #900;/*057 900*/
 padding:.25em 0;
}

.answer{
	min-width:80px;
	max-height: 5%;
	width:19%;
	margin-right:0.25%;
	text-align:center;
}

#jahrUndStufe{
	font-size:0.75em;
	float:right;
	font-style:italic;
	display:block;
}

#answers{
	text-align: center;
}
@media screen and (min-width: 750px){
	#col1r .answer{
		margin: 0;
		min-height: 1.5em;
		width:100%;
		font-size: 1em;

	}
}


@media only screen and (max-width: 750px) {
  .answer{
  		font-size: 1em;
  	}
  }


@media only screen and (max-width: 500px) {
  .answer{
  		width:48%;
  		font-size: 1.275em;
  		margin:0.05em 1% ;
  		min-height: 1em;

  	}
  }


/*--------------------------------------------------------------------
Erklärbox
------------------------------------------------------------------*/
#col1r{
	float:right;
	width: 25%;
	padding-right: 1.0em;
	text-align:right;
	border-left: .125em dotted silver;
}

#col2r{
	float:right;
	width: 75%;
	padding: 0 1em 0 1em;
}







.box{
	display:inline-block;
	width:90%;
	border-color: #F29400 ;
	border-style: solid;
	border-width: 4px;
	border-radius: 20px;
	padding: 0 0.5em 0 0.5em;
	margin: 0.5em 0em 0.5em 0em;
	min-height: 100%;
}

.box h2{
	color: #F29400;
	text-align:center;
	font-size: 26px;
	font-weight: bold;
	margin:0;
	padding:0;
}

.box p{
	text-align: center;
	margin:0;
	padding:0;
}

@media only screen and (max-width: 750px) {
  #col1r { 
  	width:100%;
  	display: inline-block;
  	text-align: center;
  	padding:0 0.25em 0 0.25em;
  	/*margin: 0 0.5em 0 1.5em;*/
  	/*margin-left: 1.5em;*/
  	border:none;
  }

  .box{
  	width: 30%;
  	padding:0;
  	margin:0 0.25em 0.5em 0;

  }
  #col2r{
	float:right;
	width: 100%;
	padding: 0 1em 0 1em;
	}
}

@media only screen and (max-width: 750px) {
  .column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}


@media only screen and (max-width: 500px){
	.box{
		width:48%; 
	}

	.box h2{
		font-size: 20px;
	}
	.box p{
		font-size: 0.875em;
	}
}

#aufgabe{
	width:100%;
	margin-bottom: 0.5em;
	display:inline-block;
}
#loesung{
	margin: 0.5em 0;
	width:100%;
	display:none;
}



/*-------------------------------------------------------------------
--- TABLES ---
-------------------------------------------------------------------*/
 table {
 	margin-top: 1em;
	border-width:1px 0 0 1px;
	border-color:#789;
	border-style:solid;
	font-size:.875em;
	width:100%;
	text-align:center;
	max-width:800px;
}
table td tbody, table td tbody tr , table td tbody tr td {
margin:0;
padding:0;
}

table td{
border-width:0 1px 1px 0 ;
border-color:#abc;
border-style:solid;
padding:.25em;
}







.smallTab{
	max-width:800px;
}

@media only screen and (max-width:400px){
	.smallTab{
		font-size:0.65em;
	}
}

#wettbewerbTab{
	width:95%;
}

@media only screen and (min-width:510px){
	#wettbewerbTab{
		width:65%;
	}
}

#preisgrenzenTab{
	width:95%;
}

@media only screen and (min-width:510px){
	#preisgrenzenTab{
		width:75%;
	}
}

/*.alteAufgaben td{
	display:none;
	color:green;
}*/
.alteAufgaben{
	display:none;
	color:green;
}
.lowOpacity{
	opacity:0.3;
}
/*-------------------------------------------------------------------
--- INFO E-MAIL ODER TELEFON ---
-------------------------------------------------------------------*/
.info {
 background: #F1AD1A;
 padding:.25em .75em .5em .75em;
 border-top:1px solid #ccc;
 border-bottom:1px solid #999;
}
.info p {
 text-align:center;
 color:#fff;
}
.info p a {
 font-size:1em;
 color:white;
}
.info p a:hover {
 font-size:1em;
 color:#036;
}


/*-------------------------------------------------------------------
--- MEHR-LINK ---
-------------------------------------------------------------------*/
a.mehr {display:block;}
a.mehr:before {content:"È ";}






/*-------------------------------------------------------------------
---------------------------------------------------------------------
--- START - B I L D - I N T E G R A T I O N  ---
---------------------------------------------------------------------
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
--- moodpicture CONTENT KOPF ---
-------------------------------------------------------------------*/
.moodpicture {
 /*background: url(images/verlauf_txtbox.jpg)left bottom repeat-x;*/
 display:block;
 margin-bottom:1em;
 border-top:.125em solid #abc;
 border-bottom:.125em solid #abc;
  width:100%;
  float:left;
}

.moodpicture a img{
	width: 100%;
}

/*-------------------------------------------------------------------
--- baupicture CONTENT KOPF ---
-------------------------------------------------------------------*/
.baupicture {
 /*background: url(images/verlauf_txtbox.jpg)left bottom repeat-x;*/
 display:block;
 margin-bottom:1em;
 border-top:0em solid #abc;
 border-bottom:0em solid #abc;
  width:100%;
  float:left;
}

.baupicture img {
 width:100%;
 max-width:800px;
}


/*-------------------------------------------------------------------
--- bbaupicture CONTENT KOPF ---
-------------------------------------------------------------------*/
.bbaupicture {
 /*background: url(images/verlauf_txtbox.jpg)left bottom repeat-x;*/
 display:block;
 border-top:0em solid #abc;
 border-bottom:0em solid #abc;
 width:75%;
 margin-right: 0.25em;
margin: 0 auto;
}

.bbaupicture img {
 width:100%;/*100%*/
 margin:.125em 1em .5em 0;
 padding:.25em;
 background:#abc;
}

@media only screen and (max-width:750px) {
  .bbaupicture{
  	width:98%;
  }
}



/*-------------------------------------------------------------------
--- mmmpicture ---
-------------------------------------------------------------------*/
.mmmpicture {
 /*background: url(images/verlauf_txtbox.jpg)left bottom repeat-x;*/
 display:block;
/* margin-bottom:1em;*/
/* border-top:.125em solid #abc;*/
/* border-bottom:.125em solid #abc;*/
  width:42em;float:left;}

.mmmpicture img {
 width:42em;/*100%*/
}

/*-------------------------------------------------------------------
--- TEXT BILD BOXES
-------------------------------------------------------------------*/
.imgboxleft, .miniimgboxright, .miniiimgboxright, .miniiiiimgboxright, .miniimgboxrightohne, .imgboxright, .textbox  {
overflow:hidden; /* Overflow-Methode zum Clearen der Float-Umgebungen */
margin:0 0 1em 0;
line-height:1.5em;
/*font-size: .875em;*/
  width:100%;
float:left; /* nur so collabieren die div container im ie7 nicht*/
}

.minuemgboxleft {
overflow:hidden; /* Overflow-Methode zum Clearen der Float-Umgebungen */
margin:0 0 1em 0;
line-height:1.5em;
/*font-size: .875em;*/
  width:26em;
float:left; /* nur so collabieren die div container im ie7 nicht*/
}



.imgboxright img, .imgboxleft img{width:17.875em;} /*achtung ie boxmodel width:17.625em + padding .25em*/
.imgboxleft figure {width:20em;}

/*.imgboxright p, .imgboxleft p {font-size: .875em;} achtung ie boxmodel width:17.625em + padding .25em*/
.miniimgboxright img {width:9.875em;}
.miniiimgboxright img {width:11.400em;}
.miniiiiimgboxright img {width:8em;}
.minuemgboxleft img {width:10em;}
.miniimgboxrightohne img {width:9.875em;}


.imgboxrightFloat {
	/*border:solid 1px;*/
	float:right;
}
/*-------------------------------------------------------------------
--- TEXT ONLY BOX  -
-------------------------------------------------------------------*/
.textbox .text {
margin:0 .5em;
position:relative;
display:block;
}
/*-------------------------------------------------------------------
--- TEXT BILD BOX IMAGE F L O A T - L E F T -
-------------------------------------------------------------------*/
.imgboxleft img, .imgboxleft figure {
float:left;
margin:.125em 1em .5em 0;
padding:.25em;
/*background:#abc;*/
display:block;
}
.imgboxleft .text {
margin-left:12.5em;
}

/*-------------------------------------------------------------------
--- TEXT BILD BOX IMAGE F L O A T - R I G H T -
-------------------------------------------------------------------*/
.imgboxright img {
float:right;
margin:.125em 0 .5em 1em;
padding:.25em;
/*background:#abc;*/
background:#fff;
display:block;
}
.imgboxright .text {
margin-right:12em;
padding-left:.5em;
}

/*-------------------------------------------------------------------
--- TEXT BILD BOX IMAGE F L O A T - R I G H T - EXTRASCHMAL
-------------------------------------------------------------------*/
.miniiiiimgboxright img {
float:right;
margin:.125em 0 .5em 1em;
padding:.25em;
/*background:#abc;*/
background:#fff;
display:block;
}
.imgboxright .text {
margin-right:8em;
padding-left:.5em;
}


/*-------------------------------------------------------------------
--- TEXT BILD BOX IMAGE F L O A T - L E F T - EXTRASCHMAL
-------------------------------------------------------------------*/
.minuemgboxleft img {
float:left;
margin:.75em 1em 1.5em 0em;
padding:.25em;
/*background:#abc;*/
background:#fff;
display:block;
}
.imgboxleft .text {
margin-left:8em;
}

@media only screen and (max-width:500px){
	.imgboxleft img, .imgboxright img {
		margin:0;
		padding:0;
		width:100%;
	}
	.imgboxright img{
		float:left;
	}
}
/*-------------------------------------------------------------------
--- BILD BOX  fuer 3 MINI-IMAGE F L O A T - R I G H T -
-------------------------------------------------------------------*/
.miniiimgboxright img {
float:right;
margin:.125em 1em .5em 1em;
padding:.25em;
background:#fff;
display:block;
}
.imgboxright .text {
margin-right:12em;
padding-left:.5em;
}

/*-------------------------------------------------------------------
--- TEXT BILD BOX MINI-IMAGE F L O A T - R I G H T -
-------------------------------------------------------------------*/
.miniimgboxright img {
float:right;
margin:.125em 0 .5em 1em;
padding:.25em;
background:#fff;
display:block;
}
.imgboxright .text {
margin-right:12em;
padding-left:.5em;
}

@media only screen and (max-width:450px){
  .miniimgboxright img {
    margin:0;
    padding:0;
    width:100%;
  }
  .miniimgboxright img{
    float:left;
  }
}

/*-------------------------------------------------------------------
--- TEXT BILD BOX MINI-IMAGE F L O A T - R I G H T - OHNE RAND
-------------------------------------------------------------------*/
.miniimgboxrightohne img {
float:right;
margin:.125em 0 .5em 1em;
padding:.0em;
background:#abc;
display:block;
}
.imgboxright .text {
margin-right:12em;
padding-left:.5em;
}


/*--------------------------------------------------------------------
 Galerie für T-Shirts und PfA'S
 --------------------------------------------------------------------*/




.vorschau1 {
	width:100px;
	float:left;
}


.vorschau1 img{
	padding: 0;
	margin: 0;
	width: 100%;
	opacity:0.6;
	/* Bild passt sich an verfügbaren Raum im li ann */
}

.vorschau1 h3 {
  	color: white;
  	font-size: 16px;
	position: relative; 
   	bottom: 30px; 
   	text-align:center; 
   	}
.vorschau1 h3 span{
	background-color: #637380;
	
}
.vorschau1 img:hover{
	opacity: 1;
	background: #09c;
}

.galerie a {
	padding: 0.1em;
}

.galerie a:focus, .galerie a:hover {
	
}

.opacity-off img{
	opacity :1;
}

.text p.bildserie {
font-size:1em;
}

.bildserie {
	overflow:hidden;
	width:100%;
	margin-right:-1em;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	text-align: center;
	float:left;
}
.bildserie figure {
	/*float:left;*/
	display:inline-block;
	width:23%;
	z-index:9;
}

.broschuere figure{
	position: relative;

}

.impressionen figure{
	width: 48%;
	hyphens: none;
}

@media only screen and (max-width:600px) {
  .bildserie figure{
  	width:98%;
  }
}

.buecher figure {
	width:23%;
}

@media only screen and (max-width:780px) {
  .buecher figure{
  	width:46%;
  }
}

@media only screen and (max-width:420px) {
  .buecher figure{
  	width:97%;
  }
}


.broschuere figure {
	width:23%;
}

@media only screen and (max-width:780px) {
  .broschuere figure{
  	width:15%;
  	padding:0;
  	margin:0 0 1.5em 0;
  }
  .broschuereButton{
  	margin-bottom:0.125em;
  	width:100%;
	line-height:1em; 
	left:0em;
  }
  .b38{
  	bottom:1em;
  }
  .b713{
  	bottom:-1em;
  }
}

@media only screen and (max-width:420px) {
  .buecher figure{
  	width:23%;
  }
}

#datchPanorama img{
	width:48%;
}
.bildserie figure img{
	position: relative;

}

.tl{
	transform-origin:top left;
}

.tr{
	transform-origin: top right;
}

.bl{
	transform-origin:bottom left;
}

.br{
	transform-origin: bottom right;
}
@media only screen and (min-width: 1000px){
	.camps figure img:hover{
	  backface-visibility: hidden;    
		z-index:9;
	  -webkit-transform: scale(1.8);
	  -moz-transform: scale(1.8);
	  -o-transform: scale(1.8);
	  transform: scale(1.8);
	  /*transform: translateZ(0);*/
	  transition: all 0.3s;
	  -webkit-transition: all 0.3s;
	  /*transform-style: preserve-3d;*/
	}
}	

.buecher figure img:hover{

} 


/*.bildbeschreibung{
	width:24%;
	padding-left:1em;
	float:left;
}*/



figure{
	min-width:150px;
	font-style: italic;
  	font-size: smaller;
  	text-align:center;
  	border: thin silver solid;
  	margin: 0.25em;
  	padding: 0.5em;
}

figure img{
	width:100% !important; 
}




/*-------------------------------------------------------------------
--- FUSS / Allgemein ---
-------------------------------------------------------------------*/




/*-------------------------------------------------------------------
--- E-Mail-Formular ---
--- ACHTUNG - AENDERUNGEN AN DIESEN AUSZEICHNUNG BITTE NUR SEHR
--- GEWISSENHAFT DURCHFUEHREN. DIE ABSTAENDE, VORALLEM DER SUBMITBUTTONS
--- VARIIERT VON BROWSER ZU BROWSER.
--- DIESE LOESUNG FUNKTIONIERT IM OPERA FF SAFARI (MACOSX / PC) SOWIE IE6 IE7
-------------------------------------------------------------------*/
form {
/*margin: 1em 0;*/
font-size: 1em;
font-family:'Lucida Grande', Tahoma, Georgia, sans-serif;
}

label {
	float:left;
	/*width:10em;*/
	line-height:1.625em;
	font-size: .875em;
	display:block;
	margin:0;
	padding:0;
}

input, select, textarea {
margin:0 0 1em 10em;
padding:.125em;
font-size: .875em;
display:block;
border:1px solid #999;
font-family:inherit;
}

textarea {height:10em;}


/*-------------------------------------------------------------------
--- spalten ---

#seite definiert den inhaltsbereich ohne header und footer #seite umschliesst die content-spalten

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

#seiteweiss { 
	height:auto; 
	width:auto; 
	margin:1em 0 0 0em;
}
#seite {
	/*background-color:#fff;*/
 	/*position:relative;  wegen ie6 boxmodell*/
	margin:1em 0 0 0; 
	padding:0; 
	width:100%; 
	/*height:auto;*/
	color:#000;
	/*clear:both;*/
}


#seite #col1 {
	float: left;
	width:66.66%;
	/*border-right: .125em dotted silver;*/
}

#seite #col1_75 {
	float: left;
	width:75%;
	/*border-right: .125em dotted silver;*/
}




#col1_inhalt{
	/*margin-top: 1em;*/
	padding: 0em 0.75em 0 0.75em;
	border-right: .125em dotted silver;
	overflow: auto;
}



#col3 {
	float:right;
	width:33.33%;
	min-height:100%;
}

#col3_25 {
	float:right;
	width:25%;
	min-height:100%;
}

#col3_inhalt{
	/*position:fixed;*/
	/*position: fixed;*/
	/*margin-top: 1em;*/
	padding: 0em 1em 0 1em;
	/*margin-left: 5em; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
	/*margin-right: 5em; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
}

#ganzeSeite{
	width:100%;
	float:left;
	position: relative;
	padding: 0 1em 1em 1em;
}

/*----------------------------------------------------------------
Seitenmenü
------------------------------------------------------------------------*/
#sidenav{
	/*width:20%;*/
	/*position:fixed;*/
	z-index: 1;
	top:0;
	overflow-x: hidden;
	/*padding-top: 100px;*/
	/*left: 75%;*/
	
}



/*-------------------------------------------------------------------
--- Bildleiste (katipel quicknavi) ---
-------------------------------------------------------------------*/

#footer {
	display: flex;
  	align-items: center;
  	text-align:center;
 	clear: both;

 	padding:0;
 	width:100%;
 	height:8em;
 	background:transparent url(images/fuss_bogen.gif); 
 	background-size: 150% 100%;
 	bottom:0;
 	width:100%;

	vertical-align: middle;
}

#footer ul {
	margin:0;
	bottom:0em;
	display:inline-block;
	list-style-type:none;
	position:absolute;
	text-align:center;
	padding: 0 1em 0 1em;
}

#footer ul li{
	margin:0.25em 0 0.25em;
}

#footer a:link, #footer a:visited {
 text-decoration : none;
 color :#369; /*  */
 text-decoration : underline;
}
#footer a:hover, #footer a:active {
 text-decoration : underline;
 color :#012; /*  */
}


@media only screen and (max-width: 700px) {
  #footer{
  	background: #CBDAE1 !important;
  	height: 10em;
  	background-color: #CBDAE1;
  }

  #footer div{
  	padding: 1em 0 3em;
  }
}


  


/*-------------------------------------------------------------------
--- FUSS / TEXT-LINKS ---
-------------------------------------------------------------------*/

#footer a{
	height: 48px;
}

#footer li{
	margin-top: 1em ;
	display: inline-block;
	float:left;
	left:-1px;
	height:48px;
	
	border-right: 1px solid #abc;
}

#footer #footer-top  {
	/*display:block;*/
	/*top:0em;*/
	width: 3em;
	/*padding:0 1em 0 1em;*/
	position:relative;
	overflow:hidden;
	border-left: 1px solid #abc;
}


#footer #footer-top img{
	height: 3em;
}

#footer #footer-top a:hover {
margin-left:-3em;
}

#footer #footer-top a:active {
margin-left:-6em;
}

#footer .footer-other  {

border-right: 1px solid #abc;
/*float:left;*/
list-style-type:none;
position:relative;
/*text-align:left;*/
font-size: 20px;
/*padding: .5em 0;*/
}



#footer .footer-other a,
#footer .footer-other a:link,
#footer .footer-other a:visited {
	display: flex;
  	align-items: center;
  	/*justify-content: center;*/
	/*display:block;*/
	/*margin: auto;*/
	padding: 1em 1em ;
	/*font-size:.75em;*/
}

@media only screen and (max-width: 380px) {
  #footer .footer-other{
  	font-size: 16px;
  }
}


/*-------------------------------------------------------------------
--- FUSS / TOP / TELLAFRIEND ---
-------------------------------------------------------------------
/*

#footer .banner img {width:100%; margin-top:.5em; }
#footer .banner {}

#footer h3{
color:#333333;
font-size:0.625em;
font-weight:100;
line-height:1.5em;
padding:3em 0pt 1em 2.5em;
}


#footer ul#bm {
position:relative;
float:left;
width:2em;
margin:0;
}
#footer ul#bm li {
float:left;
width:2em;
height:2em;
overflow:hidden;
position:relative;
}





#footer ul#bm li a,
#footer ul#bm li a:hover,
#footer ul#bm li a:link{
display:block;
height:2em;
width:2em;
}

#footer ul#bm li a:hover{
margin-left:-2em;
}
#footer ul#bm li a:active{
margin-left:-4em;
}

#footer ul#bm li a img {height:2em;}



#footer a, #footer h1 {
 display:block;
 }

#footer h1 {
 float:left;
 display:block;
 width:12em;
 background-image:url(images/footer_pipe.gif);
 background-repeat:no-repeat;
 font-size:.75em;
 font-weight:100;
 color:#999;
 padding:.75em 0 2em 4em;
 }*/


/*Vimeo-Einbindung*/
.responsive-video{
	position: relative;
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 

}


.responsive-video iframe,
.responsive-video object-fit,
.responsive-video embed {
	 position: absolute;
	 top: 0;
	 left: 0; 
	 width: 100%; 
	 height: 100%;
}

#video figure{
	/*box-sizing: content-box;*/
	width: 30%;
	vertical-align: top;
	min-width:50px;
}

@media only screen and (max-width: 500px) {
	#video figure{
		/*box-sizing: content-box;*/
		width: 30%;
		margin: 0 0.125em 0 0.125em;
	}
}	


/* ######################################################################################################
** ### Markupfreie CSS-Floatclearing-Loesungen ###########################################################
** ######################################################################################################
*/

/* Clearfix-Methode zum Clearen der Float-Umgebungen */
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}

/* Diese Angabe benoetigt der Safari-Browser zwingend !! */
.clearfix { display:block; } 

/* Overflow-Methode zum Clearen der Float-Umgebungen */
.floatbox { overflow:hidden; }

/* IE-Clearing: Benoetigt nur der Internet Explorer und ueber iehacks.css zugeschaltet */
#ie_clearing { display:none; }



.green{
	/*background:green;*/
	color:green;
}

.red{
	/*background:red;*/
	color:#900;
}

.bigger{
	font-size: 24px;
}


.sticky {
	position:fixed;
	top:0;
	/*bottom: !important;*/
}


/*International Map*/


	.country{
		color:white;
	}

  .names {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
  }

   /* Tooltip CSS 
    .d3-tip {
    line-height: 1.5;
    font-weight: 400;
    font-family:"avenir next", Arial, sans-serif;
    padding: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #FFA500;
    border-radius: 1px;
    pointer-events: none;
    }

    /* Creates a small triangle extender for the tooltip 
    .d3-tip:after {      
      box-sizing: border-box;
      display: inline;
      font-size: 8px;
      width: 100%;
      line-height: 1.5;
      color: rgba(0, 0, 0, 0.6);
      position: absolute;
      pointer-events: none;
      
    }

    /* Northward tooltips 
    .d3-tip.n:after {
      content: "\25BC";
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
      text-align: center;
    }

    /* Eastward tooltips 
    .d3-tip.e:after {
      content: "\25C0";
      margin: -4px 0 0 0;
      top: 50%;
      left: -8px;
    }

    /* Southward tooltips 
    .d3-tip.s:after {
      content: "\25B2";
      margin: 0 0 1px 0;
      top: -8px;
      left: 0;
      text-align: center;
    }

    /* Westward tooltips 
    .d3-tip.w:after {
      content: "\25B6";
      margin: -4px 0 0 -1px;
      top: 50%;
      left: 100%;
    }

/*    text{
      pointer-events:none;
    }*/

#container{
	overflow:hidden;
}

.toolTip{
	position: absolute;
	top: 400px;
	left:20px;
	/*right:0px;*/
	max-width:25%;
	/*z-index:1;*/
	/*background-color: red;*/
	display:none;
    line-height: 1.5;
    font-weight: 400;
    font-family:"avenir next", Arial, sans-serif;
    padding: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #FFA500;
    border-radius: 1px;
    pointer-events: none;
    z-index:999;
    /*overflow:auto;*/
}

@media only screen and (max-width: 850px) {
	.toolTip{
		position:relative;
		top:0px;
		left:0;
		max-width:100%;
	}

}

.details{
	color:white;
}

p.bildserie img{
	width:47%;
}


@media only screen and (max-width: 600px){
	#seite #col1_75{
		width:100%;
	}
	#seite #col1_75 #col1_inhalt{
		border-right:none;
	}
	#col3_25{
		width:100%;
	}
	#jahrePacken li {
		float:left;

		display:inline;
		list-style-type: none;
	}
}


.hyphenate{
	display:flex;
	hyphens:auto;
	-ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
}




/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-top: 10px;
}

/* Hide the images by default */
.mySlides {
	overflow: auto;
}

.mySlides img{
	float:left;
	margin-left: 10%;
	width:60%;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #637380;
  font-weight: bolder;
  font-size: 28px;
  font-stretch: ultra-expanded;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.caption {
  /*float:left;*/
  margin-right:30px;
  width:20%;
}

#captionyear{
	font-size: 1.2em;
}

#captionname{
	font-size: 1.5em;
	color:#005e87;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
	position: relative;
	margin-left: 2px;
  	float: left;
  	width: 9%;
}
.column img{
	width:100%;
	border:1px solid #ddd;
	border-radius: 4px;
	padding:5px;
}
.column div{
	position: absolute;
	bottom:10%;
	width:100%;
	background-color: grey;
	color:white;
	text-align: center;
	z-index:5;
	display:none;
}

.column:hover > div{
	display:block;
}

.column img:hover{
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}


@media screen and (max-width: 900px) {
	.mySlides img{
		margin-left: 10%;
		width:80%;
	}


	.caption{
		width:100%;
		float:left;
		/*margin-left*/

	}
	.row{
		display:none;	
	}
	.prev, .next{
		padding-right: 5px;
		padding-left: 5px;
	}

}





@media only screen and (max-width: 750px) {
	.nurDesktop{
		display:none !important;
	}
}

@media only screen and (min-width: 750px) {
	.nurMobile{
		display:none !important;
	}
}

#neuesJahr{
	display:none;
}

.neuesJahr{
  display:none;
}



.oj-puzzle{
  max-width:470px;
  box-sizing: content-box;
}