@charset "utf-8";
/* CSS Document */


@font-face {
  font-family: 'title-box';
  src: url("../../fonts/officecodepro-bold.otf");
  font-display: swap;
}

@font-face {
	font-family: 'Dosis-Bold';
	src: url("../../fonts/Dosis-Bold.woff");
	font-display: swap;
}

.img-center {
	display:block; width:50%;
}

.img {
	width:12rem; height:12rem;
	display:block;
}

.a-body figure {
	float: left;
	-webkit-shape-outside: circle(80px);
  shape-outside: circle(80px);
	shape-margin: 30px;
}
.a-body figcaption {
	text-align:left; font-size:12pt;
}


/* EXERSICES-tabs START */
.exercises-tabs-div {
	width:100%;
	margin:25px auto 0px;
}
.exercises-tabs-div > h2 { /* ÜBUNGEN: */
	display:block; 
	font-family: 'header-big'; text-align: center;
	font-size:26pt; line-height:1.5;
	margin:0px auto; padding:6px 0px;
	border-radius: 12px 12px 0px 0px;
}
.exercises-tabs-div-deu > h2 {
	width: 200px;
	color:white; background-color:dimgray;
}

.exercises-tabs {
	position:relative; display:flex;
	flex-direction: row; flex-wrap: wrap; justify-content:center;
	color:white;
	border-radius: 12px 12px 0px 0px;
	padding:3px 6px;
}
.exercises-tabs-deu {
	background-color: dimgray;
	border:solid 3px dimgray;
}
.exercise-tab {
	display:block; width:100%;
	min-height:1px; min-width:1px;
}
.exercise-tab-hidden {
	display:none;
}

.exercise-tab h2 { /* information between exercises tabs and article body */
	text-align: center;
	font-family: 'header-big'; font-size:20pt; line-height:1.25;
	margin:0px 0px; padding:20px 0px;
	border: none;
} 
.tab-btn {
	display:inline-block; min-width:100px;
	padding:8px 4px 4px; margin:5px 5px 0px 0px;
	vertical-align:middle; text-align:center;cursor:pointer;
	font-family: 'header-big'; font-size:14pt; font-weight: bold;
	letter-spacing: 1px; text-decoration:none;
	border:solid 3px dimgray; border-radius: 12px 12px 0px 0px;
	color:inherit; background-color:inherit;
}
.tab-btn-deu {
	color:darkslategray; background-color:white;
}
.tab-btn-deu:hover {
	color:darkslategray; background-color:white!important;
	cursor: default;
}

.tab-btn:hover:not(.tab-btn-deu) {
	/*color:darkslategray; background-color:LIGHTCYAN;*/
	border-bottom: solid 3px white;
}
/* EXERSICES-tabs END */




/* DOWNLOAD FILES SECTION --START-- */
.download_section {
  margin:25px 0 15px 0;
  display:block;
}

.animated_icon {
  display:block;
  margin:0 auto;
  width:200px;
}
#download-instruction {
  text-align: center;
  margin:10px auto 0px;
	font-size:12pt; line-height: 1;
}
#download-wrap {
	display:flex; flex-direction: row;
  flex-wrap: wrap; justify-content: center;
	width:100%;
	margin:2px auto 12px;
}
.btn-wrap {
	position:relative; display:block;
	padding:5px; margin:2px 10px;
  width:190px; height:30px;
}
span.btn-title{
	position:relative; display:inline-flex;
	padding-left:10px;
  color:white; background-color: black;
	font-size:13pt; line-height: 1.6; font-family: 'Dosis-Bold';
	height:27px; width:185px; text-align: center;
  border-radius: 50px;
 	z-index:5;
	transition: ease-out 0.2s;
		-webkit-transition:width 0.2s ease-out;
		-moz-transition:width 0.2s ease-out;
		-o-transition:width 0.2s ease-out;
}
.btn-wrap:hover span.btn-title {
	font-size:13pt; line-height: 1.6; width:110px;
  border-right:solid medium white;
  overflow: hidden;
}
.info-under {
	position:absolute; top:5px; right:-10px;
	height:27px; width:150px;
	border-radius: 50px;
  z-index:4;
}
.info-under-deu {
		background-color: green;
}
.info-under-diy {
		background-color: darkorange;
}
.info-under p {
	width:50px;
	margin:5px 4px 5px 0;
	position:absolute; top:0; right:0px;
	color:white;
	font-size:10pt; line-height:1.3; font-family: 'Dosis-Bold';
  font-weight: bold; text-align:left;
}
/* DOWNLOAD FILES SECTION --END-- */



@media screen and (max-width : 950px ){
.img-center { 
	width:75%;
}

}

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

.img-center { 
	width:95%;
}
.img {
	width:auto; height:14rem;
	margin: 0px auto!important;
}

.a-body figure {
	float: none; display:block;
	margin: 0px auto 20px!important;
	-webkit-shape-outside: circle(0px)!important;
  shape-outside: circle(0px)!important;
	shape-margin: 0px!important;
}
.a-body figcaption {
	text-align:center;
	font-size:12pt;
}

.exercises-tabs-div > h2 {
	font-size:23pt; line-height:1.4;
}
.exercise-tab > h2 {
	text-align: center;
	font-family: 'header-big'; font-size:16pt; line-height:1.35;
	margin:20px 0px 20px 20px;
}


#download-wrap {
	width:100%;
	margin:12px auto;
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
span.btn-title{
	padding-left:10px;
	text-align: center;
	color:white;
	height:28px;
	width:200px;
	letter-spacing:1px;
}
.btn-wrap {
	margin:5px auto;
  width:200px;
}
.btn-wrap:hover span.btn-title {
	width:120px;
  border-right:solid medium white;
}
.info-under {
	position:absolute;
	height:28px;
	width:130px;
	top:5px;
	right:-15px;
}
.info-under p {
	width:50px;
	margin:5px 3px 0 0;
}

.reference-box {
	padding: 10px 15px 10px 0px;
}

}

@media screen and (max-width : 365px ){
.img {
	width:auto; height:13rem!important;
	margin: 0px auto!important;
}
.exercise-tab > h2 {
	font-family: 'header-big'; font-size:15pt; line-height:1.35;
	margin:20px 0px 20px 10px;
}

}