/* 
Theme Name:		 CODE - Twenty Seventeen Child
Theme URI:		 http://code.arnoldbodeschule.de/
Description:	 CODE - Fachschulen für Wirtschaft
Author:			 Norman Seeliger
Author URI:		 http://code.arnoldbodeschule.de
Template:		 twentyseventeen
Version:		 1.0.0
Text Domain:	 Twenty-Seventeen-child
-------------------------------------------------------------- */ 



/*NunitoSans_7pt-Bold.ttf
NunitoSans_7pt-Light.ttf
NunitoSans_7pt-Medium.ttf
NunitoSans_7pt_Condensed-Medium.ttf
NunitoSans_7pt_Condensed-Bold.ttf
NunitoSans_7pt_Condensed-Light.ttf
*/

@font-face {
  font-family: 'Nunito';
/*  src: url('fonts/RocGroteskW05-ExtraBold.woff2') format('woff2');*/
  src: url('fonts/NunitoSans_7pt_Condensed-Light.ttf') format('truetype');  
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
/*  src: url('fonts/NunitoSans_7pt-Medium.ttf') format('truetype');*/
   src: url('fonts/NunitoSans_7pt_Condensed-Medium.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/NunitoSans_7pt_Condensed-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

:root {
	--hmkb_red : #de2d37;
}

html {
	font-size: 16px;
	background-color: #999;	
	font-weight: 300;
}

html,
body,
button,
input,
select,
textarea {
	font-family: 'Nunito';
}

#adminmenu .menu-top,
h1, 
h2, 
h3,
table th,
button.accordion,
button.btn,
label,
.resp-tab-item,
a {
	font-family: 'Nunito';
	font-weight: bold;
}

h1.entry-title {
	font-size: 3.3rem;
	transform: translateY(-1.42rem);
}

#smartpaper_version,
.hide_screen {
	display: none
}

#post_info_zone .ghost button {
	margin-top: 0;
}

#wp-admin-bar-search {
	display: none!important;
}



/* - */
/* Typo und links
------------------------------------------ */


.pdf_download_wrapper {
  transition: all 0.3s ease;  /* oder nach Wunsch anpassen */
}

.pdf_download_wrapper.working {
  pointer-events: none; 
  filter: grayscale(100%);
}

/* Spinner-Overlay */
.pdf_download_wrapper.working::after {
  content: "";
  position: absolute;
  bottom: -3rem;
  left: 50%;
  width: 1.8rem;
  height: 1.8rem;
  margin: -1em 0 0 -1em;
  border: 0.42rem solid var(--hmkb_blue_light);
  border-top-color: var( --hmkb_blue );
  border-radius: 50%;
  animation: spinner_pdf 0.6s linear infinite;
  z-index: 10;                /* oberhalb des Inhalts */
  pointer-events: none;       /* Spinner selbst auch nicht klickbar */
}

/* Keyframes für die Rotation */
@keyframes spinner_pdf {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}





.arnold_avatar,
.avatar {
	display: none!important;
}


.page-id-700 .absolut_number {
	display: none;
}

.page-id-700 .hide_print {
	display: none;
}

.page-id-700 .hide_print.show_screen {
	display: block
}

#page header h1 {

	font-size: 3rem;
	margin: 0 auto;	
	font-weight: normal;
	color: #fff;
	line-height: 3rem;
	z-index: 9999999;
	padding-top: 1rem;
	max-width: 1400px;
	padding-left: 2rem;
/*	text-shadow: 0 0 1rem rgba(0,0,10,0.15)*/
}

header h1 .outline {
	display: inline-block;
	letter-spacing: 2px;
	font-size: 4rem;
/*	color: #bbb;*/
	font-weight: 600;
	line-height: 4rem;
	color: hsl(215,90%,82%);
  text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;	
}

.outline #smart_part {
	color: hsl(160,90%,82%);
}

h1 .entry-title {
	display: inline-block;
	color: #000;
	font-family: 'RocGrotesk';
}


h2 {
	font-size: 4rem;
	margin-top: 3rem;
}


#page .site-content-contain {
	padding-top: 4rem
}


#page .tabcontent {
	padding-top: 4rem
}


#page a, #page a:hover  {
	text-shadow: none!important;
	box-shadow: none!important;
	text-decoration: none;
	font-weight: bold;
}

#page a:link {
	color: #58585a
}


#page .swiper-button-next, 
#page .swiper-button-prev {
	top: 2rem;
}


#page .swiper-pagination {
	top: -0.5rem;
	height: 2rem;
	

}



.site-main {
  display: flex;
  flex-direction: column;
  padding-bottom: 15vh;
}


.button .small {
	font-weight: normal;
	font-size: 11px;
}

.big_button {
	order: 1;
	margin-bottom: 1rem;
	background-color: transparent!important;
	margin-right: 1rem;
}

.big_button svg {
	fill: #fff;
	height: 2rem;
	width: auto;

}

.big_button.no_scale svg {
	fill: #fff;
	transform: scale( 1 );
}

.accordion-container {
	order: 2;
}

.kompetenzraster .swiper-container {
	
}



.printmode .swiper-pagination-bullet .type {
	display: none;
}



.page .panel-content .entry-title {
	font-size: 1.75rem;
	text-transform: none;
	letter-spacing: 0;
	color: #770000;
	/*width: 12ch;*/
	text-align: right;
	margin-top: 0;
}


.navigation-top a:link {
	color: #58585A;
}

#page a:hover {
	color: #770000;
	cursor: pointer;
}

.active a:link,
.active a:visited {
	color: #770000!important;
}

#page a:active {
	color: #770000;
	cursor: pointer;
}


.red_rect {
	display: inline-block;
	width: 0.2rem;
	height: 0.8rem;
	background-color: #990000;
	margin: 0 0.15rem;
}

.red {
	color: #900;
}

.site-footer {
    position: sticky;
    bottom: 0;
    background: #eee;
    border-top: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 0 1rem rgba(0,0,0,0.5);
}

@supports ( backdrop-filter: none ) {
.site-footer {
		background: rgba(230,230,228,0.66);
		backdrop-filter: blur(3rem) saturate(7);
	}
}




.first-p {
	border-left: 1rem solid #770000;
  	padding-left: 1rem;
  	margin-left: -2rem;
  	font-weight: bold;
  	color: #58585A;
  	max-width: 38ch;
}

.swiper-text {
	font-weight: normal;
}

#page .swiper-text-container {
	padding: 1rem 2rem 1.5rem 2rem;
	position: absolute;
	bottom: 0;
	background-color: rgba(255,255,255,0.92)
}

#page .swiper-text-container h3 {
	font-size: 1rem;
	margin-top: 0;
	padding-top: 0;
}

#page .swiper-title {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: 1.08rem;
	font-weight: bold;
	color: #111;
}

#page .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: hsl(100,100%,42%);
}

#page .swiper-pagination-bullet {
	background-color: #999;
	margin: 0 5ch;
	
}

#page .swiper-container {
	height: 76vh;
	box-shadow: 0 1rem 2rem rgba(0,0,0,0.25)
}


#page .competence_slide .swiper-container {
	height: auto;
	box-shadow: none;
}


.form_save_status {
/*	position: absolute;
	top: 0;
	left: 0;*/
	width: 2rem;
	height: 2rem;
}



.competence .check_row {
	width: 1.5rem;
	height: 1.5rem;
	animation: come_in 0.5s ease-out;
	animation-fill-mode: forwards;
}

@keyframes come_in {
	0%		{ opacity: 0; fill: hsla( 100, 100%, 40%, 1 ), transform: scale(1.1);	}
	100%	{ transform: translateY(0.45rem); opacity: 1; fill: hsla( 100, 0%, 60%, 1 ) ; }
}

@keyframes plop_in {
	0%		{ opacity: 0; transform: scale(1.5); fill: hsla( 100, 100%, 40%, 1 )	}
	100%	{ transform: scale(1); opacity: 1; fill: hsla( 100, 0%, 60%, 1 ) ; }
}

.saving {
	animation: saving 0.28s ease-in;
	animation-fill-mode: forwards;
}

@keyframes saving {
	0%		{ color: #700;}
	50%		{ transform: scaleY( 1 );}
	100%	{ color: hsl( 100, 100%, 32% ); transform: scaleY( 0 );}
}


.loading_spin {
	animation: loading_spin 1s ease-out;
}

@keyframes loading_spin {
	0% 		{ }
	100%	{ transform: rotate(1turn); }
}


.home .fill_me_pulsing {
	animation: fill_me_pulsing 0.3s infinite alternate;
}

.home .fill_me_pulsing * {
	color: #900!important;
}


.home .float_title.center_align small {
	display: none;
}


.swiper-pagination-bullet-active {
	transform: scale( 1.2 );
}



@keyframes fill_me_pulsing {
	0%   { transform: scale(1); }
	100% { transform: scale(1.1);}
}


.form_save_status svg {
	width: 1.75rem;
	height: 1.75rem;
	fill: #aaa;
	transition: all 0.3 ease-out;
	animation: come_in 0.5s ease-out;
	animation-fill-mode: forwards;
}

.form_save_status svg.all_in_cloud {
	transform: translateY( -0.5rem );
	width: 3rem;
	height: 3rem;
	fill: hsl( 100, 100%, 46% );
	animation: plop_in 0.5s ease-out;
}


.schueler_bullet {
	position: relative;
}

.schueler_bullet .name {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0.5rem);
	width: 4rem;
    display: block;
}

.schueler_bullet .type {
	font-weight: bold;
}


#page .kompetenzraster .swiper-container {
	height: auto;
	box-shadow: none;
}


.schueler_bullet.swiper-pagination-bullet {
	opacity: 0.8
}

.swiper-pagination-bullet.schueler_bullet.swiper-pagination-bullet-active {
	opacity: 1;
	font-weight: bold;
}


.competence_loader {
  font-weight: bold;
  color: #070;
/*  animation: competence_loader 0.4s infinite alternate ease-out;*/
}

@keyframes competence_loader {
	0%  {transform: scale(0.2);}
   100% {transform: scale(5.1) translateX( -50%), opacity: 0}
}


#page .swiper-background {
	height: 100%;
	max-width: none;
	width: 100%;
	background-size: cover;
	background-position: center;
}

#page .swiper-text-container::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 1rem 1rem 1rem;
	border-color: transparent transparent rgba(255,255,255,0.92) transparent;
	z-index: 999;
	top: -0.92rem;
	left: calc(50% - 1rem);
}


/*#page ul li {
	list-style-type: square;
}*/



#page .custom-header-media::before {
	background-color: transparent!important;
	background: transparent!important;
}

#page .custom-header {
	height: 100%;
}



.panel-content .wrap {
	padding-top: 0;
}


#page .site-content {
	padding-top: 0
} 


/* - */
/* map
------------------------------------------ */

.hide {
	display: none!important;
}


#map {
	height: 74vh;
}

#map h3.school {
	color: #770000;
	font-size: 1rem;
	font-weight: bold;
	margin-top: 0;
	padding-top: 0;
}

.map-school-logo {
  height: 3rem;
  width: auto;
}


.angebot_liste {
	margin-top: 0;
	margin-left: 0.9rem;
    list-style-type: none;

}

#map a {
	font-weight: bold;
	box-shadow: none;
}

#map a:link,
#map a:visited {
	color: #58585A;
	box-shadow: none;
}

#map a:hover {
	color: #770000;
	box-shadow: none;
}

#map .leaflet-marker-icon {
}

#map .map_label {
	display: inline-block;
	padding: 0.1rem 0.25rem 0.3rem 0.25rem;
	background-color: #fff;
	color: #000;
	font-size: 0.8rem;
	font-weight: bold;
	white-space: nowrap;
	box-shadow: 0 0.33rem 0.8rem 0 rgba(0,0,0,0.4);
	transform: translateX( calc(-50% + 1rem) );
	
}


#map .leaflet-control-layers-overlays label {
	width: 15rem;
	display: inline-block;
}



#map .leaflet-popup-content p {
 margin: 0;
}

.green {
	color: #770000;
}


.right {
	text-align: right;
}


/* - */
/* Tabelle
------------------------------------------ */

table {
	border-collapse: collapse;

}



table td,
table th {
	vertical-align: top;
	border: 0.6rem solid transparent;
	padding-left: 0;
	padding-right: 0;
}



table .green {
	color: #770000;
}




small {
	font-size: 10px;
}




.download_preview {
  margin: 1rem;
  /* padding: 1rem; */
  width: 20rem;
  height: auto;
}

.download_info {



}

/* - */
/* Logo, Header, Menu
------------------------------------------ */

#logo {

  width: 20rem;
  color: #000;
  display: inline-block;
  margin: -1rem 0 0 0;
}

footer .details {
	text-align: right;
	display: block;
    margin-top: -3rem;
}

/*#logo.logo_small {
	width: 20rem;
	position: fixed;
	top: -1rem;
	left: 1vw;
	z-index: 99999;
	height: 14rem;*/
	
.status-publish.hentry {
	display: none;
}

.meta_qm_logo {
  position: absolute;
  width: 15rem;
  margin-left: -10rem;
  margin-top: -7.35rem;
  height: auto;
}



#masthead #herkules_silhouette {
	display: none;
}

#masthead .entry-title {
	  position: absolute;
  left: 40rem;
  top: 9rem;
  font-size: 2rem;
}

#metaqm_logo_container {
	margin-left: 23rem;
	transform: scale(0.8);
	transform-origin: left;
}

.home #metaqm_logo_container {
	transform: scale(1.20) translateY(1%);
	margin-left: 24rem;
}

/*.meta_qm_logo .group {
	animation: pulse 1s alternate infinite ease-in-out;
}*/

.meta_qm_logo .level { animation: level 0.7s alternate infinite cubic-bezier(1.000, 0.010, 0.215, 1.050);  }

@keyframes pulse {
	0% 		{ transform: scale(0.98) translateX(1%) }
	100% 	{ transform: scale(1.02) translateX(-1%); }
}


@keyframes level {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(-5rem) scale(1.12) translateX(-6%); }
}


.meta_qm_logo .block { animation: block  0.7s alternate infinite cubic-bezier(1.000, 0.010, 0.215, 1.050);  }

@keyframes block {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(1.25rem); }
}


.meta_qm_logo .color_change { animation: color_change 5.6s alternate infinite ease-in-out;  }

@keyframes color_change {
	0% 		{ fill: hsl(200,100%,70%); }
	33% 	{ fill: hsl(170,100%,70%); }
	66% 	{ fill: hsl(140,100%,70%); }
	100% 	{ fill: hsl(100,100%,70%); }
}


.meta_qm_logo .question-mark, .question-mark-sign { animation: color_change_ 5.6s alternate infinite ease-in-out;  }

@keyframes color_change_ {
	0% 		{ fill: hsl(200,100%,90%); }
	33% 	{ fill: hsl(170,100%,90%); }
	66% 	{ fill: hsl(140,100%,90%); }
	100% 	{ fill: hsl(100,100%,90%); }
}

.level-2 {
  background-color: ;
}

.level-3 {
  background-color: ;
}

.level-4 {
  background-color: ;
}



#logo svg {
	 width: 100%;
	height: auto;
	/*padding: 1rem 1rem 0.5rem 1rem;*/
}


#logo.logo_small svg {
	background-color: transparent;
}

.admin-bar #logo.logo_small {
	top: 0rem;
}



#gmta_logo.logo_small .swoop_tiny, 
#gmta_logo.logo_small .swoop_tiny_wide,
#gmta_logo.logo_small .shimmer {
	display: none;
}




.jp-carousel-overlay::after {
	content: url('img/gmta_logo_black.svg');
	position: fixed;
	top: 2vh;
	left: 2vw;
	z-index: 1;
}


#page .site-header {
	height: auto;
	box-shadow: 0 0 2rem rgba(0,0,0,0.42);
	z-index: 999;
	display: inline-block;
	background-color: #fff;
}

#hessen_logo {
	margin: 2rem;
	width: auto;
	height: 8rem;
	min-height: unset;
	min-width: unset;
	object-fit: unset;
}

#smartpaper_logo {
	position: absolute;
  z-index: 99;
/*  margin-left: 10rem;*/
  height: 8rem;
  margin-left: 3rem;
/*  transform: translateX(-50%);*/
  margin-top: 2rem;
  width: auto;
}

.custom-header-media {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-color: #fff;
}


#page .site-description,
#page .site-title {
	display: none;
}

#page .site-branding-text {
	padding-bottom: 2rem
}

#hessen_square_branding {
	position: absolute;
	margin-top: 4rem;
}

#hessen_square_branding > div {
	width: 2rem;
	height: 2rem;
	background-color: var(--hmkb_red);
	margin-bottom: 2rem;
}

.navigation-top.site-navigation-fixed {
	animation: shadow 0.6s ease-in-out;
	animation-fill-mode: forwards;
	z-index: 9999;
}


.navigation-top .wrap {
	margin-left: 24rem;
}


.navigation-top .nav-logo {
	display: none;
	width: 11rem;
	top: 0;
	left: -12rem;
	z-index: 99999;
}

.navigation-top.site-navigation-fixed .nav-logo {
	display: block;
}


.navigation-top {
	border: none;
}


.panel-content .wrap {
	margin-left: 2rem;
}




/*.panel li {
	margin-left: 2rem;
	max-width: 44ch;
}*/



.margin_bottom {
	margin-bottom: 1rem
}








/* - */
/* Bilder
------------------------------------------ */
.accordion:hover, 
.accordion.active:hover,
.active .accordion {
	color: #000;
	background-color: hsl(123,90%,90%); 
}


.print_student_button_container label {
	font-weight: bold;
}



.print_student_button_container input {
	margin-left: 2rem;
}


#main select {
	max-width: 40ch;
}


/*#main label {
	font-weight: normal;
	transition: background-color 0.2s ease-out;
} 

#main label:hover {
	background: hsl( 100, 20%, 84% )
}


#main input:checked + label {
	font-weight: bold;
	background: hsl( 100, 100%, 94% );
} 
*/


dt[data-accordion-schueler-id] {
	display: flex;
	justify-content: space-between;
}


dt[data-accordion-schueler-id] .right.print_student_button_container {
	float: none;
}


#question_container {
	transition: all 0.6s ease-out;
	opacity: 0;
}

#question_container.filled {
	opacity: 1;
}




/* - */
/* Bilder
------------------------------------------ */

.tiled-gallery-item img {
	width: 100%!important;
	height: auto!important;
}



/* - */
/* Animationen
------------------------------------------ */

@keyframes shadow {
0%		{box-shadow: 0 1rem 2rem rgba(0,0,0,0);}
100% 	{box-shadow: 0 1rem 2rem rgba(0,0,0,0.25);}
}



/* - */
/* Auswertung
------------------------------------------ */

.auswertung-content {
	margin-bottom: 8rem
}


.auswertung thead tr {
	background-color: #555;
}

.auswertung thead th, 
.auswertung .id {
	color: #bbb;
	text-align: center;
	transition: background-color 0.5s, color 0.33s;
	border-bottom: 1px solid #000;
	background-color: #555;
	font-size: 12px;
}


.auswertung thead th.number {
	width: 6rem;
}

.auswertung thead th.id,
.auswertung thead th.arithmetik {
	width: 4rem;
}


.auswertung thead th.id {
	padding: 0
}


.auswertung .question {
	font-size: 12px;
}


.auswertung .compare {
	background-color: #555;
	border-bottom: 1px solid #000;
	font-weight: bold;
}



.auswertung.select_field {
	max-width: 60ch;
}

.auswertung.select_field th,
.auswertung.select_field td {
	text-align: left;
	padding: 0.5rem;
}


.compare.good {
	color: hsl(100,100%,70%);
}


.compare.bad {
	color: hsl(200,100%,70%);
}

.auswertung thead th:hover,
.auswertung tbody tr:hover .id,
.auswertung .active .id,
.auswertung thead th.sorting_asc,
.auswertung thead th.sorting_desc {
	background-color: #000;
	color: #fff;
}

.auswertung tbody tr:hover .question,
.auswertung tbody .active .question {
	background-color: #ddd;
}

.auswertung thead th.level-1:hover,
.auswertung thead th.level-1.sorting_asc,
.auswertung thead th.level-1.sorting_desc {
	color: hsl(200,100%,70%);
}

.auswertung thead th.level-2:hover,
.auswertung thead th.level-2.sorting_asc,
.auswertung thead th.level-2.sorting_desc {
	color: hsl(170,100%,70%);
}

.auswertung thead th.level-3:hover,
.auswertung thead th.level-3.sorting_asc,
.auswertung thead th.level-3.sorting_desc {
	color: hsl(140,100%,70%);
}

.auswertung thead th.level-4:hover,
.auswertung thead th.level-4.sorting_asc,
.auswertung thead th.level-4.sorting_desc {
	color: hsl(100,100%,70%);
}


.auswertung {
	border: 1px solid #000;
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2), 0 1rem 4rem rgba(0,0,0,0.2);

}


.auswertung td, th {
	border: none;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	text-align: center;

}

.auswertung tr {
	border-bottom: 1px solid #555;
}

.auswertung thead .left,
.auswertung tbody .left {
	text-align: left;
	border-right: 1px solid #000;
	border-left: 1px solid #000
}


.charts {
	position: relative;
}

.charts cite {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 2.5rem;
	max-width: 32ch;
	font-style: normal;
	font-weight: bold;
	margin-left: 1ch;
	text-indent: -1ch;
	padding-top: 0;
	
}

.charts canvas {
	bottom: 0;
	position: absolute;
	height: 100%;
}

.charts .left {
	float: left;
	width: 60%;
	position: relative;
}

.charts .right {
	float: right;
	width: 39%;
	position: relative;
}

.charts>div {
	height: 500px;
}

.level-1 {
  background-color: hsl(200,100%,70%);
}

.level-2 {
  background-color: hsl(170,100%,70%);
}

.level-3 {
  background-color: hsl(140,100%,70%);
}

.level-4 {
  background-color: hsl(100,100%,70%);
}




.chart-container2 {
	display: none;
}




.ordinalskala .level-1,
.ordinalskala .level-2,
.ordinalskala .level-3,
.ordinalskala .level-4 {
	background-color: transparent;
}


.ari_mittel {
	font-weight: bold;
}


.max4 {
  font-weight: bold;
  color: rgba(0,0,0,0.95);
}


.max3 {
  font-weight: bold;
  color: rgba(0,0,0,0.8);
}

.max2 {
  color: rgba(0,0,0,0.7);
}

.max1 {
  color: rgba(0,0,0,0.6);
}

.max0 {
  color: rgba(0,0,0,0.5);
}

.level-kam.max1 {
  background-color: hsla(200,0%,50%,0.15);
}

.level-kam.max2 {
  background-color: hsla(200,0%,50%,0.3);
}

.level-kam.max3 {
  background-color: hsla(200,0%,50%,0.6);
}

.level-kam.max4 {
  background-color: hsla(200,0%,50%,0.8);
}

.level-1.max1 {
  background-color: hsla(200,100%,70%,0.15);
}

.level-1.max2 {
  background-color: hsla(200,100%,70%,0.3);
}

.level-1.max3 {
  background-color: hsla(200,100%,70%,0.6);
}

.level-1.max4 {
  background-color: hsla(200,100%,70%,0.8);
}

.level-2.max1 {
  background-color: hsla(170,100%,70%,0.15);
}

.level-2.max2 {
  background-color: hsla(170,100%,70%,0.3);
}

.level-2.max3 {
  background-color: hsla(170,100%,70%,0.6);
}

.level-2.max4 {
  background-color: hsla(170,100%,70%,0.8);
}

.level-3.max1 {
  background-color: hsla(140,100%,70%,0.15);
}

.level-3.max2 {
  background-color: hsla(140,100%,70%,0.3);
}

.level-3.max3 {
  background-color: hsla(140,100%,70%,0.6);
}

.level-3.max4 {
  background-color: hsla(140,100%,70%,0.8);
}

.level-4.max1 {
  background-color: hsla(100,100%,70%,0.15);
}

.level-4.max2 {
  background-color: hsla(100,100%,70%,0.3);
}

.level-4.max3 {
  background-color: hsla(100,100%,70%,0.6);
}

.level-4.max4 {
  background-color: hsla(100,100%,70%,0.8);
}


.max0  {
	background-color: transparent!important;
}



/* - */
/* Poll
------------------------------------------ */

/*.poll button[type="submit"] {
	margin-top: 2rem;
}
*/


button, .button {
	background-color: #555
}

button:hover, .button:hover {
	background-color: #000
}


button.button[disabled=''],
button.button[disabled='']:hover {
	background-color: #aaa;
	pointer-events: none;
}


.tan button.button {
	position: relative
}


.tan button.button[disabled='']::after {
	content: '';
	position: absolute;
	bottom: -1.9rem;
	left: 50%;
	transform: translateX( 50% );
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 2rem 2rem 0 2rem;
	border-color: #aaa transparent transparent transparent;
}


#tan_input {
	width: 14ch;
	margin-bottom: 1rem;
}

#tan_input[disabled=''] {
	background-color: hsl(100,100%,70%)
}


.clearfix::after {
	content: '.';
	clear: both;
	height: 0;
	display: block;
	color: transparent;
}


.poll .question_box, .poll select {
	margin-bottom: 3rem;
}


.poll .question_box {

}


h3.left {
	max-width: 64%;
	font-size: 1.33rem;
	border-left: 2rem solid hsl(100,100%,70%);
	padding-left: 2rem;
	margin-left: -4rem;
	margin-bottom: 2rem;
}


.poll .question_box .left {
	float: left;
	width: 60%
	
}

.poll .question_box .right{
	float: right;
	width: 34%
}

.poll .ordinalskala {
	text-align: left;
}

.poll .ordinalskala span {
	display: block;
}

.poll .ordinalskala span label {
	display: inline-block;
}

.poll .ordinalskala input:checked + label {
	font-weight: bold;
}

.poll .ordinalskala input {
	font-size: 2rem;
	transition: all 0.5s
}


.lazy_message,
.lazy_container {
	color: red;
}

.lazy_container {
	margin-top: 0.5rem;
	font-size: 11px;
	display: block;
}


.home .lazy_container {
	display: none;
}

.home .printmode .swiper-pagination-bullet .type {
	display: block
}

.poll .ordinalskala input[type='radio']:after {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        top: -0.8rem;
        left: -0.25rem;
        position: relative;
        background-color: #ddd;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

.poll .ordinalskala input[type='radio']:checked:after {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        top: -0.8rem;
        left: -1px;
        position: relative;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

.poll .ordinalskala .level-4 input[type='radio']:checked:after {
	background-color: hsl(100,100%,70%);
}

.poll .ordinalskala .level-3 input[type='radio']:checked:after {
	background-color: hsl(140,100%,70%);
}

.poll .ordinalskala .level-2 input[type='radio']:checked:after {
	background-color: hsl(170,100%,70%);
}

.poll .ordinalskala .level-1 input[type='radio']:checked:after {
	background-color: hsl(200,100%,70%);
}

.poll .ordinalskala .level-kam input[type='radio']:checked:after {
	background-color: hsl(200,0%,50%);
}


.competence caption {
	text-align: left;
	margin-bottom: 0.5rem

}


.competence input[type=radio] {
    border: 0px;
    width: 10%;
    height: 1.5rem;
    display: none;    
}

.competence label, 
.bewertung_percent {
transition: all 0.15s ease-out;}


.competence input[type=radio]:checked + label.judge_it {
	/*border-left: 1rem solid hsl(180,100%,50%);*/
	font-weight: bold; 
	/*padding-left: 0.5rem;*/
}


.bewertung_percent {	
	display: inline-block;
	background-color: rgba(0,0,0,0.0);
	padding-bottom: 0.5rem;
}


.competence input[type=radio]:checked + label.judge_it .bewertung_percent {
/*	background-color: hsl(100,100%,70%);
	padding: 0.5rem;*/
}

.competence input[type=radio]:checked + label.judge_it {
	background-color: hsla( 100, 100%, 50%, 0.33);

}


.competence .bewertung_slides .flex {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch; 
	align-content: center;
	height: 100%;
}

.competence .bewertung_slides .flex label.judge_it:hover {
	background-color: rgba( 5, 20, 10, 0.2 );
}

.page-id-700 .bewertung_percent {
	display: none;
}


.competence label {
	padding: 0.5rem;
	padding-bottom: 0.75rem;
	display: block;
	margin-bottom: 0;
	width: calc( 100% - 1rem )

}


.competence caption small {
	color: #777;
}


.competence .left {
	float: left;
	width: 60%;
	clear: none;
	margin: 0;
	padding:0;

}


.competence .float_title {
	float: left;
	width: calc( 100% / 3 );
	clear: none;
	margin: 0;
	padding:0;
}


.float_title.right_align {
	text-align: right;
}

.float_title.center_align {
	text-align: center;
}

.float_title.left_align {
	text-align: left;	
}


.competence .right {
	float: right;
	width: 30%;
	clear: none;
	margin: 0;
	padding:0;
}

.competence td .left {
	width: 2.5rem
}

.competence td .right {
	/*width: calc( 100% - 2.5rem );*/
	width: 100%;
	float: none;
	text-align: left;
}

.competence th, 
.competence tfoot{
	text-align: left;
	padding: 0.5rem;
	background: #ddd;
	color: #777;
}


.competence table,
.competence th,
.competence td {
	border: 1px solid rgba(0,0,0,0.25);
}


.competence td {
	width: calc( 100% / 6);
	padding: 0;
	line-height: 1rem;
	/*height: 1px;*/

}


.competence tfoot {
	display: none;
}


.competence p {
	line-height: 1rem;
}


.competence tr:nth-of-type(even) {
	background: #f1f1f1;
}

.competence tr:nth-of-type(odd) {
	background: #e6e6e6;
}



.competence .bewertung {
	margin-top: 0.5rem;
}


.competence .save_area {
	vertical-align: bottom;
	text-align: right;
}



.competence .border_bottom {
border-bottom: 1px solid #000;
height: 5rem;
}

/* - */
/* Media Queries
------------------------------------------ */

@media screen and (min-width: 48em) {
	#page .custom-header,
	#page .custom-header-media {
		height: 100%;
	}

.navigation-top {
	font-size: 1rem
}

#page #content .panel-content .entry-header {
	width: 100%;
}

#page #content .panel-content .entry-content {
	width: 61.1%;
}


#page .menu-scroll-down {
	display: none;
}

.wrap {
	max-width: 1400px;
}


}ackground-color: #555
}

button:hover {
	background-color: #000
}


.clearfix::after {
	content: '.';
	clear: both;
	height: 0;
	display: block;
	color: transparent;
}


.poll .question_box, .poll select {
	margin-bottom: 3rem;
}


.poll .question_box {

}


.layer_1 h3.left {
	max-width: 24ch;
}


h3.left,
.manifest h3 {
	/*max-width: 56%;*/
	font-size: 2rem;
	/*border-left: 2rem solid hsl(100,100%,70%);*/
/*	padding-left: 2rem;
	margin-left: -4rem;*/
	margin-bottom: 2rem;
	margin-top: 4rem;
}

.manifestbox h3 {
	font-weight: bold;
	color: #9f6;
}

.auswertung-content .manifest {
	position: absolute;
	top: 5rem;
	right: 2rem;
	animation: fall_in 0.4s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	opacity: 0
}

@keyframes fall_in {
	0%   { transform: translateY(-50vh); }
	100% { transform: translateY(0); opacity: 1 }
}



.auswertung-content h3.left {
	display: none;
}

.poll .question_box .left {
	float: left;
	width: 60%
	
}

.poll .question_box .right{
	float: right;
	width: 34%
}

.poll .ordinalskala {
	text-align: left;
}

.poll .ordinalskala span {
	display: block;
}

.poll .ordinalskala span label {
	display: inline-block;
}

.poll .ordinalskala input:checked + label {
	font-weight: bold;
}

.poll .ordinalskala input {
	font-size: 2rem;
	transition: all 0.5s
}



.poll .ordinalskala input[type='radio']:after {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        top: -0.8rem;
        left: -0.33rem;
        position: relative;
        background-color: #ddd;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

.poll .ordinalskala input[type='radio']:checked:after {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        top: -0.8rem;
        left: -1px;
        position: relative;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

.poll .ordinalskala .level-4 input[type='radio']:checked:after {
	background-color: hsl(100,100%,70%);
}

.poll .ordinalskala .level-3 input[type='radio']:checked:after {
	background-color: hsl(140,100%,70%);
}

.poll .ordinalskala .level-2 input[type='radio']:checked:after {
	background-color: hsl(170,100%,70%);
}

.poll .ordinalskala .level-1 input[type='radio']:checked:after {
	background-color: hsl(200,100%,70%);
}

.poll .ordinalskala .level-kam input[type='radio']:checked:after {
	background-color: hsl(200,0%,50%);
}



.wpcf7-form {
	max-width: 32rem;
	margin: 0 auto;
}

.wpcf7-form h3.left {
	margin-top: 0;
}

.kreuz_img {
	max-width: 600px;
	height: auto;
}

.fullsize {
	max-width: 100%;
}



.auswertungs_select {
	display: inline-block;
	margin: 0 1rem;
}


.auswertungs_select:first-of-type {
	margin-left: 2rem;
}



.entry-content {
	margin-bottom: 4rem;
}


.layer_1 {
	padding: 1rem 2rem 3rem 2rem;
	box-shadow: 0 1rem 4rem 0.5rem rgba(0,0,0,0.3);
	position: relative;
}

.layer_1::after {
    border-width: 2.5rem;
    border-color: transparent;
    border-left-color: #9f6;
    border-top-color: #9f6;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
}

.manifestbox::before {
    border-width: 2.5rem;
    border-color: transparent;
    border-right-color: #fff;
    border-bottom-color: #fff;
    /*content: '';*/
    position: absolute;
    bottom: 0;
    right: 0;
    border-style: solid;
}

.manifestbox.layer_1::after {
  border-left-color: #fff;
    border-top-color: #fff;	
}

.manifestbox.layer_1 {

	margin-top: 4rem;
	box-shadow: none;
	background-color: #555;
	/*max-width: 30rem;*/
}

.manifestbox p {
	margin: 0rem;
/*	font-weight: bold;*/
	color: #fff;
	max-width: 32ch;
}

.auswertung-content.layer_1 {
	padding-top: 3rem;
}


.analyse_poll {
	margin-bottom: 2rem;
	padding-left: 2rem;
}





.site-content {
	background-color: #fff;
}


.site-content-contain {
	background-attachment: fixed;
	background-size: cover;
}


.contact-form form {
  background-color: rgba( 255, 255, 255, 0.96 );
  padding-left: 6rem;
  padding-right: 6rem;
  padding-bottom: 4rem;
  margin-top: 6rem;
  box-shadow: 0 1rem 4rem 0.5rem rgba( 0, 0, 0, 0.5 )
}




.open-source-section {
	background-color: #ddd;
	padding-top: 4rem;
	margin-top: 6rem;
	margin-bottom: 0;
	background-image: url( 'https://meta-qm.arnoldbodeschule.de/wp-content/uploads/2018/02/karo2.png' );
	box-shadow: 0 0 4rem rgba( 0, 0, 0, 0.8 );
}

.open-source-section .entry-content {
	max-width: 56%;
	padding: 2rem 4rem 5rem 4rem;
	background-color: #fff;
}

.site-footer {
	margin-top: 0;
}



.open-source-section p {
  max-width: 46ch
}




.textarea textarea {
	height: 9rem;
}



td.bewertung_slides .teacher4this {
	display: none;
	position: absolute;
	background: #fff;
	font-size: 0.9rem;
	z-index: 99;
	box-shadow: 0 1rem 2rem rgba( 0, 0, 0, 0.4 );
	border-bottom: 1rem solid #192;
}

td.bewertung_slides:hover .teacher4this.content {
	display: block;
	padding: 1rem;
	font-weight: bold;
}


.short_competence_text {
	display: none;
}

.competence_text_full {
	
}

/* - */
/* Media Queries
------------------------------------------ */

@media screen and (min-width: 48em) {
	#page .custom-header,
	#page .custom-header-media {
		height: 100%;
	}

.navigation-top {
	font-size: 1rem
}

#page #content .panel-content .entry-header {
	width: 100%;
}

#page #content .panel-content .entry-content {
	width: 61.1%;
}


#page .menu-scroll-down {
	display: none;
}

.wrap {
	max-width: 1400px;
}


}



.competence_text {

	line-height: 1;

}

.bewertung_slides {
	position: relative;
}

.switch {
  position: absolute;
  display: inline-block;
  width: 8.2rem;
  height: 0.75rem;
  margin-top: 2rem;
  bottom: 1.25rem;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba( 0,0,0,0.25 );
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  text-align: center;
  content: attr(data-percent);
  font-size: 1rem;
  padding-top: 0.25rem;
  height: 1.25rem;
  width: 3.5rem;
  left: 0.5rem;
  bottom: -0.33rem;
  background-color: white;
  transition: all .3s ease-out;
  border: 1px solid #999;
  box-shadow: 0 0.15rem 0.5rem rgba( 0,0,0,0.5 );
}

input:checked + .slider {
  background-color: hsl(100,100%,40%);
}


input:checked + .slider:before {
  transform: translateX(3.5rem);
  background-color: hsl(100,100%,90%);
}

/* Rounded sliders */
.slider.round {
  border-radius: 10%;
 /* border: 1px solid #999;*/
}

.slider.round:before {
  border-radius: 10%;
}



.switch .label {
	position: absolute;
	z-index: 99;
	bottom: 0.5rem;
	right: 0;

}



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


html {
	font-size: 15px;
}


.wrap {
	padding-left: 0.5rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	padding-right: 0.5rem;
}

}


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

	.short_competence_text {
		display: inline;
	}

	.competence_text_full {
		display: none;
	}


	.competence tr td:first-of-type strong {
		font-size: 11px;
	}


}

@media screen and (max-width: 767px) and (orientation: portrait) { 

	html {
		font-size: 14px;
	}

	.meta_qm_logo {
	 right: 0;
	}

	#page .site-header {
		height: 22rem;
	}

	header h1 span {
		font-size: 2rem;
		line-height: 2rem;
	}

	header h1 span:first-of-type {
		line-height: 3rem
	}

.open-source-section .entry-content {
	width: 90%;
	max-width: 90%;
}

	#logo {
  /* right: 0; */
  width: 100%;
  color: #000;
  display: inline-block;
  margin: 0 auto;
  /* float: right; */
	}

	#page .wrap {
		margin-left: 0;
		margin-right: 0;
	}

	#page .auswertungs_select, 
	#page button {
		display: block;
		margin-bottom: 1rem;
		display: block;
		margin-bottom: 1rem;
		margin-left: 0;
	}

.charts .left,
.charts .right {
	width: 100%;
	float: none;
	display: none;
}
	
	.auswertung thead {
	display: none}
	
	
	.auswertung td {
		    display: block;
    width: 100%;
	}
	
	.charts cite {
	position: static}
	
	
	}