:root{
	--color: #737373;
	--shd: 0px 3px 15px 0px rgba(32,37,40,0.2);
	--bg: #fff;
	--color-external: #0094FF;
	--color-header: #0094FF;
	--color-checklist: #324158;
	--color-checklist-point: #E4552D;
	--color-teaser: rgba(93, 93, 93, 0.8);
	--color-more: #0094FF;
	--card-shadow: rgba(0, 0, 0, 0.3);
	--color-button-font: #fff;
	--color-button-background: #0094FF;
	--color-button-background-hover: #CCCC42;
	--color-button-background1: #CCCC42;
	--color-button-font1: #1D2F56;
	--color-spinner-background: #323232;
	--size: 20px;
}

@font-face {
  font-family: "Roboto";
  src:
    local("Roboto"),
    url("fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "General Sans";
  src:
    local("General Sans"),
    url("fonts/Roboto-Regular.ttf") format("truetype");
}

.icon{
	cursor: pointer;
}

.icon svg{
	fill: var(--color);
	height: 40px;
}

.header .icon svg{
	fill: var(--color-header);
}

body{
	color: var(--color);
}

.body{
	margin: 20px;
	text-align: center;
}

.header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: var(--shd);
	padding: 20px;
	color: var(--color-header);
}

.header-link{
	color: unset;
	text-decoration: none;
}

.menu-wrapper{
	position: relative;
}

.brand{
    display: flex;
    gap: 8px;
    flex-direction: column;
    text-align: center;
}

.brand .motto{
	font-size: 1.3rem;
	font-weight: 600;
}

.brand .name{
    font-size: 1.1rem;
    font-weight: 400;
}

@media
only screen and (max-width: 450px){
	.motto{
		display: none;
	}
}

.menu{
	position: absolute;
	width: fit-content;
	right: 0px;
	box-shadow: var(--shd);
	padding: 20px;
	z-index: 99;
	background: var(--bg);
}

.menu > div{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hidden{
	display: none !important;
}

.hierarchy-node .item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.hierarchy-node .item a{
	text-decoration: none;
	color: var(--color);
}

.hierarchy-node #arrow svg{
	display: block;
	height: 4px;
}

.hierarchy-node[data-expanded="false"] .item #arrow svg{
	transform: rotate(180deg);
}

.hierarchy-node .item #name, .hierarchy-node .item #cp{
	padding-left: 8px;
}

.hierarchy-node .grey-out{
	opacity: 0.6;
	cursor: default;
}

.hierarchy-node .has-children{
	font-weight: 600;
}

.hierarchy-item{
	display: flex;
	height: 32px;
}

.flex{
	display: flex;
}

.section-header{
	display: flex;
	justify-content: center;
	align-content: center;
	gap: 20px;
	cursor: pointer;
	transition: 0.2s ease;
}

.section-header svg{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	height: 1ex;
}

.arrow-expanded svg{
	transform: rotate(180deg) translateY(50%);
}

.processes{
	display: flex;
	gap: 16px;
	justify-content: center;
	margin: 16px 0px;
}

@media
only screen and (max-width: 1090px){
.processes{
	flex-direction: column;
}
}
@media
only screen and (min-width: 1091px){
.processes{
	flex-direction: row;
}
}

.process{
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
	border: 1px solid;
	border-radius: 30px;
	padding: 10px;
}

.process svg{
	width: 250px;
}

.process img{
    width: 90%;
}

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

ul{
    text-align: left;
    width: fit-content;
    margin: 10px auto;
}

.footer{
	width: 100vw;
	background-color: white;
}

.banner{
	border-top: var(--section-border);
	border-bottom: var(--section-border);
	padding-bottom: 2px;
	text-align: center;
	margin-bottom: 2px;
}

.banner > a{
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
}

.sep-r{
	border-right: var(--section-border);
}

.main-section{
	margin-bottom: 3rem;
}

@media
only screen and (max-width: 800px){
	.index-benefits{
		display: flex;
		flex-direction: column;
		gap: 32px;
		margin: 8px 0px;
	}
}

@media
only screen and (min-width: 801px){
	.index-benefits{
		display: grid;
		grid-template-areas: 'A B' 'C D';
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		margin: 8px 0px;
	}

	.index-benefits .ib-a{
		grid-area: A;
	}

	.index-benefits .ib-b{
		grid-area: B;
	}

	.index-benefits .ib-c{
		grid-area: C;
	}

}

@media
only screen and (max-width: 1182px){
	.students-benefits{
		display: flex;
		flex-direction: column;
		gap: 32px;
		margin: 8px 0px;
	}
}

@media
only screen and (min-width: 1182px){
    
	.students-benefits{
		display: grid;
		grid-template-areas: 'A B' 'C C' 'D D';
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		margin: 8px 0px;
	}

	.students-benefits .ib-a{
		grid-area: A;
	}

	.students-benefits .ib-b{
		grid-area: B;
	}

	.students-benefits .ib-c{
		grid-area: C;
	}

	.students-benefits .ib-d{
		grid-area: D;
	}

}

.checklist{
	padding: 16px;
	border-radius: 8px;
	display: flex;
	gap: 8px;
	flex-direction: column;
	background: var(--color-checklist);
	justify-content: center;
}

.checklist .point{
	border-radius: 10px;
	min-height: 20px;
	font-size: 12px;
	display: flex;
	gap: 8px;
	background: var(--bg);
	color: var(--color-checklist);
	padding-right: 5px;
	align-items: center;
	line-height: 1;
	font-weight: 600;
	box-shadow: 2px 4px rgba(255, 255, 255, 0.15);
}

.checklist .point svg{
	color: var(--color-checklist-point);
	width: 20px !important;
	height: 20px !important;
	top: 1px;
	position: relative;
}

.checklist .point .tick{
	stroke: var(--bg);
}

.card{
	border-radius: 16px;
	box-shadow: 0 2px 15px 0 var(--card-shadow);
	padding: 16px;
}

.icon-card{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.icon-card .icon svg{
	height: 200px;
}

.expl-card, .expl-card-collapsed{
	display: flex;
	gap: 32px;
	text-align: left;
	background: var(--bg);
	flex-direction: column;
	text-decoration: unset;
	transition: .4s ease;
}

.expl-card-collapsed svg{
	height: 250px;
	max-width: 100%;
}

.expl-card-collapsed img{
	max-height: 300px;
	max-width: 100%;
}

.expl-card-img{
	display: flex;
	justify-content: center;
}

.expl-card svg, .expl-card img{
	height: 100px;
}

.expl-card svg.fa-arrow-up-right-from-square{
	height: 1em;
}

.expl-card .close-icon svg{
	height: unset;
	color: black;
}

.expl-card a{
	text-decoration: none;
	/*color: #333 !important;*/
}

.expl-card .title, .expl-card-collapsed .title{
	font-weight: 500;
	font-size: 1.2rem;
	padding-bottom: 16px;
}

.expl-card .expl{
	text-align: justify;
	line-height: 1.4;
	color: #333;
}

.expl-card-collapsed .expl{
	display: flex;
	justify-content: space-between;
}

.expl-card .expl svg{
	height: 1em;
}

.expl-card .expl ol{
	color: var(--color-font);
	font-weight: 600;
	margin: 8px 0;
	list-style: none;
}

.expl-card .expl ol li{
	padding: 4px 0px;
}

.quiz-card{
	text-align: left;
}

.quiz-card img{
	max-width: 100%;
}

.teaser{
	color: var(--color-teaser);
}

.more{
	cursor: pointer;
	text-align: right;
	color: black;
}

.more:hover{
	color: var(--color-more);
}

.paragraph{
	text-align: left;
}

.license-terms{
	margin: 20px;
	text-align: left;
}

.button-pair{
	display: flex;
	width: fit-content;
	border: 1px solid;
	border-radius: 64px;
	padding: 0px 8px;
	margin: 0 auto;
}

.button{
	font-weight: 600;
	font-size: 15px;
	line-height: 15px;
	border-radius: 64px;
	padding: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-button-font);
	background: var(--color-button-background);
	margin: 8px 0px;
	transition: .3s ease;
	border: none;
	text-decoration: none;
	gap: 8px;
}

.button:hover{
	background: var(--color-button-background-hover);
	color: var(--color-button-font1);
}

.button a{
	color: var(--color-button-font) !important;
	flex-grow: 1;
}

.button button{
	display: none;
}

.button input{
	display: none;
}

.second-button{
	font-weight: 600;
	font-size: 15px;
	line-height: 15px;
	border-radius: 64px;
	padding: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 8px 0px;
	transition: .3s ease;
	border: none;
	text-decoration: none;
	gap: 8px;
}

.price-tiles{
	display: grid;
	gap: 24px;
}

@media
only screen and (min-width: 600px) and (max-width: 1000px){
	.price-tiles{
		grid-template-areas: 'A B';
	}
}

@media
only screen and (min-width: 1001px){
	.price-tiles{
		grid-template-areas: 'A B C';
	}
}

.price-tile{
	border-radius: 16px;
	background: var(--color-checklist);
	padding: 16px;
	color: var(--bg);
	text-align: center;
	cursor: pointer;
}

.price-tile .price-tile-p{
	text-wrap: nowrap;
}

.price-tile .price{
	font-size: 5rem;
	font-weight: 600;
}

.price-tile .desc{
	font-size: 1.6rem;
}

.cp-spinner, .cp-round{
	--border-w:solid 2px var(--color-spinner-background);
	--border-red:solid 2px;
}

.cp-spinner{
	width:var(--size);
	height:var(--size);
	box-sizing:border-box;
	position:relative;
}

.cp-round:before{
	border-radius:50%;
	content:" ";
	width:var(--size);
	height:var(--size);
	display:inline-block;
	box-sizing:border-box;
	border-top:var(--border-w);
	border-right:var(--border-w);
	border-bottom:var(--border-w);
	border-left:var(--border-w);
	position:absolute;
	top:0;
	left:0;
}

.cp-round:after{
        border-radius:50%;
        content:" ";
        width:var(--size);
        height:var(--size);
        display:inline-block;
        box-sizing:border-box;
        border-top:var(--border-red);
        border-right:solid 2px transparent;
        border-bottom:solid 2px transparent;
        border-left:solid 2px transparent;
        position:absolute;
        top:0;
        left:0;
        animation:cp-round-animate 1s ease-in-out infinite;
}

@keyframes cp-round-animate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.quiz-form textarea{
	width: 100%;
	height: 80px;
}

.upload-error{
	text-align: center;
	border: 3px solid #79221B;
	border-radius: 10px;
	font-weight: bold;
	background: #ffffe1;
	padding: 8px;
	margin: 7px;
}

.comp-anim-checkbox{
   position: relative;
   display: flex;
   align-items: center;
   --width-checkbox: 36px;
   --width-half-checkbox: calc(var(--width-checkbox)/2);
   --height-checkbox: 20px;
   --height-half-checkbox: calc(var(--height-checkbox)/2);
   --color-button: #E4552D;
   --color-tick: #FFF;
}
.comp-anim-checkbox input{
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   outline: none;
   border-radius: var(--width-half-checkbox);
   width: var(--width-checkbox);
   height: var(--height-checkbox);
   vertical-align: middle;
   border: 1px solid;
   margin: 0px;
}
.comp-anim-checkbox input + label svg .tick{
  display: none;
}
.comp-anim-checkbox input + label{
    position: absolute;
    width: var(--height-checkbox);
    height: var(--height-checkbox);
    border-radius: var(--height-half-checkbox);
    transition: 0.5s;
    background: transparent;
    color: var(--color-button);
    left: 2px;
}
.comp-anim-checkbox input + label svg{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: unset;
}
.comp-anim-checkbox input:checked + label{
  transform: translateX(calc(var(--width-half-checkbox) - 2px));
}

.comp-anim-checkbox input:checked + label svg .tick{
   display: block;
   stroke: var(--color-tick);
}

.comp-anim-checkbox-expl{
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
}

a[href^="http://"]:not([href*="jgsen.de"]),
a[href^="https://"]:not([href*="jgsen.de"]),
.external{
    color: var(--color-external);
}