/* V2 (20181106) */

/* BASICS */
body
{
	font-family: 'Atkinson Hyperlegible', sans-serif;
	background-color: #fff;
	color: black;
	font-size: 12px;
}

textarea,
input[type=text]
{
	font-family: 'Atkinson Hyperlegible', sans-serif;
	color: black;
	font-size: 12px;
	padding: 5px;
}

div#main
{
	width: 1300px;
	width: 1140px;
	background-color: #fff;
	margin: 40px auto;
}

div#header
{
	height: 110px;

}

div#infointeraktiv
{
	margin-top: 30px !important;
	margin-left: 170px !important;
}

div#footer
{
	margin-top: 130px;
	margin-left: 170px;

}
div#footer a
{
	margin-left: 15px;
}


table
{
	border-collapse: collapse;
}

td
{
	padding: 5px;
}

a
{
	color: black;
	text-decoration: none;
}

.cursoron
{
	cursor: pointer;
}

body
{
	hyphens: auto;
	-webkit-hyphens: auto;
	-webkit-hyphenate-limit-chars: auto 3;
	-webkit-hyphenate-limit-lines: 4;
	-ms-hyphens: auto;
	-ms-hyphenate-limit-chars: auto 3;
	-ms-hyphenate-limit-lines: 4;
}


/* BESTIMMTE ELEMENTE */

#toplinks
{
	position: relative;
	top: -70px;
	text-align: right;
}
#toplinks a
{
	margin-left: 30px;
	color:#4e4e4e;
	text-decoration:none;
}
#toplinks a:hover
{
	text-decoration:underline;
}



#topkompetenzenlink
{
	position: relative;
	top: -50px;
	text-align: right;
}
#bottomkompetenzenlink
{
	margin-top: 30px !important;
	text-align: right;
}
#topkompetenzenlink a,
#bottomkompetenzenlink a
{
	/* color: #00B5E1; */ /* Kontrast */
	color: #003d84;
	font-size: 15px;
}

td#bereichsspalte { padding: 0; vertical-align: top; }
table#bereichstabelle { height: 100%; width: 145px; }
td#bereichsiconaktiv { vertical-align: middle; text-align: center; height: 122px; padding-right: 19px; background-repeat: no-repeat;  background-position: right center;}
td#bereichsiconsrest { vertical-align: top; text-align: right; padding: 0; padding-top: 50px; }
td#bereichsiconsrest img { margin:0; margin-top: 13px; border: 0; }
td#bereichsiconsrest i { display: block; text-align: left; }


/* TEXTE */

.s_kom
{
	color: #000000;
}

strong
{
	color: #000;
	font-weight: bold;
}

.s_kom strong
{
	color: #000;
}

tr.z_niv td /* niveau-überschriften - fragezeichen*/
{
	color: black;
}


/* ZELLENGRÖSSEN */

.s_ber { width: 135px; max-width: 135px; text-align: center; }
.s_ab_ber { width: 16px; }
.s_dim { width: 122px; max-width: 122px; text-align: center; }
.s_ab_dim { width: 5px; }
.s_kom { width: 140px; max-width: 140px; text-align: left; vertical-align: top; }
.s_ab_kom { width: 3px; }
.z_niv { height: 46px; max-height: 46px; }
.z_ab_niv { height: 10px; }
.z_dim { height: 58px; max-height: 58px; } /* 68px wenn verkleinert, 132px wenn groß */
.z_dim_a { height: 122px; } /* 68px wenn verkleinert, 132px wenn groß */ /*  max-height: 122px; */
.z_ab_dim { height: 6px; }
.z_ab_kom, .z_ab_kom td { height: 4px !important; padding:0; }
.leerzelle { padding: 0; border: 0; }

/*
.s_5 { width: 300px !important; max-width: 300px !important; }
.s_2 { width: 70px !important; max-width: 70px !important; }
.s_3 { width: 70px !important; max-width: 70px !important; }
*/
.spalteschmal { width: 70px !important; max-width: 70px !important; }
.spaltebreit { width: 300px !important; max-width: 300px !important; }


/* HINTERGRÜNDE */

.hg_kom_leer { background-color: #fafbf2; }
.hg_kom_2 { background-color: #f7f9e4; }
.hg_kom_3 { background-color: #eff3d0; }
.hg_kom_4 { background-color: #dee69b; }
.hg_kom_5 { background-color: #cfda5c; }
.hg_kom_6 { background-color: #bccf00; }
.hg_kom_a { background-color: #c0c4df; }
.hg_kom_ag { background-color: #FFFFCC; }
.hg_ber { background-color: #848ebe; } /* +icon rechts */
.hg_dim_a { background-color: #848ebe; }
.hg_dim { background-color: # ; }
.hg_pfeil { background-image: url("img/pfeilblau.png"); background-repeat: no-repeat;  background-position: center top; }
.hg_leer { background-color: #fff; }

/* ZELLEN */

/*
#nivheader2 { background-image: url("img/hg2gniveau.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }
#nivheader3 { background-image: url("img/hg3gniveau.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }
#nivheader4 { background-image: url("img/hg4gniveau.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }
#nivheader5 { background-image: url("img/hg5gniveau.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }
#nivheader6 { background-image: url("img/hg6gniveau.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }
*/
#nivheader2 { background-image: url("img/hg2.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }
#nivheader3 { background-image: url("img/hg3.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }
#nivheader4 { background-image: url("img/hg4.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }
#nivheader5 { background-image: url("img/hg5.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }
#nivheader6 { background-image: url("img/hg6.png"); background-repeat: no-repeat;  background-position: right center; vertical-align: bottom; }


hr.kom_trennung { height: 4px; background-color: #fff; border: 0; }


.nachbarneinaus
{
	border: 0;
	border-top: 4px solid #fff;
	border-bottom: 4px solid #fff;
	padding: 3px;
	background-color: #ddd;
	color: #000;
	text-align: center;
}

.pfeilgraur
{
background-image: url("img/pfeilgraur.png");
background-repeat: no-repeat;
background-position: center center;
}

.pfeilgraul
{
background-image: url("img/pfeilgraul.png");
background-repeat: no-repeat;
background-position: center center;
}


/* INFOBOXEN */
.infobox
{
	margin: 0;
	padding: 5px;
	width: 230px;
	height: 160px;
	border: 1px solid #ff9b00;
	background-color: #fff5e5;
	background-image: url("img/inforahmen.png"); background-repeat: no-repeat;  background-position: left bottom;
	position: absolute;
	top: 10px;
	display: none;
}

#infoniveau2 { }
#infoniveau3 { }
#infoniveau4 { }
#infoniveau5 { }
#infoniveau6 { }

/* td { border: 1px dotted grey; } */


/* Checkbox */

input[type=checkbox].css-checkbox 
{
	/* 
	position:absolute;
	z-index:-1000;
	left:-1000px;
	*/
	display: none;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height:1px;
	width:1px;
	margin:-1px;
	padding:0;
	border:0;
}

input[type=checkbox].css-checkbox + label.css-label 
{
	padding-left:15px;
	height:15px; 
	display:inline-block;
	line-height:15px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:13px;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label 
{
	background-position: 0 -15px;
}

label.css-label 
{
	background-image:url(img/checkboxonoff.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* Liste ausgewählter Kompetenzen */

div#listegewaehltekompetenzen
{
	margin-left: 170px;
	font-size: 11px;
}

div#listegewaehltekompetenzen td
{
	color: #444;
}


div#listegewaehltekompetenzen ul
{
	margin: 3px 0 3px 0;
	padding: 0 0 0 20px;
}

div#listegewaehltekompetenzen h2
{
	font-weight: normal;
	margin-bottom: 30px;
}

div#listegewaehltekompetenzen span.bereich
{
	/* color: #00B5E1; */ /* Kontrast */
	color: #003d84;
	margin-right: 10px;
}

div#listegewaehltekompetenzen span.dimension
{
	/* color: #cfda5c; */ /* Kontrast */
	color: #5fb564;
	margin-right: 10px;
}

div#listegewaehltekompetenzen span.niveau
{
	/* color: #bccf00; */ /* Kontrast */
	color: #5fb564;
	margin-right: 10px;
}

div#listegewaehltekompetenzen div.position
{
	margin-top: 30px;
	margin-bottom: 5px;
}


div#listegewaehltekompetenzen div.inhalt
{
	background-color: #c0c4df;
	padding: 5px;
	
}

div#listegewaehltekompetenzen img.gewaehlteschliessen
{
	display:block;
	float:right;
}

div#listegewaehltekompetenzen li
{
	color: #444;
}

div#listegewaehltekompetenzen div.eingabe
{
	background-color: #c0c4df;
	padding: 5px;
	
}

div#listegewaehltekompetenzen div.eingabe textarea,
div#auswahlbuttons table#formeinreichung input
{
	width: 98%;
	background-color: #fff;
	border: 1px solid #ddd;
	font-size: 11px;
}



/* Sonderseiten */


div#home
{
	margin-left: 170px;
	font-size: 15px;
}

div#home div
{
	clear: both;
	margin-bottom: 10px;
}

div#home div.white
{
	margin-bottom: 20px;
}

div#home div.blue
{
	background-color: #c0c4df;
	height: 80px; /* height: 120px; */
}

div#home div.logo
{
	padding: 10px;
	float: left;
	width: 150px;
	text-align: center;
}

div#home div.logo img
{
	width: 60px; /* width: 100px; */
}

div#home div.text
{
	display: inline;
}

div#home div.text span.biggerheadline
{
	font-size: 18px;

}

div.niveaus
{
	margin-top: 20px;
}


div.niveaus table
{
	/* border-spacing: 10px 0px; */
	/* border-collapse: separate; */
}

div.niveaus td
{
	text-align: center;
	vertical-align: top;
	font-size: 11px;
	width: 190px;
	background-repeat: no-repeat;
	background-position: right top; 
	padding-top: 55px;
	padding-bottom: 15px;
}

div.niveaus td#header
{
	background-color: white;
	width: 140px; /* 160px */
	font-size: 11px;
}
div.niveaus td#niveau2
{
	background-color: #f7f9e4;
	background-image: url("img/hg2.png");
}
div.niveaus td#niveau3
{
	background-color: #eff3d0;
	background-image: url("img/hg3.png");

}
div.niveaus td#niveau4
{
	background-color: #dee69b;
	background-image: url("img/hg4.png");

}
div.niveaus td#niveau5
{
	background-color: #cfda5c;
	background-image: url("img/hg5.png");

}
div.niveaus td#niveau6
{
	background-color: #bccf00;
	background-image: url("img/hg6.png");

}
div.niveaus td.abstand
{
	width: 5px !important;
}





div.textseite
{
	margin-left: 170px;
	font-size: 11px;
}

div.textseite h3,
div.textseite h4
{
	margin-top: 40px;
}

div.textseite i
{
	font-style: italic;
	display:block;
	color: #444;
}

div.textseite p,
div.textseite li
{
	/* color: #444; */
	color: #5e5e5e;
}

div.textseite ul
{
	list-style-type: disc;
}

div.textseite ol > li
{
	margin-top: 1em;
}

div.textseite .img-box
{
	margin-top: 50px;
	padding: 0;
}

div.textseite .img-box table.logotabelle 
{
    width: 60%;
}

div.textseite .img-box table.logotabelle td:first-child
{
}
div.textseite .img-box table.logotabelle td 
{
    padding: 0;
    text-align: center;
    vertical-align: middle;
}


div#statistik
{
	margin-top: 40px;
	margin-bottom: 40px;
}

div#statistik tr#head td
{
	vertical-align: top;
	padding-right: 40px;
}

div#statistik tr#data td
{
	font-size: 22px;
}

div#statistik i
{
	font-style: normal;
	/* color: #00B5E1; */ /* Kontrast */
	color: #003d84;
}

div#statistik tr#statistikinfo td
{
	text-align: center;
	padding-top: 15px;
}
div#statistik tr#statistikinfo td a,
a.linkblau
{
	/* color: #00B5E1; */ /* Kontrast */
	color: #003d84;
}

div#auswahlbuttons table#formeinreichung td
{
	margin: 0;
	padding: 0 10px 10px 0;
}

div#auswahlbuttons table#formeinreichung input
{
	width: 500px;
}

div#auswahlbuttons button,
input[type=submit]
{
	background-color: #5d514c;
	color: white;
	padding: 5px 10px;
	margin-right: 50px;
	border: 0;
	cursor: pointer;
}

table#formbuttons td
{
	vertical-align: middle;
	padding-bottom: 20px;
	padding-right: 20px;
}

table#formbuttons td input
{
	width: 100%;
}


div#statistik table.tabledimensionen
{
	margin: 0 50px 0 50px;
}

div#statistik table.tabledimensionen td
{
	text-align: center;
	border: 0;
}


div#statistik tr#data td
{
	text-align: center;
}




td.checkdimniv
{


}

tr.werte
{
	font-weight: bold;
}

tr.balken td
{
	vertical-align: bottom;
	text-align: center;
}


tr.taetige td
{
	color: #666;
}

.taetigetext:after
{
    content: "In der Kinder- und Jugendarbeit Tätige...";
}

.textgrau
{
	color: #444;
}

input#buttonpdf,
input#buttonclip
{
	margin-right: 20px;
}

table#formbuttons
{
	margin-top:40px;
}

#anleitung img
{
	display: block;
	margin: 0 auto 50px auto;
	max-width: 900px;
	border: 1px solid #ccc;
}


div#wasistderkompetenzrahmen h2,
div#niveauspezifischestandards h2,
div#anleitung h2,
div#glossar h2
{
	margin: 0 0 15px;
	color: #000;
	font-size: 30px;
	line-height: 33px;
	font-weight: normal;
}



div#wasistderkompetenzrahmen h3,
div#niveauspezifischestandards h3,
div#anleitung h3,
div#glossar h3
{
	margin: 32px 0 10px;
	color: #000;
	font-size: 11px;
	line-height: 19px;
	font-weight: normal;
}


div#wasistderkompetenzrahmen h4,
div#niveauspezifischestandards h4,
div#anleitung h4,
div#glossar h4
{
	margin: 32px 0 10px;
	color: #000;
	font-weight: normal;
	font-size: 20px;
}



div#wasistderkompetenzrahmen a,
div#niveauspezifischestandards a,
div#anleitung a,
div#glossar a
{
	color: #333;
	outline: none;
	text-decoration: underline;
}
div#wasistderkompetenzrahmen a:hover,
div#niveauspezifischestandards a:hover,
div#anleitung a:hover,
div#glossar a:hover
{
	text-decoration: none;
}

.linkup,
.linkup a
{
	color: #0082a2 !important;
}


 

table.logotabelle a,
table.logotabelle a img
{
    border: none;
    max-width: 100%;
    display: block;
    position: relative;
}

table.logotabelle img,
table.logotabelle a img
{
    border: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    max-width: 100%;
    height: auto;
    image-rendering: optimizeQuality;
}