@charset "UTF-8";
@import url("fonts/stylesheet.css");

body {
	margin: 0;
	overflow: hidden;

	--methodentooltip: 'Methode hinzufügen';
}


/* Bereichsfarben */

:root {
	--farbe-willkommen: #206949;
	--farbe-einstieg: #f1b744;
	--farbe-gruppenarbeit: #f86d22;
	--farbe-pause: #d34a54;
	--farbe-wiederholung: #95366c;
	--farbe-netzwerk: #6c4792;
	--farbe-abschluss: #63b1bc;
	--farbe-feedback: #67aa5e;
}

.infografik_wrapper,
.infografik_wrapper #popups .popup_window,
.infografik_wrapper #popups .popup_window.tippsundeinleitung .popup_content,
#methodencloud_fenster_content {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    
}

.infografik_wrapper::-webkit-scrollbar,
.infografik_wrapper #popups .popup_window::-webkit-scrollbar,
.infografik_wrapper #popups .popup_window.tippsundeinleitung .popup_content::-webkit-scrollbar,
#methodencloud_fenster_content::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
    display: none;
}

img {
	-webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
   -webkit-use©r-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -o-user-select: none !important;
  user-select: none !important;
}



.hintergrund {
    /*height: 1600px;*/
    height:100%;
    background-image: url("bilder/raum_hintergrund_komplett_75prozent1.jpg");
    background-position: top center;
    background-size: contain;
}


a[href],
input[type='submit'],
input[type='image'],
label[for],
select,
button,
.pointer {
  cursor: pointer;
}

ul {
	margin:  2%;
	padding-left: 5%;
	padding-top: 1%;
}

.infografik_wrapper {
	background: transparent;
	background: color(srgb 0.6872 0.7466 0.7676);
  background-size: cover;
  max-width: 100%;
  position: relative;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: scroll;
	overflow-y: hidden;
	box-sizing: border-box;
	padding: 0;
	overscroll-behavior: contain;
}


.infografik_wrapper #backgroundimage {
	width: 100%;
	padding: 0;
	margin: 0;
	height: 100%;
	background-image: url("bilder/hintergrund_dunkelblau.png");
	position: absolute;
	left: 0;
	top: 0;
	background-position: top;
	background-repeat: no-repeat;
	overflow: hidden;
	background-size: contain;
}
.infografik_wrapper #schaltflaechen {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99;
}
.infografik_wrapper #schaltflaechen .button      {
	position: absolute;
	height: auto;
}

.infografik_wrapper #schaltflaechen .button img {
	display: block;
}
.infografik_wrapper #popups .popup_window {
	position: relative;
	vertical-align: middle;
	width: 65%;
	max-height: 100%;
	max-width: 65%;
	background-color: #fff;
	padding: 0;
	z-index: 1003;
	opacity: 1;
	color: #000;
	font-family: Hind;
	font-size: 90%;
	line-height: 1.3;
	text-decoration: none;
	font-style: normal;
	font-weight: 300;
	border-spacing: 0px 0px;
	margin: 0 auto;
	box-sizing: border-box;
	min-width: 50%;
	white-space: normal;
	vertical-align: top;
	border: 4px solid #34383f;
	border-radius: 18px;
	border-left-width: 3px;
	overflow: scroll;
	height: auto;
}



.infografik_wrapper #popups .popup_window.tippsundeinleitung {
  overflow: visible;
}

.infografik_wrapper #popups .popup_window strong {
	font-weight: 600;
}


.infografik_wrapper #popups .popup_window .popup_toolbar {
  width: 100%;
  top: 0;
  height: 10%;
  position: sticky;
  display: inline-flex;
  background: #aaa;
  z-index: 1000;
  padding: 1.3% 2%;
  box-sizing: border-box;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.infografik_wrapper #popups .popup_window .popup_toolbar img {
width: 100%;
}

.infografik_wrapper #popups .popup_window.farbe_willkommen .popup_toolbar {
	background: var(--farbe-willkommen);
}

.infografik_wrapper #popups .popup_window.farbe_einstieg .popup_toolbar {
	background: var(--farbe-einstieg);
}

.infografik_wrapper #popups .popup_window.farbe_gruppenarbeit .popup_toolbar {
	background: var(--farbe-gruppenarbeit);
}

.infografik_wrapper #popups .popup_window.farbe_pause .popup_toolbar {
	background: var(--farbe-pause);
}

.infografik_wrapper #popups .popup_window.farbe_wiederholung .popup_toolbar {
	background: var(--farbe-wiederholung);
}

.infografik_wrapper #popups .popup_window.farbe_netzwerk .popup_toolbar {
	background: var(--farbe-netzwerk);
}

.infografik_wrapper #popups .popup_window.farbe_abschluss .popup_toolbar {
	background: var(--farbe-abschluss);
}

.infografik_wrapper #popups .popup_window.farbe_feedback .popup_toolbar {
	background: var(--farbe-feedback);
}

.infografik_wrapper #popups .popup_window.methodenuebersicht .popup_toolbar {
  padding-top: 2%;
  padding-bottom: 3%;
}
.infografik_wrapper #popups .popup_window .popup_toolbar .button {
  /*! position: absolute; */
  display: inline-flex;
  height: 100%;
  left: 0;
  width: 4%;
  top: 0;
}


.infografik_wrapper #popups .popup_window .popup_toolbar .button.pfeil_zurueck {
  left: 3%;
  margin: auto auto auto 3%;
  transform: translateX(0px);
  transition: .3s ease-in-out;
  position: relative;
}

.infografik_wrapper #popups .popup_window .popup_toolbar .button.pfeil_zurueck:hover {
  transform: translateX(-3px);
}
.infografik_wrapper #popups .popup_window .popup_toolbar .button.hinzufuegen {
	--opacity: 0;  
  margin: auto 2% auto auto;
  width: 4.5%;
  position: relative;
  
}
.infografik_wrapper #popups .popup_window .popup_toolbar .button.hinzufuegen:not(.methode_eingefuegt) img {
  transform: rotate(0);
  transition-timing-function: ease-in-out;
  transition-duration: .4s;
}

.infografik_wrapper #popups .popup_window .popup_toolbar .button.hinzufuegen:not(.methode_eingefuegt):hover img {
  /* transform: rotate(180deg); 
  transition-timing-function: ease-in-out;
  transition-duration: .4s;*/
  animation: tada 1s !important;
	-webkit-animation:  tada 1s !important;
}

.infografik_wrapper #popups .popup_window .popup_toolbar .button.hinzufuegen.methode_eingefuegt img,
.infografik_wrapper #popups .popup_window .methoden_bereich .button .methode_hinzufuegen img.methode_eingefuegt,
.infografik_wrapper #sidebar_links .methode_einzeln .sidebar_content .accordion_title img.methode_eingefuegt {
	animation: heartBeat 1s !important;
	-webkit-animation:  heartBeat 1s !important;
}
.infografik_wrapper #popups .popup_window .popup_toolbar .button.hinzufuegen.methode_eingefuegt:hover img,
.infografik_wrapper #popups .popup_window .methoden_bereich .button .methode_hinzufuegen img.methode_eingefuegt:hover,
.infografik_wrapper #sidebar_links .methode_einzeln .sidebar_content .accordion_title img.methode_eingefuegt:hover {
	transform: rotate(0deg);
	transition-duration: .2s !important;
}


.infografik_wrapper #popups .popup_window .popup_toolbar .button.popup_schliessen {
 
  width: 3.5%;
  margin: auto 1% auto auto;
}

.infografik_wrapper #popups .popup_window.methodenuebersicht .popup_toolbar .button.popup_schliessen {
 
  margin: 0% 1% auto auto;
}

.infografik_wrapper #popups .popup_window .popup_toolbar .popup_icon_gross {
  position: absolute;
  width: 17%;
  left: -7%;
  top: -64%;
  z-index: 1005;
}

.infografik_wrapper #popups .popup_window .popup_content {
	width: auto;
	padding: 0 5%;
	height: auto;
}

.infografik_wrapper #popups .popup_window.tippsundeinleitung .popup_content {
  padding: 4% 5%;
  max-height: calc(var(--font-size) * 24);
	overflow: scroll;
}

#popups .popup_window.tippsundeinleitung .popup_content p {
  color: #000;
}


.popup_content .accordion.ui-accordion.ui-widget {
  margin-bottom: 5%;
  height: 100%;
  opacity: .80;
}

.infografik_wrapper #popups .popup_window .accordion .accordion_title {
	background: #aaa;
	color: #fff;
	border: none;
	border-radius: 5px;
	font-weight: 500;
	line-height: 1.1;
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	letter-spacing: 0.1px;
}


.infografik_wrapper #popups .popup_window.farbe_willkommen .accordion .accordion_title {
	background: var(--farbe-willkommen);
}
.infografik_wrapper #popups .popup_window.farbe_einstieg .accordion .accordion_title {
	background: var(--farbe-einstieg);
}
.infografik_wrapper #popups .popup_window.farbe_gruppenarbeit .accordion .accordion_title {
	background: var(--farbe-gruppenarbeit);
}
.infografik_wrapper #popups .popup_window.farbe_pause .accordion .accordion_title {
	background: var(--farbe-pause);
}
.infografik_wrapper #popups .popup_window.farbe_wiederholung .accordion .accordion_title {
	background: var(--farbe-wiederholung);
}
.infografik_wrapper #popups .popup_window.farbe_netzwerk .accordion .accordion_title {
	background: var(--farbe-netzwerk);
}
.infografik_wrapper #popups .popup_window.farbe_abschluss .accordion .accordion_title {
	background: var(--farbe-abschluss);
}
.infografik_wrapper #popups .popup_window.farbe_feedback .accordion .accordion_title {
	background: var(--farbe-feedback);
}

.infografik_wrapper #popups .popup_window.tippsundeinleitung .accordion .accordion_title .ausklapptitel {
  position: absolute;
  margin-left: 5%;
}

.infografik_wrapper #popups .popup_window.tippsundeinleitung .accordion .accordion_title{
	padding-top: 3%;
	padding-bottom: 3%;
	padding-left: 0%;
}
.infografik_wrapper #popups .popup_window .accordion .accordion_title:hover {
  opacity: 0.93;
}

.infografik_wrapper #popups .popup_window .accordion .ui-accordion-header {
	margin-top: 1.2%;
	min-height: 4.4%;
	padding: 1.3% 3%;
}


.infografik_wrapper #popups .popup_window .accordion .accordion_title img {
	width: 3%;
	margin-right: 2%;
}

.infografik_wrapper #popups .popup_window .accordion .accordion_title.accordion_kurzbeschreibung img {
  width: 4%;
}
.infografik_wrapper #popups .popup_window .accordion .accordion_title.accordion_ablauf img {
  width: 3.6%;
}
.infografik_wrapper #popups .popup_window .accordion .accordion_title.accordion_vorbereitung img {
  width: 3.8%;
}
.infografik_wrapper #popups .popup_window .accordion .accordion_title.accordion_tipps img {
  width: 4%;
}
.infografik_wrapper #popups .popup_window .accordion .accordion_title.accordion_variationen img {
  width: 3.4%;
  padding: 0.61% 0;
}


.infografik_wrapper #popups .popup_window .accordion .accordion_title .ausklapptitel {
  position: absolute;
  margin-left: 6%;
}


.ui-widget-content p.kurzbeschreibung_bold {
  font-weight: 600;
}
.popup_content .ui-accordion .ui-accordion-content {
  padding: 3% 4%;
}
.infografik_wrapper #popups .popup_window .accordion .ui-accordion-header.ui-state-active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ui-accordion .ui-accordion-content.ui-accordion-content-active {
  margin-top: 1.2%;
}


.popup_content .ui-accordion-header-icon.ui-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-top: -.25em;
  position: absolute;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  right: 3%;
  margin: auto;
}

.methoden_eigenschaften {
  display: flex;
  flex-direction: row;
  margin-top: 5%;
}

.methoden_eigenschaften .eigenschaft_dauer, .methoden_eigenschaften .eigenschaft_personen {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  font-size: 90%;
  line-height: 1.2;
  flex-basis: 50%;
  font-weight: 500;
  color: #2d2c2c;
}

.methoden_eigenschaften .eigenschaft_dauer img, .methoden_eigenschaften .eigenschaft_personen img {
  width: 15%;
  margin-right: 6%;
}

.infografik_wrapper #popups .popup_window > span {
	margin-bottom: 3%;
	position: relative;
	display: block;
	padding-right: 0%;
}

.infografik_wrapper #popups > *  {
	display: none;
}

.infografik_wrapper #popups #popup_background {
	width: 100vw;
	position: fixed;
	height: 100vh;
	background-color: rgba(0,0,0,0.65);
	z-index: 999;
	display: none;
	top: 0;
	left: 0;
	overflow: visible;
}

.infografik_wrapper #popups .popup_window h2 {
	text-align: center;
	font-family: "Hind";
	font-size: 150%;
	letter-spacing: 0.3px;
	text-transform: none;
	text-decoration: none;
	color: #FFFFFF;
	font-style: normal;
	margin: auto auto auto 1%;
	line-height: 1;
	font-weight: 600;
	padding-top: 0.6%;
	position: relative;
}

.infografik_wrapper #popups .popup_window.tippsundeinleitung h2 {
  margin-left: auto;
  margin-right: 0;
  padding-left: 3%;
}



.infografik_wrapper #popups .popup_window h3 {
	font-family: 'Hind';
	font-size: 125%;
	line-height: 1.3;
	text-decoration: none;
	font-style: normal;
	font-weight: 400;
	color: #033C66;
	margin: 2%;
	text-align: center;
	color: #5c5c5c;
}

.infografik_wrapper #popups .popup_window h4 {
	font-family: "Hind";
	font-size: 100%;
	line-height: 1.1;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.8px;
	color: #033C66;
	font-style: normal;
	margin: 0;
	text-align: left;
}

.infografik_wrapper #popups .popup_window h5 {
	font-family: 'Hind';
	font-size: 145%;
	line-height: 1.1;
	text-decoration: none;
	font-style: normal;
	font-weight: 600;
	color: #033C66;
	margin: 1%;
	text-align: center;
	padding-bottom: 2%
}



.infografik_wrapper #popups {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	margin-top: 0%;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	
	top: 0;
	white-space:nowrap;
	padding: 0 4%;
	box-sizing: border-box;
	
	z-index: 1000;
}
.shakehover:not(:focus):hover {
	-webkit-animation: headShake 1s infinite !important;
    animation: headShake 1s infinite !important;
	
}
.button:focus {
	outline: none;
}

.dauerpulsieren {
	-webkit-animation: pulse 2s infinite;
	animation: pulse 2s infinite;
}


.infografik_wrapper #infografik-titel {
	position: absolute;
	width: 70%;
	height: auto;
	left: 2%;
	top: 6.5%;
	z-index: 99;
	display: block;

}


.infografik_wrapper #infografik-titel h1 {
	font-family: 'Hind';
	color: #0F5498;
	text-transform: none;
	/* font-size: 20px; */
	text-align: left;
	letter-spacing: 1.1px;
	font-weight: 700;
	margin: 0;
	line-height: 1;
}

.infografik_wrapper .hintergrund {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	background-color: rgba(0,84,150,.07);
overflow: hidden;
}



#popups .bearbeitung {
	display: inline-block;
}


.pulsehover:hover {
	animation: pulse .6s;
	-webkit-animiation: pulse .6s;
}


.popup_content .ui-widget-content, .popup_content .ui-widget {
	font-family: 'Hind', Helvetica, Arial, sans-serif;
}


.ui-widget-content {
  border: 0 !important;
  background: #f1b7441f !important;
  color: #000 !important;
  font-weight: 400;
}

.farbe_willkommen .ui-widget-content {
	background: #2069490f !important;
}

.farbe_einstieg .ui-widget-content {
	background: #f1b74430 !important;
}

.farbe_gruppenarbeit .ui-widget-content {
	background: #f86d2224 !important;
}

.farbe_pause .ui-widget-content {
	background: #d34a5424 !important;
}

.farbe_wiederholung .ui-widget-content {
	background: #95366c1a !important;
}

.farbe_netzwerk .ui-widget-content {
	background: #6c479224 !important;
}

.farbe_abschluss .ui-widget-content {
	background: #569ca621 !important;
}

.farbe_feedback .ui-widget-content {
	background: #67aa5e29 !important;
}


.ui-widget-content p, .ui-widget-content ul, .ui-widget-content ol {
  margin: 1% !important;
	font-size: 90% !important;
  font-weight: 300;
  line-height: 1.2;
}
.ui-icon {
	filter: brightness(100) !important;
}

span.center {
	text-align: center;
}

#schaltflaechen .bereiche {
	height: 100%;
	top: 0;
	position: absolute;
  z-index: 1000;
  display: inline-block;
}


#schaltflaechen .bereiche img{
	display: inline-block;
	width: 100%;
}


#schaltflaechen .bereiche.bereich_willkommen {
  left: 248%;
  width: 63%;
}

#schaltflaechen .bereiche.bereich_einstieg {
  left: 313%;
  width: 80%;
}

#schaltflaechen .bereiche.bereich_gruppenarbeit {
  left: 375%;
  width: 85%;
  z-index: 10000000000;
  pointer-events: none;
}

#schaltflaechen .bereiche.bereich_pause {
	left: 1%;
	width: 45%;
}

#schaltflaechen .bereiche.bereich_wiederholung {
  left: 45%;
  width: 50%;
}

#schaltflaechen .bereiche.bereich_netzwerk {
  left: 91%;
  width: 60%;
}

#schaltflaechen .bereiche.bereich_abschluss {
  left: 146%;
  width: 61%;
}

#schaltflaechen .bereiche.bereich_feedback {
  left: 201%;
  width: 52%;
}

#schaltflaechen .bereiche .infobutton {
position: absolute;
height: auto;
width: 8%;
}

#schaltflaechen .bereiche.bereich_pause .icon_pause_gluehbirne {
left: 58%;
top: 41%;
width: 10%;
}
#schaltflaechen .bereiche.bereich_pause .icon_pause_pause {
	left: 46%;
	top: 14%;
	width: 10%;
}
#schaltflaechen .bereiche.bereich_pause .icon_pause_info {
	left: -9%;
	top: 38%;
	width: 10%;
}

#schaltflaechen .bereiche.bereich_wiederholung .icon_wiederholung_methoden {
left: 45%;
top: 5%;
width: 10%;
}
#schaltflaechen .bereiche.bereich_wiederholung .icon_wiederholung_tipps {
left: 65%;
top: 38%;
width: 10%;
}
#schaltflaechen .bereiche.bereich_wiederholung .icon_wiederholung_info {
	left: 22%;
	top: 40%;
	width: 10%;
}
#schaltflaechen .bereiche.bereich_willkommen .icon_willkommen_info {
	left: 30%;
	top: 25%;
	z-index: 200;
}
#schaltflaechen .bereiche.bereich_willkommen .icon_willkommen_methoden {
	left: 53%;
	top: 42%;
}
#schaltflaechen .bereiche.bereich_willkommen .icon_willkommen_tipps {
	left: 89%;
	top: 42%;
}
#schaltflaechen .bereiche.bereich_einstieg .icon_einstieg_info {
	left: 13%;
	top: 50%;
	width: 6%;
}
#schaltflaechen .bereiche.bereich_einstieg .icon_einstieg_methoden {
	left: 36%;
	top: 20%;
	width: 6%;
}
#schaltflaechen .bereiche.bereich_einstieg .icon_einstieg_tipps {
	left: 79%;
	top: 45%;
	width: 6%;
}
#schaltflaechen .bereiche.bereich_gruppenarbeit .icon_gruppenarbeit_info {
	left: 42%;
	top: 37%;
	width: 6%;
	pointer-events: auto;
}
#schaltflaechen .bereiche.bereich_gruppenarbeit .icon_gruppenarbeit_methoden {
	left: 55%;
	top: 3%;
	width: 6%;
	pointer-events: auto;
}
#schaltflaechen .bereiche.bereich_gruppenarbeit .icon_gruppenarbeit_tipps {
	left: 59%;
	top: 50%;
	width: 6%;
	pointer-events: auto;
}
#schaltflaechen .bereiche.bereich_netzwerk .icon_netzwerk_methoden {
	left: 33%;
	top: 6%;
	z-index: 3;
}
#schaltflaechen .bereiche.bereich_netzwerk .icon_netzwerk_tipps {
	left: 70%;
	top: 20%;
	z-index: 3;
}
#schaltflaechen .bereiche.bereich_netzwerk .icon_netzwerk_info {
	left: 20%;
	top: 37%;
	z-index: 3;
}
#schaltflaechen .bereiche.bereich_abschluss .icon_abschluss_methoden {
	left: 38%;
	top: 10%;
}
#schaltflaechen .bereiche.bereich_abschluss .icon_abschluss_tipps {
	left: 69%;
	top: 23%;
}
#schaltflaechen .bereiche.bereich_abschluss .icon_abschluss_info {
	left: 22%;
	top: 36%;
}
#schaltflaechen .bereiche.bereich_feedback .icon_feedback_methoden {
	left: 32%;
	top: 46%;
	width: 10%;
}
#schaltflaechen .bereiche.bereich_feedback .icon_feedback_tipps {
	left: 64%;
	top: 42%;
	width: 10%;
}
#schaltflaechen .bereiche.bereich_feedback .icon_feedback_info {
	left: 16%;
	top: 25%;
	width: 10%;
}


#user_interface {
display: block;
  position: fixed;
  top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}
#user_interface::before {
	content: '';
    display: block;
    
    padding-top: 56.25%;
}

#swipe_animation {
	position: absolute;
	bottom: 4%;
	left: 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	animation: shakeX 5s infinite;
	-webkit-animation: shakeX 5s infinite;
}

#rotate_animation {
	display: none;
position: absolute;
top: 15%;
width: 40%;
background: rgba(255, 255, 255, 0.8);
height: 70%;
left: 30%;
border-radius: 500px;
}

@media only screen and (max-width: 500px) {
	#rotate_animation {
	display: block;
}
}

#playaudio {
	position: absolute;
	top: 2%;
	width: 3%;
	right: 2%;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.59);
	z-index: -1;
	pointer-events: all;
	padding: 0.9% 0.6% 0.5% 0.6%;
	border-radius: 100px;
}

#playaudio > img {
	display: inline-block;
	position: relative;
	width: 100%;
	height: auto;
	
}

.ottie-player {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}


/* Bereiche */
/*Willkommen*/
.bereich_willkommen #mann_sessel{
 	position: absolute;
	width: 40%;
	top: 18%;
	left: 36%;
	height: 70%;
}
.bereich_willkommen #frau_sessel{
 	position: absolute;
	width: 136%;
	top: 11%;
	left: 10.2%;
	height: 88%;
}

.bereich_willkommen #tisch_willkommen {
 	position: absolute;
  width: 16%;
  top: 55%;
  left: 55%;
}

.bereich_willkommen #tafel{
 	position: absolute;
  width: 24%;
  top: 30%;
  left: 13%;
}
.bereich_willkommen #tafel > img {
	filter: brightness(0.9);
	transition: .4s ease-in-out;
}
.bereich_willkommen #tafel .seite_1_wrapper {
animation: blattwackeln 5s infinite;
	-webkit-animation: blattwackeln 5s infinite;
	  position: absolute;
  width: 100%;
  top: 1%;
height: 68%;
transform-origin: 50% 0%;

z-index: 100;
}
.bereich_willkommen #tafel .seite_1_wrapper .tafel_seite_1 {
	transform: rotate(0deg) scaleY(1.0);
	transform-origin: 20% 0;
	position: absolute;
	top: 3%;
	opacity: 1;
	width: 82%;
	left: 3.5%;
	transition: .3s ease-in-out all;
	
}
.bereich_willkommen #tafel .seite_1_wrapper:hover .tafel_seite_1 {
	transform: rotate(-90deg) scaleY(0.4);
	opacity: 0;
}
.bereich_willkommen #tafel .seite_1_wrapper:hover + img {
	filter: brightness(1);
}

@keyframes blattwackeln {
	from {transform: rotate(0deg) scaleY(1.0);}
	45% {transform: rotate(0deg) scaleY(1.0);}
	60% {transform: rotate(-2deg) scaleY(0.96);}
	75% {transform: rotate(0deg) scaleY(1.0);}
	90% {transform: rotate(-2deg) scaleY(0.96);}
	to{transform: rotate(0deg) scaleY(1.0);}
}

/*Einstieg*/

.bereich_einstieg #pflanze {
  position: absolute;
	width: 30%;
	top: 4%;
	left: 50%;
	height:  60%;
}
.bereich_einstieg #whiteboard_tafel {
  position: absolute;
	width: 30%;
	top: 23.5%;
	left: 31%;
	height:  60%;
}
.bereich_einstieg #moderator {
  position: absolute;
  width: 33%;
  top: 17%;
  left: 11%;
  height: 57%;
}
.bereich_einstieg #element-tafel {
   position: absolute;
width: 19%;
top: 24%;
left: 42%;
height: 24%;
z-index: 1000;
animation: heartBeat 8s infinite;
-webkit-animation:  heartBeat 8s infinite;
}
.bereich_einstieg #stuhl_1 {
  position: absolute;
  width: 12%;
  top: 54%;
  left: 10%;
  height:  60%;
}
.bereich_einstieg #stuhl_1_person {
  position: absolute;
	width: 32%;
	top: 30.5%;
	left: -0.5%;
	height: 57%;
}
.bereich_einstieg #stuhl_2 {
  position: absolute;
	width: 32.5%; 
	top: 39%;
	left: 8%;
	transform: scaleX(-1);
	height:  58%;
}
.bereich_einstieg #stuhl_3 {
  position: absolute;
	width: 32%;
	top: 41%;
	left: 23.5%;
	height:  57%;
}
.bereich_einstieg #stuhl_4 {
  position: absolute;
	width: 33.5%;
	top: 35%;
	left: 37%;
	transform: scaleX(-1);
	height:  58%;
}
.bereich_einstieg #stuhl_5 {
  position: absolute;
	width: 34%;
	top: 37%;
	left: 51%;
	height:  61%;
}
.bereich_einstieg #stuhl_6 {
  position: absolute;
  width: 12%;
  top: 52%;
  left: 69%;
  transform: scaleX(-1);
  height:  60%;
}
.bereich_einstieg #stuhl_6_person {
  position: absolute;
  width: 35%;
  top: 32%;
  left: 57.8%;
  /*! transform: ; */
  height:  61%;
}
/*Feedback*/
.bereich_feedback #mann_links{
    position: absolute;
  	width: 45%;
 	 	top: 18%;
  	left: 51%;
  	height:  61%;
}
.bereich_feedback #mann_rechts{
  position: absolute;
	width: 59%;
	top: 8%;
	left: -1.5%;
	height:  72%;
}
.bereich_feedback #papier{
	position: absolute;
width: 30%;
top: 44%;
left: 40%;
height: 28%;
transform-origin: 10% 15%;
animation: swing 4s infinite;
-webkit-animation: swing 4s infinite;
}

.bereich_feedback #papier > .ottie-player {
	left: var(--verschiebung-x);
	top: var(--verschiebung-y);
position: relative;
}

.bereich_feedback .blatt_standbild {
    position: absolute;
width: 30% !important;
top: 44%;
left: 40%;
height: 28%;
z-index: -1;
}


/*Abschluss*/
.bereich_abschluss #board_links{
  position: absolute;
  width: 13%;
  top: 32%;
  left: 74%;
  height:  60%;
}
.bereich_abschluss #haengeboard {
  position: absolute;
	width: 59%;
	top: -8%;
	left: 23%;
	height: 60%;
	animation: haengeboard 9s infinite;
	-webkit-animation: haengeboard 9s infinite;
}
@keyframes haengeboard {
	from { top: -8%; }
	15% { top: -6.5%; }
	30% { top: -8%; }
	45% { top: -6.5%; }
	60% { top: -8%; }
	to { top: -8%; }
}


.bereich_abschluss #aufsteller{
  position: absolute;
  width: 11%;
  top: 14%;
  left: 18%;
  height:  60%;
}
.bereich_abschluss #person-links-abschluss{
  position: absolute;
	width: 42%;
	top: 20%;
	left: 33%;
	height:  77%;
  pointer-events: none;
}
.bereich_abschluss #person-rechts-abschluss{
  position: absolute;
	width: 46%;
	top: 16%;
	left: 57.5%;
	height:  76%;
}
.bereich_abschluss #praesentation-abschluss{
  position: absolute;
	width: 40%;
	top: 12%;
	left: 16%;
	height:  63%;
  pointer-events: none;
}
/*Netzwerk*/
.bereich_netzwerk #person_links {
	position: absolute;
	width: 42%;
	top: 7%;
	left: -3%;
	height:  66%;
}
.bereich_netzwerk #person_links_vordergrund {
	position: absolute;
	width: 24%;
	top: 19%;
	left: 28%;
	height:  60%;
}
.bereich_netzwerk #person_links_vordergrund {
	position: absolute;
	width: 63%;
	top: 18%;
	left: 15%;
	height:  103%;
}
.bereich_netzwerk #visitenkarten {
	position: absolute;
	width: 93%;
	top: 1.3%;
	left: 9%;
	height: 76%;
	z-index: 2;
	}

.bereich_netzwerk #person_rechts {
	position: absolute;
	width: 39%;
	top: 9%;
	left: 10%;
	height:  61%;
}
.bereich_netzwerk #person_rechts_vordergrund {
	position: absolute;
	width: 60%;
	top: 23%;
	left: 40%;
	height:  111%;
	z-index: 3;
}
.bereich_netzwerk #wasserglaeser {
  position: absolute;
  width: 10%;
  top: 33%;
  left: 23%;
  height:  60%;
}
.bereich_netzwerk #netzwerk-tisch {
	position: absolute;
	width: 49%;
	top: 7%;
	left: 53%;
	height:  68%;
}
.bereich_netzwerk .visitenkarten_standbild {
 position: absolute;
width: 93% !important;
top: 4.2%;
left: 9%;
height: 70.5%;
pointer-events: none;
z-index: 1;
}
/*Gruppenarbeit*/
.bereich_gruppenarbeit #Mensch-Links {
	position: absolute;
	width: 26%;
	top: 22%;
	left: 24%;
	height:  58%;
}
.bereich_gruppenarbeit #Mensch-Tafel {
	position: absolute;
	width: 34%;
	top: 12%;
	left: 61%;
	height:  61%;
	pointer-events: none;
}
.bereich_gruppenarbeit #tafel_schwamm {
  position: absolute;
left: 57.7%;
width: 17%;
height: 25%;
top: 5.4%;
pointer-events: auto;
}
#schaltflaechen .bereich_gruppenarbeit .schwamm_statisch {
		position: absolute;
		left: 1.7%;
		width: 20% !important;
		height: 25%;
		top: 33%;
		pointer-events: auto;
		transform: rotate(-22deg);
		display: none;
		animation: schwamm_statisch 2s ease-in-out;
		-webkit-animation: schwamm_statisch 2s ease-in-out;
		animation-delay: 1s;
		animation-fill-mode: forwards;
}
@keyframes schwamm_statisch {
	from {left: 1.7%; top: 33%; transform: rotate(-22deg);}
	to {left: 55.7%; top: 54%; transform: rotate(0deg);}
}


.bereich_gruppenarbeit #Mensch-Tisch-Links {
	position: absolute;
	width: 35%;
	top: 20%;
	left: 18.5%;
	height:  61%;
}
.bereich_gruppenarbeit #Mensch-Vordergrund {
  position: absolute;
	width: 37%;
	top: 34%;
	left: 21%;
	transform: scaleX(-1);
	height:  101%;
}
.bereich_gruppenarbeit #Stehtisch-Vordergrund {
	position: absolute;
	width: 71%;
	top: 30%;
	left: 33%;
	transform: scaleX(-1);
	height:  123%;
}
.bereich_gruppenarbeit #Stuhl-Links {
	position: absolute;
	width: 8%;
	top: 59%;
	left: 84%;
	height:  60%;
}
.bereich_gruppenarbeit #Tisch-Rechts {
	position: absolute;
	width: 35%;
	top: 28%;
	left: 59%;
	height:  61%;
}
/*Pause*/
.bereich_pause #Person-Sessel {
	position: absolute;
	width: 51%;
	top: 26%;
	left: -12%;
	height:  47%;
	pointer-events: none;
}
.bereich_pause #Person-Sofa-Links {
	position: absolute;
	width: 74%;
	top: 10.2%;
	left: 8%;
	height:  68%;
}
.bereich_pause #Person-Sofa-Rechts {
	position: absolute;
	width: 76%;
	top: 10.4%;
	left: 29.3%;
	height:  70%;
}
.bereich_pause #Tisch-Pause {
	position: absolute;
	width: 22%;
	top: 50%;
	left: -5%;
	height:  23%;
}

#fensterputzer {
  position: absolute;
  left: -27.9%;
  top: -8.1%;
  width: 57.9%;
  height: 90%;
  z-index: -1;
  overflow: hidden;
}
#fensterputzer .ottie-player {
  width: 120%;
  left: -20%;
  position: absolute;
  top: -10%;
  z-index: -1;
}
#fensterputzer .fensterputzer_rahmen, #fensterputzer .fensterputzer_scheiben {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  pointer-events: none;
}
#fensterputzer .fensterputzer_scheiben {
  width: 81% !important;
  left: -1%;
  top: 2.9%;
}


/*Wiederholung*/
.bereich_wiederholung #person-board {
	position: absolute;
	width: 45%;
	top: 8%;
	left: 50%;
	height:  58%;
}
.bereich_wiederholung #board {
	position: absolute;
	width: 34%;
	top: 19%;
	left: 33%;
	height:  11%;
	
}
.bereich_wiederholung #stichpunkte {
	position: absolute;
	width: 34%;
	top: 11%;
	left: 23%;
	height: 26%;
	overflow: hidden;
	transform: scaleY(1.0);
	transform-origin: 50% 50%;
	transition-timing-function: ease-in-out;
	animation: boardbalken 7s ease-in-out infinite;
	-webkit-animation:  boardbalken 7s ease-in-out infinite;
}
@keyframes boardbalken {
	from { transform: scaleY(0); }
	20% {  transform: scaleY(1.0); }
	60% {  transform: scaleY(0); }
	70% {  transform: scaleY(0); }
	80% {  transform: scaleY(1.0); }
	90% {  transform: scaleY(1.0); }
	to { transform: scaleY(0); }
}


.bereich_wiederholung #stuhl-1 {
	position: absolute;
	width: 50%;
	top: 14%;
	left: -8%;
	height:  72%;
	pointer-events: none;
}
.bereich_wiederholung #stuhl-2 {
	position: absolute;
	width: 50%;
	top: 20%;
	left: 9%;
	height:  72%;
	pointer-events: none;
}
.bereich_wiederholung #stuhl-3 {
	position: absolute;
	width: 50%;
	top: 22%;
	left: 33%;
	height:  72%;
	pointer-events: none;
}
.bereich_wiederholung #stuhl-4 {
	position: absolute;
	width: 50%;
	top: 19%;
	left: 56%;
	height:  72%;
}
.bereich_wiederholung #stuhl-5 {
	position: absolute;
	width: 17%;
	top: 36%;
	left: 81%;
	height:  60%;
}

/* Popups Methodengrafik */ 

.infografik_wrapper #popups .popup_window.farbe_willkommen.methodenuebersicht {
  background: var(--farbe-willkommen);
}
.infografik_wrapper #popups .popup_window.farbe_einstieg.methodenuebersicht {
  background: var(--farbe-einstieg);
}
.infografik_wrapper #popups .popup_window.farbe_gruppenarbeit.methodenuebersicht {
  background: var(--farbe-gruppenarbeit);
}
.infografik_wrapper #popups .popup_window.farbe_pause.methodenuebersicht {
  background: var(--farbe-pause);
}
.infografik_wrapper #popups .popup_window.farbe_wiederholung.methodenuebersicht {
  background: var(--farbe-wiederholung);
}
.infografik_wrapper #popups .popup_window.farbe_netzwerk.methodenuebersicht {
  background: var(--farbe-netzwerk);
}
.infografik_wrapper #popups .popup_window.farbe_abschluss.methodenuebersicht {
  background: var(--farbe-abschluss);
}
.infografik_wrapper #popups .popup_window.farbe_feedback.methodenuebersicht {
  background: var(--farbe-feedback);
}

.infografik_wrapper #popups .popup_window .methoden_bereich {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  height: 100%;
  padding-bottom: 3%;
  padding-top: 1%;
}
.infografik_wrapper #popups .popup_window .methoden_bereich .button {
  background: #fff;
  border-radius: 9px;
  flex-basis: 48%;
  width: auto;
  position: relative;
  display: flex;
  flex-grow: 1;
  margin-bottom: 2%;
  margin-right: 2%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  transition: .1s ease-in-out;
  transform-origin: center;
  padding: 3%;
  box-sizing: border-box;
  max-width: 48%;
}
.button.pointer {
}
.infografik_wrapper #popups .popup_window .methoden_bereich .button .methode_hinzufuegen img {
  width: 6%;
  position: absolute;
  left: 3%;
  top: 6%;
  border-radius: 80px;
  padding: 1.1% 1.2% 1.2% 1.2%;
  transition: .18s ease-in-out;
}

.infografik_wrapper #popups .popup_window .methoden_bereich .button .methode_hinzufuegen img.methode_eingefuegt {
	padding: 2% 1.1% 2.3% 1.6%;
}
.infografik_wrapper #sidebar_links .methode_einzeln .sidebar_content .accordion_title img.methode_eingefuegt {
	padding:  2.1% 0.7% 2.1% 1.5%;
}

.methode_hinzufuegen {
	--opacity: 0;
}

.methode_hinzufuegen::before,
.methode_hinzufuegen + .tooltip_sidebar::before {
	content: var(--methodentooltip);
    color: #fff;
  background: rgb(124, 158, 191);
  padding: 2.1% 5% 1.1% 8%;
  border-radius: 4px;
  box-sizing: border-box;
  position: absolute;
  display: flex;
  left: 6%;
  top: 6%;
  font-size: 80%;
  justify-content: center;
  align-content: center;
  line-height: 1;
  opacity: var(--opacity);
  transition: .2s ease-in-out;
  pointer-events: none;

  /*animation: fadeInLeft 1s;
  -webkit-animation: fadeInLeft 1s;*/
  display: flex;
}

.methode_hinzufuegen + .tooltip_sidebar::before {
  padding: 1.3% 3% 1.3% 6%;
	left: 5%;
	top: 28%;
	font-size: 80%;
}


@media (hover: hover) {
.methode_hinzufuegen:hover::before,
.methode_hinzufuegen:hover + .tooltip_sidebar::before
{
	opacity: 1;
}
}


.button.hinzufuegen::before {
  content: var(--methodentooltip);
  color: #fff;
  background: rgb(124, 158, 191);
  padding: 15% 10% 7% 0;
  border-top-left-radius: 4px;
  box-sizing: border-box;
  position: absolute;
  display: flex;
  
  top: 19%;
  font-size: 80%;
  justify-content: center;
  align-content: center;
  line-height: 1;
 	opacity: var(--opacity);
  transition: .2s ease-in-out;
  display: flex;
  border-bottom-left-radius: 4px;
  pointer-events: none;
  right: 80%;
  width: 480%;
}


@media (hover: hover) {
.button.hinzufuegen:hover::before
{
	opacity: 1;
}
}

.button.hinzufuegen.methode_eingefuegt::before {
	right: 80%;
padding: 15% 8% 7% 0;
width: 450%;
}



.infografik_wrapper #popups .popup_window .methoden_bereich .button .methode_hinzufuegen:hover img {
  /* transform: rotate(90deg); */
  animation: tada 1s;
  -webkit-animation: tada 1s;
  background: #376f99 !important;
}

.infografik_wrapper #popups .popup_window.farbe_willkommen .methoden_bereich .button .methode_hinzufuegen img {
  background: var(--farbe-willkommen);
}
.infografik_wrapper #popups .popup_window.farbe_einstieg .methoden_bereich .button .methode_hinzufuegen img {
  background: var(--farbe-einstieg);
}
.infografik_wrapper #popups .popup_window.farbe_gruppenarbeit .methoden_bereich .button .methode_hinzufuegen img {
  background: var(--farbe-gruppenarbeit);
}
.infografik_wrapper #popups .popup_window.farbe_pause .methoden_bereich .button .methode_hinzufuegen img {
  background: var(--farbe-pause);
}
.infografik_wrapper #popups .popup_window.farbe_wiederholung .methoden_bereich .button .methode_hinzufuegen img {
  background: var(--farbe-wiederholung);
}
.infografik_wrapper #popups .popup_window.farbe_netzwerk .methoden_bereich .button .methode_hinzufuegen img {
  background: var(--farbe-netzwerk);
}
.infografik_wrapper #popups .popup_window.farbe_abschluss .methoden_bereich .button .methode_hinzufuegen img {
  background: var(--farbe-abschluss);
}
.infografik_wrapper #popups .popup_window.farbe_feedback .methoden_bereich .button .methode_hinzufuegen img {
  background: var(--farbe-feedback);
}

.infografik_wrapper #popups .popup_window .methoden_bereich .methode_nummer {
  color: #000;
  width: 100%;
  text-align: center;
  font-size: 200%;
  margin-top: auto;
  flex-basis: 30%;
  font-weight: 400;
}
.infografik_wrapper #popups .popup_window .methoden_bereich .methode_name {
  margin-bottom: auto;
  flex-basis: 20%;
  color: #000;
  text-align: center;
  font-size: 120%;
  vertical-align: middle;
  flex-grow: 0;
  font-weight: 400;
}
.infografik_wrapper #popups .popup_window.farbe_willkommen .methoden_bereich .methode_name, .infografik_wrapper #popups .popup_window.farbe_willkommen .methoden_bereich .methode_nummer {
  color: var(--farbe-willkommen);
}
.infografik_wrapper #popups .popup_window.farbe_einstieg .methoden_bereich .methode_name, .infografik_wrapper #popups .popup_window.farbe_einstieg .methoden_bereich .methode_nummer {
  color: var(--farbe-einstieg);
}
.infografik_wrapper #popups .popup_window.farbe_gruppenarbeit .methoden_bereich .methode_name, .infografik_wrapper #popups .popup_window.farbe_gruppenarbeit .methoden_bereich .methode_nummer {
  color: var(--farbe-gruppenarbeit);
}
.infografik_wrapper #popups .popup_window.farbe_pause .methoden_bereich .methode_name, .infografik_wrapper #popups .popup_window.farbe_pause .methoden_bereich .methode_nummer {
  color: var(--farbe-pause);
}
.infografik_wrapper #popups .popup_window.farbe_wiederholung .methoden_bereich .methode_name, .infografik_wrapper #popups .popup_window.farbe_wiederholung .methoden_bereich .methode_nummer {
  color: var(--farbe-wiederholung);
}
.infografik_wrapper #popups .popup_window.farbe_netzwerk .methoden_bereich .methode_name, .infografik_wrapper #popups .popup_window.farbe_netzwerk .methoden_bereich .methode_nummer {
  color: var(--farbe-netzwerk);
}
.infografik_wrapper #popups .popup_window.farbe_abschluss .methoden_bereich .methode_name, .infografik_wrapper #popups .popup_window.farbe_abschluss .methoden_bereich .methode_nummer {
  color: var(--farbe-abschluss);
}
.infografik_wrapper #popups .popup_window.farbe_feedback .methoden_bereich .methode_name, .infografik_wrapper #popups .popup_window.farbe_feedback .methoden_bereich .methode_nummer {
  color: var(--farbe-feedback);
}


.infografik_wrapper #popups .popup_window .methoden_bereich .button:hover {
  transform: scale(0.98);
}
.popup_toolbar .methodenauswahl_icon_bereich {
  width: 8%;
  height: auto;
  position: relative;
  margin-left: 30%;
  margin-right: 3%;
}

#methoden_willkommen .popup_toolbar .methodenauswahl_icon_bereich {
  margin-left: 28%;
}

#methoden_einstieg .popup_toolbar .methodenauswahl_icon_bereich {
  margin-left: 28%;
}

#methoden_gruppenarbeit .popup_toolbar .methodenauswahl_icon_bereich {
  margin-left: 24%;
}

#methoden_wiederholung .popup_toolbar .methodenauswahl_icon_bereich {
  margin-left: 25%;
}

#methoden_pause .popup_toolbar .methodenauswahl_icon_bereich {
  margin-left: 33%;
}

#methoden_netzwerk .popup_toolbar .methodenauswahl_icon_bereich {
  margin-left: 32%;
}

#methoden_feedback .popup_toolbar .methodenauswahl_icon_bereich {
  margin-left: 32%;
}

.infografik_wrapper #popups .popup_window.methodenuebersicht .popup_toolbar {
  padding-top: 3%;
  padding-bottom: 2%;
}
.infografik_wrapper #popups .popup_window.methodenuebersicht .popup_content {
  /*! height: 100%; */
}


/* ********** User Interface *********** */

/* Methodencloud */

#methoden_cloud {
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: 10%;
  pointer-events: all;
}
#methoden_cloud::before {
content: 'Meine Methoden';
font-family: 'Hind', Helvetica, Arial, sans-serif;
color: #fff;
text-align: center;
max-width: 60%;
position: absolute;
left: 16%;
top: 34%;
font-size: 75%;
line-height: 1.1;
font-weight: 600;
}

#methoden_cloud .methodencloud_bg {
}
#methoden_cloud .methodencloud_plus {
  position: absolute;
  left: 10%;
  width: 22%;
  top: 5%;
  transition: .4s ease-in-out;
  z-index: -1;
  transform: rotate(-10deg);
  display: none;
}
#methoden_cloud .methodencloud_pfeil_up {
  position: absolute;
  right: 32%;
  width: 22%;
  bottom: -9%;
  transition: .3s ease-in-out;
}
#methoden_cloud .methodencloud_pfeil_down {
  position: absolute;
  right: 53%;
  width: 22%;
  bottom: -9%;
  transition: .3s ease-in-out;
}

#methoden_cloud:hover .methodencloud_pfeil_up {
	bottom: -5%;
}
#methoden_cloud:hover .methodencloud_pfeil_down {
	bottom: -13%;
}
#methoden_cloud:hover .methodencloud_plus {
	transform: scale(1.08) rotate(-10deg);
}

#methoden_cloud .methodencloud_datei_icon {
  position: absolute;
  right: 35%;
  width: 40%;
  bottom: 95%;
  visibility: hidden;
  z-index: -1;
  animation-delay: .5s;
  animation-duration: 0.6s;
}

#methoden_cloud .methodencloud_datei_icon.dateizurueck {
  position: absolute;
  right: 35%;
  width: 40%;
  bottom: 95%;
  visibility: hidden;
  z-index: -1;
  animation-delay: 0s;
  animation-duration: .4s;
}

#methoden_cloud .methodencloud_datei_icon.visible {
	visibility: visible;
}


/* Methoden Cloud Fenster */
#methoden_cloud_fenster {
  position: absolute;
  right: 3%;
  background: #fff;
  width: 23%;
  height: 65%;
  border: 4px solid #24465b;
  border-radius: 18px;
  border-left-width: 3px;
  border-bottom-width: 3px;
  bottom: 20%;
  display: none;
  pointer-events: all;
}

#methoden_cloud_fenster::after {
	content: '';
	background-image: url('bilder/methoden_fenster_haken.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 13%;
	height: 20%;
	position: absolute;
	bottom: -12.5%;
	right: 20%;
}
.methodenfenster_header {
  position: relative;
  width: 100%;
  display: flex;
  background: #376f99;
  height: 10%;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  border-top-right-radius: 14px;
  border-top-left-radius: 14px;
}
.methodenfenster_ueberschrift {
  color: #fff;
  width: 100%;
  display: block;
  position: relative;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 110%;
}

.methodensammlung_schliessen {
	position: absolute;
	top: -4%;
	left: -6%;
	width: 11%;
	z-index: 100;
}

#methodencloud_fenster_content {
  padding: 6% 9% 5% 7%;
  height: auto;
  max-height: 73.1%;
overflow: scroll;
}

#methodencloud_fenster_content > div {
	display: none;
}

#methodencloud_fenster_content > div.platzhalter_hinweis {
	display: inline-block;
}
#methodencloud_fenster_content > div.platzhalter_hinweis > p {
	font-family: 'Hind', Helvetica, Arial, sans-serif;
	font-size: 90%;
	color: #555;
	font-weight: 400;
	font-style: italic;
}

#methodencloud_fenster_content .bereich_ueberschrift {
	display: block;
	  font-size: 100%;
  font-weight: 500;
  text-align: left;
  color: #224577;
  border-bottom: 1px solid #ccc;
  font-family: 'hind', Helvetica, Arial, sans-serif;

	margin-top: 2%;
}
#methodencloud_fenster_content .hinzugefuegte_methoden {
  list-style-type: none;
  position: relative;
  margin-top: 2%;
  padding-left: 3%;
}

.methode_farbe {
  background: #ccc;
  width: 5%;
height: 48%;
  position: absolute;
  left: -9%;
  top: 19%;
  
  border-radius: 100px;
}

.bereich_willkommen .methode_farbe {
	background: var(--farbe-willkommen);
}
.bereich_einstieg .methode_farbe {
	background: var(--farbe-einstieg);
}
.bereich_gruppenarbeit .methode_farbe {
	background: var(--farbe-gruppenarbeit);
}
.bereich_pause .methode_farbe {
	background: var(--farbe-pause);
}
.bereich_wiederholung .methode_farbe {
	background: var(--farbe-wiederholung);
}
.bereich_netzwerk .methode_farbe {
	background: var(--farbe-netzwerk);
}
.bereich_abschluss .methode_farbe {
	background: var(--farbe-abschluss);
}
.bereich_feedback .methode_farbe {
	background: var(--farbe-feedback);
}

.hinzugefuegte_methoden li {
  font-family: 'Hind', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 95%;
  line-height: 1.5;
  margin-left: 4%;
  position: relative;
}

.aus_liste_loeschen {
	cursor: pointer;
  position: absolute;
  right: -2%;
  top: 5%;
  width: 6.5%;
	filter: saturate(0) brightness(2.5);
}

.aus_liste_loeschen img {
	pointer-events: none;
}

#generate_pdf {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 11%;
	padding: 3%;
	background: #fff;
	box-shadow: -5px 0 10px rgba(0,0,0,.2);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	box-sizing: border-box;
	border-bottom-right-radius:  15px;
	border-bottom-left-radius:  15px;
}
#generate_pdf span {
	background: #376f99;
	padding: 1% 3% 0.5% 3%;
	display: inline-block;
	box-sizing: border-box;
	color: #fff;
	font-family: 'Hind', Helvetica, Arial, sans-serif;
	font-weight: 500;
	top: 0;
	border-radius: 5px;
	cursor: pointer;
	margin-left: 4%;
	box-shadow: 2px 2px 4px rgba(0,0,0,.2);
}

#generate_pdf span:hover {
	background: #376f99;
	box-shadow: 2px 2px 4px rgba(0,0,0,.4);

}




/* Sidebar Links */

#sidebar_links {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 25%;
	display: flex;
	pointer-events: all;
	flex-direction: row;
	transition: left .6s ease-in-out;
}
#sidebar_links.eingeklappt {
	left: -21.5%;
}
#sidebar_links .sidebar_anfasser {
	transition: .3s ease-in-out;
	position: relative;
	left: -1.2%;
	width: 15%;
	z-index: -1;
	transform-origin: 0% 50%;
}

#sidebar_links .sidebar_anfasser:hover {
	transform: scale(1.09);
}

#sidebar_links .sidebar_body {
	height: auto;
	flex: 0 1 90%;
	background: #fff;
	box-sizing: border-box;
	border: 3px solid #364144;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 0;
	overflow: hidden;
	box-shadow: 7px 7px 7px rgba(0,0,0,0.1);
}

#sidebar_links .sidebar_body .sidebar_overview {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: 100%;
	padding: 4%;
	box-sizing: border-box;
}

#sidebar_links .sidebar_body .sidebar_overview .methode_bereich {
	flex: 1 0 40%;
	background: green;
	text-align: center;
	justify-content: space-around;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 2%;
	border-radius: 0.5vw;	
	cursor: pointer;
	box-sizing: border-box;
	align-content: center;
	box-shadow: 3px 3px 5px rgba(0,0,0,.1);
}

#sidebar_links .sidebar_body .sidebar_overview .methode_bereich.willkommen {
	background: var(--farbe-willkommen);
}
#sidebar_links .sidebar_body .sidebar_overview .methode_bereich.einstieg {
	background: var(--farbe-einstieg);
}
#sidebar_links .sidebar_body .sidebar_overview .methode_bereich.gruppenarbeit {
	background: var(--farbe-gruppenarbeit);
}
#sidebar_links .sidebar_body .sidebar_overview .methode_bereich.pause {
	background: var(--farbe-pause);
}
#sidebar_links .sidebar_body .sidebar_overview .methode_bereich.wiederholung {
	background: var(--farbe-wiederholung);
}
#sidebar_links .sidebar_body .sidebar_overview .methode_bereich.netzwerk {
	background: var(--farbe-netzwerk);
}
#sidebar_links .sidebar_body .sidebar_overview .methode_bereich.abschluss {
	background: var(--farbe-abschluss);
}
#sidebar_links .sidebar_body .sidebar_overview .methode_bereich.feedback {
	background: var(--farbe-feedback);
}

.methode_bereich .icon {
width: 50%;
margin: auto;

max-height: 0;
margin-bottom: 5%;
padding-top: 50%;
position: relative;
}

.methode_bereich .icon > img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.methode_bereich .methode_name {
font-family: 'Hind', Helvetica, Arial, sans-serif;
font-weight: 500;
color: #fff;
margin: auto;
font-size: 100%;
margin-top: 10%;
}


/* Sidebar Content */
.sidebar_single {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: relative;
  display: flex;
  font-family: 'Hind', Helvetica, Arial, sans-serif;
}



#sidebar_links .sidebar_single .methode_einzeln {
	width: 100%;
	height: 100%;
	display: none;
}

#sidebar_links .sidebar_single .methode_einzeln.eingeblendet {
	display: block;
}

#sidebar_links .sidebar_single .willkommen .sidebar_header {
	background: var(--farbe-willkommen);
}
#sidebar_links .sidebar_single .einstieg .sidebar_header {
	background: var(--farbe-einstieg);
}
#sidebar_links .sidebar_single .gruppenarbeit .sidebar_header {
	background: var(--farbe-gruppenarbeit);
}
#sidebar_links .sidebar_single .pause .sidebar_header {
	background: var(--farbe-pause);
}
#sidebar_links .sidebar_single .wiederholung .sidebar_header {
	background: var(--farbe-wiederholung);
}
#sidebar_links .sidebar_single .netzwerk .sidebar_header {
	background: var(--farbe-netzwerk);
}
#sidebar_links .sidebar_single .abschluss .sidebar_header {
	background: var(--farbe-abschluss);
}
#sidebar_links .sidebar_single .feedback .sidebar_header {
	background: var(--farbe-feedback);
}


.sidebar_header {
  top: 0;
left: 0;
height: 8%;
background: var(--farbe-willkommen);
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
color: #fff;
line-height: 1.1;
font-size: 90%;
padding: 5% 8% 5% 8%;
box-sizing: border-box;
border-top-right-radius: 16px;
}
.sidebar_header p {
  font-style: italic;
}

.sidebar_header h3 {
  text-align: center;
  margin-top: 3%;
  margin-bottom: 4%;
  width: auto;
  height: auto;
  align-self: center;
  margin: auto;
}

.sidebar_header .zurueck_pfeil_sidebar {
  position: relative;
  width: 10%;
  left: 2%;
  transition: left .2s ease-in-out;
  cursor: pointer;
}
.sidebar_header .zurueck_pfeil_sidebar:hover {
	left: 0%;
}

/* Sidebar Accordion */
.methode_einzeln .sidebar_content .methode_hinzufuegen {
	--opacity: 0;
  position: relative;
  width: 6%;
  margin: 0 2%;
  background: #ccc;
  padding: 1%;
  border-radius: 100px;
  margin-right: 5%;
  transition: all .3s ease-in-out;
  z-index: 2;
}
.methode_einzeln .sidebar_content .methode_hinzufuegen:hover {
	/* transform: rotate(-360deg); */
	background: #376f99 !important;
	animation: tada 1s;
	-webkit-animation: tada 1s;
}

.methode_einzeln .sidebar_content .tooltip_sidebar {
	--opacity: 0;
	z-index: 1;
}

.methode_einzeln.willkommen .sidebar_content .methode_hinzufuegen {
	background: var(--farbe-willkommen);
}
.methode_einzeln.einstieg .sidebar_content .methode_hinzufuegen {
	background: var(--farbe-einstieg);
}
.methode_einzeln.gruppenarbeit .sidebar_content .methode_hinzufuegen {
	background: var(--farbe-gruppenarbeit);
}
.methode_einzeln.pause .sidebar_content .methode_hinzufuegen {
	background: var(--farbe-pause);
}
.methode_einzeln.wiederholung .sidebar_content .methode_hinzufuegen {
	background: var(--farbe-wiederholung);
}
.methode_einzeln.netzwerk .sidebar_content .methode_hinzufuegen {
	background: var(--farbe-netzwerk);
}
.methode_einzeln.abschluss .sidebar_content .methode_hinzufuegen {
	background: var(--farbe-abschluss);
}
.methode_einzeln.feedback .sidebar_content .methode_hinzufuegen {
	background: var(--farbe-feedback);
}


.accordion_sidebar span.ui-icon {
    position: static;   
    height: 20px;
    margin-top: 0px; 
    margin-top: 3px;
    filter: brightness(0) !important;
    -webkit-filter: brightness(0) !important;
		order: 2;
		margin-left: auto;
}

#sidebar_links .sidebar_content .accordion_sidebar {
	margin-top: 5%;
	padding: 8%;
}

#sidebar_links .sidebar_content .accordion_sidebar .accordion_title {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 2%;
  padding-left: 0;
  font-size: 80%;
  display: flex;
  justify-content: flex-start;
  -webkit-justify-content: start;
  align-items: center;
  color: #5c5c5c;
  font-family: 'Hind', Helvetica, Arial, sans-serif;
}

#sidebar_links .sidebar_content .accordion_sidebar .ui-accordion-content p {
	color: #5c5c5c !important;
}

#sidebar_links .sidebar_content .accordion_sidebar .accordion_title.ui-state-active {
	border: 0 !important;
}

#sidebar_links .sidebar_content .accordion_sidebar .ui-widget-content {
	background: transparent !important;
	padding: 5% 5% 5% 0 !important;
font-size: 80% !important;
border-radius: 0 !important;
}
#sidebar_links .sidebar_content .accordion_sidebar .ui-widget-content.ui-accordion-content-active {
	border-bottom: 1px solid #ccc !important;
}

#sidebar_links .methode_einzeln .sidebar_content .accordion_sidebar .methode_details {
	font-size: 80%;
	background: var(--farbe-einstieg);
	  padding: 0.9% 5%;
  border-radius: 4px;
  border: 2px solid var(--farbe-einstieg);
  color: #fff;
  display: inline-block;
  width: auto;
  margin-top: 5%;
  min-width: 45%;
}
#sidebar_links .methode_einzeln .sidebar_content .accordion_sidebar .methode_details:hover {
	background: transparent;
	border: 2px solid #000;
	color: #000;
}

#sidebar_links .methode_einzeln.willkommen .sidebar_content .accordion_sidebar .methode_details {
	background: var(--farbe-willkommen);
	border-color: var(--farbe-willkommen);
}
#sidebar_links .methode_einzeln.einstieg .sidebar_content .accordion_sidebar .methode_details {
	background: var(--farbe-einstieg);
	border-color: var(--farbe-einstieg);
}
#sidebar_links .methode_einzeln.gruppenarbeit .sidebar_content .accordion_sidebar .methode_details {
	background: var(--farbe-gruppenarbeit);
	border-color: var(--farbe-gruppenarbeit);
}
#sidebar_links .methode_einzeln.pause .sidebar_content .accordion_sidebar .methode_details {
	background: var(--farbe-pause);
	border-color: var(--farbe-pause);
}
#sidebar_links .methode_einzeln.wiederholung .sidebar_content .accordion_sidebar .methode_details {
	background: var(--farbe-wiederholung);
	border-color: var(--farbe-wiederholung);
}
#sidebar_links .methode_einzeln.netzwerk .sidebar_content .accordion_sidebar .methode_details {
	background: var(--farbe-netzwerk);
	border-color: var(--farbe-netzwerk);
}
#sidebar_links .methode_einzeln.abschluss .sidebar_content .accordion_sidebar .methode_details {
	background: var(--farbe-abschluss);
	border-color: var(--farbe-abschluss);
}
#sidebar_links .methode_einzeln.feedback .sidebar_content .accordion_sidebar .methode_details {
	background: var(--farbe-feedback);
	border-color: var(--farbe-feedback);
}
/* Hover */
#sidebar_links .methode_einzeln.willkommen .sidebar_content .accordion_sidebar .methode_details:hover {
	background: transparent;
	color: var(--farbe-willkommen);
}
#sidebar_links .methode_einzeln.einstieg .sidebar_content .accordion_sidebar .methode_details:hover {
	background: transparent;
	color: var(--farbe-einstieg);
}
#sidebar_links .methode_einzeln.gruppenarbeit .sidebar_content .accordion_sidebar .methode_details:hover {
	background: transparent;
	color: var(--farbe-gruppenarbeit);
}
#sidebar_links .methode_einzeln.pause .sidebar_content .accordion_sidebar .methode_details:hover {
	background: transparent;
	color: var(--farbe-pause);
}
#sidebar_links .methode_einzeln.wiederholung .sidebar_content .accordion_sidebar .methode_details:hover {
	background: transparent;
	color: var(--farbe-wiederholung);
}
#sidebar_links .methode_einzeln.netzwerk .sidebar_content .accordion_sidebar .methode_details:hover {
	background: transparent;
	color: var(--farbe-netzwerk);
}
#sidebar_links .methode_einzeln.abschluss .sidebar_content .accordion_sidebar .methode_details:hover {
	background: transparent;
	color: var(--farbe-abschluss);
}
#sidebar_links .methode_einzeln.feedback .sidebar_content .accordion_sidebar .methode_details:hover {
	background: transparent;
	color: var(--farbe-feedback);
}




#startgrafik {
  background: transparent;
  background-size: cover;
  background: #fff;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
	overflow-y: hidden;
	box-sizing: border-box;
	padding: 0;
	z-index: 100000000000;
}

#startgrafik img {
	width: 100%;
}

#startgrafik .startgrafik_hg {
	width: 100%;
	height: auto;
}

#startgrafik .startgrafik_button {
	position: absolute;
	height: 5%;
top: 30%;
width: 23%;
left: 38%;
animation: pulse 2s infinite;
-webkit-animatin: pulse 2s infinite;
cursor: pointer;
user-select: none !important;
}

#startgrafik .startgrafik_button img {
	transition: ease-in-out .4s;
}

#startgrafik .startgrafik_button:hover img {
	
	transform: scale(1.1);
}

#startgrafik .startgrafik_pfeil {
	position: absolute;
	height: 5%;
	top: 35%;
	width: 7%;
	left: 60%;
	animation: startpfeil 30s infinite ease-in-out;
	-webkit-animation: startpfeil 30s infinite ease-in-out;
}

@keyframes startpfeil {
	0% { top: 35%; left: 60%; }
	30% { top: 34%; left: 61%; }
	60% { top: 36%; left: 59%; }
	90% { top: 33%; left: 60%; }
	100% { top: 35%; left: 60%; }
}



.preloader {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  /* display: flex; */
  flex-direction: row;
  background: #b3c2c7;
  z-index: 100000000;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 1;
  transition: .5s ease-in-out;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/* ==================== Mobile Anpassungen ==================== */
@media only screen and (max-width:  900px) {
	
	html {
		background-color: #000;
	}


	/* Popups etwas größer */
	.infografik_wrapper #popups .popup_window {
		font-size: 130%;
		width: 89%;
		max-width: 90%;
	}

	
	/* Infobuttons Position */

	#schaltflaechen .bereiche.bereich_einstieg .icon_einstieg_methoden {
		left: 36%;
		top: 16%;
		width: 6%;
	}

	#schaltflaechen .bereiche.bereich_pause .icon_pause_pause {
	top: 11%;
}

 #schaltflaechen .bereiche.bereich_wiederholung .icon_wiederholung_methoden {
 	left: 23%;
 	top: 3%;
 }

 #schaltflaechen .bereiche.bereich_gruppenarbeit .icon_gruppenarbeit_methoden {
 	left: 52%;
 }

 #schaltflaechen .bereiche.bereich_netzwerk .icon_netzwerk_methoden {
 	top: 1%;
 	left: 29%;
 }

 #schaltflaechen .bereiche.bereich_abschluss .icon_abschluss_methoden {
 	top: 4%;
 	left: 57%;
 }

 

	/* Infobuttons etwas größer */
	.infografik_wrapper #schaltflaechen .button img {
  	width: 180%;
  	transform: translateX(-10%);
	}

	#methoden_cloud {
		width: 17%;
		right: 0;
	}
	#methoden_cloud::before {
		font-size: 160%;
		top: 28%;
	}

	#methoden_cloud_fenster::after {
		bottom: -13.5%;
	}

	#methoden_cloud_fenster {
		width: 45%;
		height: 75%;
		border-radius: 13px;
	}

	#methodencloud_fenster_content {
  padding: 4% 7% 4% 6%;
	}

	.methodenfenster_ueberschrift {
		font-size: 190%;
	}
	#methodencloud_fenster_content > div.platzhalter_hinweis {
		font-size: 200%;
		line-height: 1.2;
	}
	#methodencloud_fenster_content > div.platzhalter_hinweis > p {
		color: #303030;
		font-weight: 600;
	}

	#generate_pdf {
		height: 15%;
		border-bottom-right-radius: 11px;
		border-bottom-left-radius: 11px;
}
	
	#generate_pdf span {
		font-size: 170%;
	}

	.methodenfenster_header {
		border-top-right-radius: 7px;
		border-top-left-radius: 7px;
		height: 13%;
	}

	#methodencloud_fenster_content .bereich_ueberschrift {
		font-size: 180%;
	}
	.hinzugefuegte_methoden li {
		font-size: 200%;
	}
	.aus_liste_loeschen {
		width: 8.5%;
	}

	/* Sidebar Button etwas größer */
		#sidebar_links .sidebar_anfasser {
	
	/*left: -1.9%;*/
	width: 18%;
}
	/* Sidebar größer */
	#sidebar_links.eingeklappt {
		left: -30.4%;
	}
	#sidebar_links {
		width: 37%;
	}

	/* Startgrafik */
		#startgrafik .startgrafik_button {
			top: 28%;
			width: 33%;
			left: 32%;
		}

		#startgrafik .startgrafik_pfeil {
			height: 5%;
			top: 35%;
			width: 12%;
			left: 60%;
			animation: none;
		}

		.methode_bereich .methode_name {
			font-size: 140%;
		}
		.methode_bereich .icon {
			width: 35%;
		}

		/* Sidebar */ 
		.sidebar_header {
			height: 10%;
		}
		.sidebar_header h3 {
			font-size: 200%;
		}

		.sidebar_header .zurueck_pfeil_sidebar {
			width: 12%;
		}

		#sidebar_links .sidebar_content .accordion_sidebar {
			margin-top: 3%;
			padding: 5%;
		}

		#sidebar_links .sidebar_content .accordion_sidebar .accordion_title {
			font-size: 170%;
			padding: 1.5% 0 3% 0;
			font-weight: 500;
		}

		#sidebar_links .sidebar_content .accordion_sidebar .ui-widget-content {
			font-size: 140% !important;
			padding: 3% 3% 5% 0 !important;
		}

		#sidebar_links .methode_einzeln .sidebar_content .accordion_sidebar .methode_details {
			font-size: 95% !important;
			min-width: 55%;
		}

		/* Popups */
		.infografik_wrapper #popups .popup_window .accordion .accordion_title .ausklapptitel {
			font-size: 120%;
		}
		.ui-widget-content p, .ui-widget-content ul, .ui-widget-content ol {
			font-size: 105% !important;
			font-weight: 400;
		}

		.infografik_wrapper #popups .popup_window .popup_content {
			padding: 0 3%;
		}
		.infografik_wrapper #popups .popup_window h2 {
			font-size: 170%;
		}

		.infografik_wrapper #popups .popup_window h3 {
			font-size: 140%;
			font-weight: 500;
		}
		.infografik_wrapper #popups .popup_window .popup_toolbar .button.hinzufuegen {
			width: 5.5%;
		}
		#popups .popup_window.tippsundeinleitung .popup_content p {
			color: #444444;
			font-weight: 500;
			font-size: 120%;
		}
		.infografik_wrapper #popups .popup_window .methoden_bereich .methode_name {
			font-weight: 500;
			font-size: 150%;
		}
		.infografik_wrapper #popups .popup_window .methoden_bereich .button {
			padding: 1.6%;
		}
		.infografik_wrapper #popups .popup_window .methoden_bereich .button .methode_hinzufuegen img {
			width: 7.4%;
		}

		#playaudio {
			width: 6%;
		}


}