:root {
	--spot: #f00;
	--spot_background: rgb(251, 39, 39);
	--darkgrey: rgb(116, 133, 138);
	--lightgrey: rgb(200, 210, 218);
	--warmgrey: rgb(232, 230, 222);
	--core: rgb(255, 206, 0);
	--core_dark: rgb(255, 180, 0);
	--core_bright: rgb(255, 235, 155);
	--legs: rgb(175, 220, 100);
	--legs_dark: rgb(145, 200, 50);
	--legs_bright: rgb(218, 245, 180);
	--arms: rgb(128, 223, 236);
	--arms_dark: rgb(65, 200, 233);
	--arms_bright: rgb(185, 240, 255);
}

body {
	font-family: 'Barlow', sans-serif;
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

button {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-style: italic;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--spot);
	font-weight: 600;
	font-size: 21px;
	padding: 15px;
	padding-left: 20px;
	padding-right: 20px;
	border: solid 1px var(--spot);
	outline: none;
	cursor: pointer;
	background: #fff;
}

hr {
	border: none;
	background: var(--spot);
	height: 1px;
	margin: 0;
	margin-top: 40px;
	margin-bottom: 40px;
}

main {
	flex-grow: 1;
	margin: 0 auto;
	width: 100%;
	max-width: 125vh;
	padding-bottom: 50px;
}

#content {
	margin-left: 10%;
	margin-right: 10%;
}


h1,
h2 {
	font-family: 'Barlow Semi Condensed', sans-serif;
}

h1 {
	font-style: italic;
	font-size: 2.4em;
	margin-bottom: 0.3em;
	font-weight: 300;
}

h2 {
	font-weight: 600;
	font-size: 21px;
	margin-top: 40px;
	margin-bottom: 20px;
}

h3 {
	font-family: 'EB Garamond', serif;
	font-size: 1.2em;
	margin-top: 30px;
	margin-bottom: 0;
}

h3:first-child {
	margin-top: 0;
}

main p,
main li,
main h2,
main h3,
main hr,
main dl {
	max-width: 700px;
}

main p,
main li,
main dl {
	font-family: 'EB Garamond', serif;
	font-size: 1.2em;
}

ul ul li {
	font-size: inherit;
}

main p {
	line-height: 1.4em;
	margin-top: 0.5em;
	margin-bottom: 0.8em;
}

main a,
main a:visited {
	color: var(--darkgrey);
}

main img {
	max-width: 100%;
}

/****************** Listen **********************/

main ul,
main ol {
	list-style-position: outside;
	padding-left: 1.5em;
}

main ul,
main ol {
	list-style-type: none;
	margin-top: 12px;
	margin-bottom: 25px;
}

main li {
	margin-bottom: 0.5em;
}

main li::before {
	display: inline-block;
	width: 1.2em;
	margin-left: -1.2em;
}

main ul li::before {
	content: "\2022";
	color: var(--spot);
}

main ul ul li::before {
	color: var(--darkgrey);
}

main ol {
	counter-reset: item;
}

main ol li {
	counter-increment: item;
}

main ol li:before {
	content: counter(item)'.';
}

/******************* DEFINITIONSLISTEN *************/

dl {
	display: flex;
	flex-wrap: wrap;
}

dt,
dd {
	padding-top: 5px;
	padding-bottom: 5px;
}

dt {
	width: 10%;
	min-width: 120px;
	flex-grow: 1;
	font-weight: 700;
	margin-right: 10px;
}

dd {
	width: 80%;
	flex-grow: 1;
	margin: 0;
}

/******************** ACCORDION ********************/

.summary {
	clear: both;
	cursor: pointer;
	border-top: solid 1px var(--spot);
	padding-top: 18px;
	margin-top: 20px;
}

.summary:first-of-type {
	border-top: none;
}

.summary:after {
	content: ' ';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 11.5px 0 11.5px 20px;
	border-color: transparent transparent transparent var(--spot);
	margin-top: 10px;
	margin-left: 1px;
	transition: transform 0.2s;
}

/*
.summary:after {
    content: url(img/pfeil.svg);
    display: block;
    width: 20px;
    margin-top: 10px;
    transition: transform 0.2s;
}*/

.summary.active:after {
	transform: rotate(90deg);
}

.details {
	display: none;
	float: left;
}

#content a {
	font-family: Barlow Semi Condensed;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 0.02em;
	cursor: pointer;
}

#content a.intern:before {
	content: url(img/pfeil.svg);
	display: inline-block;
	width: 15px;
	margin-left: 3px;
	margin-right: 3px;
}

#content a.document:before {
	content: url(img/doc.svg);
	display: inline-block;
	width: 14px;
	margin-right: 5px;
	vertical-align: -1px;
}

#content a.play {
	margin-right: 15px;
}

#content a.play:before {
	content: url(img/play_1.svg);
	display: inline-block;
	width: 30px;
	margin-right: 5px;
	vertical-align: -8px;
	margin-bottom: 10px;
}

#content a.play.active:before {
	content: url(img/play_2.svg);
}

/******************** HEADER **********************/

header {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	margin-bottom: 50px;
	padding-bottom: 20px;
}

#logo {
	margin-left: 5%;
	text-decoration: none;
	color: var(--spot);
	margin-top: -4px;
}

#logo #homex {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-style: italic;
	font-size: 85px;
	margin: 0;
	padding-right: 5px;
	line-height: 70px;
}

#logo #claim {
	font-family: 'EB Garamond', serif;
	font-weight: bold;
	font-size: 23px;
	letter-spacing: 0.05em;
	margin: 8px 0px -4px 4px;
}

#logo img {
	width: 220px;
	margin-right: 30px;
}

/****************** NAVIGATION ********************/

header nav {
	border-bottom: solid 1px #f00;
	flex-grow: 1;
	text-align: right;
	margin-right: 5%;
	margin-bottom: 5px;
}

nav ul {
	list-style-type: none;
	padding: 0;
	line-height: 2em;
	font-family: 'Barlow Semi Condensed', sans-serif;
}

header nav ul {
	background: #fff;
}

nav ul li {
	display: inline;
	cursor: pointer;
	white-space: nowrap;
}

header nav ul li {
	margin-left: 20px;
}

footer nav ul li {
	margin-right: 20px;
}

nav a,
nav a:visited {
	text-decoration: none;
	font-weight: 500;
	font-size: 21px;
	letter-spacing: 0.06em;
}

header nav a,
header nav a:visited {
	color: var(--darkgrey);
}

header nav li.active a {
	color: #f00;
}

footer nav a,
header nav .footernav a,
footer nav a:visited,
header nav .footernav a:visited {
	color: #fff;
}

footer nav li.active a,
header nav li.footernav.active a {
	color: #000;
}

#navicon {
	display: none;
}

.footernav {
	display: none;
}

footer nav {
	margin-left: 5%;
}

#training-today {
	position: absolute;
	right: 5%;
	top: 105px;
	cursor: pointer;
	text-decoration: none;

}

#training-today span {
	font-family: 'Barlow Semi Condensed', sans-serif;
	color: var(--spot);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding-left: 10px;
	vertical-align: 3px;
}


#training-today img {
	width: 30px;
}

select#language-select {
	border: none;
	border-radius: 0;
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-weight: 500;
	font-size: 17px;
	letter-spacing: 0.03em;
	-webkit-appearance: none;
	/* Entfernt den Standardpfeil in WebKit-Browsern */
	-moz-appearance: none;
	/* Entfernt den Standardpfeil in Mozilla-Browsern */
	appearance: none;
	/* Standard CSS-Property, funktioniert in den meisten modernen Browsern */
	width: 150px;
	background: var(--lightgrey);
	text-align: center;
	padding: 2px 5px;
}

#language-select:focus {
	outline: none;
}

@media (min-width:1150px) {
	header nav ul {
		display: block !important;
	}
}

@media (max-width:1149px) {
	#navicon {
		display: block;
		color: var(--darkgrey);
		font-size: 40px;
		margin: 0;
		cursor: pointer;
	}

	footer {
		display: none;
	}

	header nav a {
		display: block;
	}

	#navi {
		position: absolute;
		z-index: 100;
		right: 0px;
		/*top: 90px;
        min-width: 250px;*/
	}

	header nav ul {
		display: none;
		margin: 0;
	}

	header nav ul li {
		display: block;
		border-bottom: solid 1px #f00;
		margin: 0;
		padding: 13px;
		padding-left: 5%;
		padding-right: 5%;
	}

	select#language-select {
		font-size: 21px;
		letter-spacing: 0.06em;
		-webkit-appearance: none;
		/* Entfernt den Standardpfeil in WebKit-Browsern */
		-moz-appearance: none;
		/* Entfernt den Standardpfeil in Mozilla-Browsern */
		appearance: none;
		/* Standard CSS-Property, funktioniert in den meisten modernen Browsern */
		width: 100%;
		background: transparent;
		text-align: right;
		padding: 0;
	}

	.footernav {
		display: inherit;
		background: var(--spot_background);
	}

	nav .footernav a {
		color: #fff;
	}

	nav ul li.footernav {
		padding-top: 6px;
		padding-bottom: 6px;
		border-bottom: none;
	}

	nav ul .footernav.first {
		padding-top: 18px;
	}

	nav ul .footernav.last {
		padding-bottom: 22px;
	}

	#navi {
		border-top: solid 1px var(--spot);
		width: 100%;
		top: 115px;
	}

	header nav {
		border-bottom: none;
	}

	header {
		margin-bottom: 80px;
	}

	#training-today {
		top: 135px;
	}

	#content {
		margin-left: 5%;
		margin-right: 5%;
	}

	main.mobilenav {
		background: var(--spot_background);
	}

	.mobilenav #content {
		display: none;
	}
}

/****************** Einstellungen ********************/


/*
#panel_setup {
    max-width: 680px;
    margin-top: 40px;
    margin-bottom: 40px;
}
#panel_setup > div {
    margin-bottom: 60px;
}
#panel_setup p,
#panel_setup h3 {
    font-family: 'Barlow', sans-serif;
}
#panel_setup section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: solid 2px;
    margin: 0;
}
#panel_setup section:last-child {
    border-bottom: solid 2px;
}
#panel_setup .focus section:last-child {
    border-bottom: solid 2px;
    font-weight: 600;
}
#panel_setup h3 {
    font-size: 26px;
}
#panel_setup .switchTitle,
#panel_setup h3 {
    width: 150px;
    margin: 0;
    margin-right: 10px;
    font-weight: 600;
}
#panel_setup ul {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
}

/****************** Schalter Einstellungen *******************/


/*
.switch {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.switch li {
    font-family: 'Barlow', sans-serif;
    cursor: pointer;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 0;
    width: 10%;
    flex-grow: 1;
    text-align: center;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.switch li:hover {
    filter: brightness(0.9);
}
.switch li:before {
    content: '';
}
.switch li.active {
    font-weight: 600;
}
.switch.warmup li.active {
    background: var(--lightgrey);
}
.switch.core li.active {
    background: var(--core);
}
.switch.warmup.core li.active {
    background: var(--core_dark);
}
.switch.arms li.active {
    background: var(--arms);
}
.switch.warmup.arms li.active {
    background: var(--arms_dark);
}
.switch.legs li.active {
    background: var(--legs);
}
.switch.warmup.legs li.active {
    background: var(--legs_dark);
}
.switch.range {
    font-size: 25px;
}
@media (max-width:500px) {
    #panel_setup section {
        border: none;
    }
    #panel_setup section:last-child {
        border-bottom: none;
    }
    .switch li {
        border-top: solid 2px #000;
        border-bottom: solid 2px #000;
    }
    #panel_setup .switchTitle,
    #panel_setup h3 {
        width: 100%;
        margin-top: 8px;
        margin-bottom: 12px;
    }
    #panel_setup h3 {
        font-size: 30px;
    }
}
@media (max-width:300px) {
    .switch li {
        min-width: inherit;
        width: 100%;
        border-bottom: none;
    }
    .switch li {
        border: none;
    }
    .switch li:first-child {
        border-bottom: none;
        border-top: solid 2px #000;
    }
    .switch li:last-child {
        border-bottom: solid 2px #000;
        border-top: none;
    }
}

/****************** Einstellungen Variante ********************/

#panel_setup {
	max-width: 680px;
	margin-top: 40px;
	margin-bottom: 40px;
}

#panel_setup>div {
	margin-bottom: 20px;
}

#panel_setup p,
#panel_setup h3 {
	font-family: 'Barlow', sans-serif;
}

#panel_setup section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

#panel_setup section:first-child {
	border-top: solid 1px var(--darkgrey);
	padding-top: 30px;
}

#panel_setup .focus section:last-child {
	font-weight: 600;
}

#panel_setup h3 {
	font-size: 26px;
}

#panel_setup .switchTitle,
#panel_setup h3 {
	width: 150px;
	margin: 0;
	margin-right: 10px;
	font-weight: 600;
}

#panel_setup ul {
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
}

/****************** Schalter Einstellungen  Variante *******************/

.switch {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.switch li {
	font-family: 'Barlow', sans-serif;
	cursor: pointer;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 0;
	width: 10%;
	flex-grow: 1;
	text-align: center;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	margin-right: 10px;
	box-shadow: inset 0px 0px 0px 1px var(--lightgrey);
	background: #fff;
}

.switch li:hover {
	filter: brightness(0.9);
}

.switch li:last-child {
	margin-right: 0;
}

.switch li:before {
	content: '';
}

.switch li.active {
	font-weight: 600;
	box-shadow: none;
}

.switch.core li.active {
	background: var(--core);
}

/*
.switch.warmup.core li.active {
    background: var(--core_dark);
}
*/

.switch.arms li.active {
	background: var(--arms);
}

/*
.switch.warmup.arms li.active {
    background: var(--arms_dark);
}
*/

.switch.legs li.active {
	background: var(--legs);
}

/*
.switch.warmup.legs li.active {
    background: var(--legs_dark);
}
*/

.switch.warmup li.active {
	background: var(--warmgrey);
}

.switch.range {
	font-size: 25px;
}

@media (max-width:500px) {

	#panel_setup .switchTitle,
	#panel_setup h3 {
		width: 100%;
		margin-top: 8px;
		margin-bottom: 12px;
	}

	#panel_setup h3 {
		font-size: 30px;
	}
}

@media (max-width:300px) {
	.switch li {
		min-width: inherit;
		width: 100%;
	}
}

/****************** LISTE ALLER ÜBUNGEN ************************/

#liste>div {
	display: flex;
}

#liste .ex {
	flex-grow: 1;
}

#liste img {
	width: 50%;
}

/****************** WOCHENPLAN ********************/

#plan {
	display: flex;
	margin-top: 50px;
	margin-bottom: 30px;
}

#plan h2,
#plan p {
	font-family: 'Barlow', sans-serif;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 6px;
	font-weight: 600;
	margin: 0;
	max-width: none;
}

#plan h2 {
	font-style: normal;
	border-bottom: solid 2px;
}

#plan h2:first-of-type {
	display: none;
}

#plan h2:last-of-type {
	display: inherit;
}

#plan h3 {
	font-family: 'Barlow Semi Condensed', sans-serif;
}

#plan p {
	font-size: 1.8em;
	margin-top: 3px;
}

/******** core ********/

#plan .tag:nth-child(1) p,
#plan .tag:nth-child(4) p {
	color: var(--core_dark);
}

/*
#plan .tag:nth-child(1) .ex:first-child,
#plan .tag:nth-child(4) .ex:first-child {
    background: var(--core_dark);
}
*/

#plan .tag:nth-child(1) .ex,
#plan .tag:nth-child(4) .ex {
	background: var(--core);
}

#plan .tag:nth-child(1) .ex:last-child,
#plan .tag:nth-child(4) .ex:last-child {
	background: var(--core_bright);
}

/******** legs ********/

#plan .tag:nth-child(2) p,
#plan .tag:nth-child(5) p {
	color: var(--legs_dark);
}

/*
#plan .tag:nth-child(2) .ex:first-child,
#plan .tag:nth-child(5) .ex:first-child {
    background: var(--legs_dark);
}
*/

#plan .tag:nth-child(2) .ex,
#plan .tag:nth-child(5) .ex {
	background: var(--legs);
}

#plan .tag:nth-child(2) .ex:last-child,
#plan .tag:nth-child(5) .ex:last-child {
	background: var(--legs_bright);
}

/******** arms ********/

#plan .tag:nth-child(3) p,
#plan .tag:nth-child(6) p {
	color: var(--arms_dark);
}

/*
#plan .tag:nth-child(3) .ex:first-child,
#plan .tag:nth-child(6) .ex:first-child {
    background: var(--arms_dark);
}
*/

#plan .tag:nth-child(3) .ex,
#plan .tag:nth-child(6) .ex {
	background: var(--arms);
}

#plan .tag:nth-child(3) .ex:last-child,
#plan .tag:nth-child(6) .ex:last-child {
	background: var(--arms_bright);
}

/******** Warmup ********/

#plan .tag .ex:first-child {
	background: var(--warmgrey);
}

.ex h3 {
	font-weight: 300;
	margin-bottom: 5px;
	margin-top: 0px;
}

#plan .tag {
	width: 10%;
	flex-grow: 1;
}

#plan .ex {
	padding: 10px;
	height: 60px;
	border-top: solid 2px;
	cursor: pointer;
}

#plan .ex:hover {
	filter: brightness(0.9);
}

.tag div p {
	margin: 0;
}

#plan .heute {
	box-shadow: 0px 0px 0px 2px;
	z-index: 1;
}

@media (max-width:1500px),
(max-height:750px) {
	#plan h2:first-of-type {
		display: inherit;
		margin-top: 15px;
	}

	#plan h2:last-of-type {
		display: none;
	}

	#plan {
		flex-wrap: wrap;
	}

	#plan .tag {
		width: 30%;
	}
}

@media (max-width:600px),
(max-height:400px) {
	#plan {
		flex-direction: column;
	}

	#plan .tag {
		width: auto;
	}
}

/******************* TRAINING *********************/

#playlist img {
	max-width: 100px;
}

#playlist img.active {
	filter: brightness(0.7)contrast(0.9)sepia(1)hue-rotate(-45deg)saturate(5);
}

.video-container {
	position: relative;
}

.video-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f0f0f0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #333;
	font-size: 2em;
	z-index: 1;
	cursor: pointer;

}

.video-poster h3 {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-style: italic;
	font-size: max(5vw, 30px);
	font-weight: 300;
	margin-bottom: 20px;
}

.video-poster h3 span {
	color: #fff;
}

video {
	width: 100%;
	margin-bottom: 3px;
	outline: none;
}

video:playing+.video-poster {
	display: none;
	/* Poster verschwindet, wenn Video abgespielt wird */
}

.play-button {
	width: 60px;
	height: 60px;
	background-color: #333;
	border-radius: 50%;
	position: relative;

}

.play-button::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 15px;
	border-style: solid;
	border-width: 15px 0 15px 25px;
	border-color: transparent transparent transparent white;
}

.play-button:hover {
	background-color: #555;

}

#playlist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#activeEx {
	display: flex;
	align-items: center;
}

#activeEx h2,
#modal_window h2 {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-style: italic;
	font-size: 30px;
	font-weight: 300;
	margin: 0;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 10px;
}

#training section {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
}

#muskelmann {
	width: 160px;
	margin-top: 20px;
}

/******************* MODAL WINDOW *********************/

.hint main, .ex main {
	height: 0;
	overflow: hidden;
}

.hint #hint, .ex #ex {
	display: block;
}

.modal_bg {
	display: none;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	min-height: 100vh;
	padding-top: 5%;
	padding-bottom: 2%;
	background: rgba(150, 150, 150, 0.5);
}

.modal_window {
	margin: 0 auto;
	position: relative;
	width: 600px;
	max-width: 100%;
	background: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
}

.modal_window .content {
	margin: 20px;
}

#hint .modal_window .content {
	margin: 20px 50px;
}

.modal_window .close {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 40px;
	margin: 0;
	cursor: pointer;
}

.modal_window #panel_setup {
	max-width: none;
	margin-bottom: 0;
}

.modal_window #panel_setup section {
	border-top: none;
	padding-top: 0;
}

/***************** AUTOREN *******************/

#autoren {
	display: flex;
	flex-wrap: wrap;
	max-width: 700px;
}

#autoren div {
	width: 40%;
	flex-grow: 1;
	margin-right: 30px;
	margin-top: 30px;
}

#autoren img {
	width: 100%;
}

@media (max-width:750px) {
	#autoren div {
		width: 100%;
		flex-grow: 1;
		margin-right: 0px;
		margin-top: 30px;
	}
}

#logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 800px;
}

#logos a {
	height: 140px;
	margin-right: 100px;
	display: flex;
	align-items: center;
}

#logos img {
	width: 160px;
}

/***************** FOOTER ********************/

footer {
	background: #fb2727;
	padding-top: 20px;
	padding-bottom: 20px;
	clear: both;
}

/****************** AI-HINT ******************/
.ai-hint {
	display: flex;
	justify-content: end;
	z-index: 100;
	position: relative;
}

.ai-hint button {
	background-color: var(--lightgrey);
	border: none;
	font-size: 13px;
	padding: 0px 6px;
	color: #000;
	font-family: 'Barlow Semi Condensed';
	font-style: normal;
	margin-bottom: -20px;
	height: 20px;
}