@charset "UTF-8";

/*--Gerneral--*/
html {
	font-size:100%;
}

:focus {
  outline: 2px solid #FF0062 !important;
}

body {
	font-size:100%;
	font-size: 1.125rem;
	font-family: Helvetica, "sans-serif";
	margin: 0;
	padding: 0;
	background-color: #000;
	color: #fff;
}

a:-webkit-any-link:focus-visible {
	outline: none !important;
	outline-offset: 0;
}

a:focus-visible {
	outline: none !important;

}

a, a:active, a:focus, a:visited, a:link {
	text-decoration: none;
	color: #fff;
}

p a {
	text-decoration: underline !important;
	color: #FF0062 !important;
	padding: 0;
	margin: 0;
}

p a:hover {
	text-decoration: none !important;
	color: #FF0062 !important;
	padding: 0;
	margin: 0;
}

p strong {
	color: #fff;
	font-weight: 900;
}

a:hover, a:visited:hover {
	color: #FF0062;
}

.mobile-br {
	display: none;
}

h1 {
	font-size: 2.8125rem;
	line-height: 3.125rem;
	color: #FF0062;
	font-weight: bold;
	text-transform: uppercase;
}

h2, h3 {
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 2.8125rem;
	line-height: 3.125rem;
}

.h4 {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1.5625rem;
	line-height: 1.9375rem;
	color: #fff;
}

h4, h5, h6 {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1.25rem;
	line-height: 1.8125rem;
	color: #fff;
	margin: 0;
	padding: 0;
}

.light {
	font-weight: 300 !important;
}

no-text-wrap {
	word-break: keep-all;
}

.active {
	color: #FF0062 !important;
}

.website-background {
	position: relative;
	z-index: 1;
}

.themenschwerpunkte-content {
	max-width: 1200px;
	margin: 0px auto;
	padding-left: 40px;
	padding-right: 40px;
}

.banner {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
}
.banner-content {
	display: flex;
	flex-direction: row;
	max-width: 80%;
	margin: 0px auto;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.logo-subline {
	position: relative;
	left: -12.4375rem;
	top: 2.25rem;
}

.logo-line {
	position: relative;
	top: 1.9375rem;
	width: 108%;
	border-bottom: 4px solid #fff;
	z-index: 1
}

.logo-subline {
	font-size: 1rem;
	color: #fff;
	min-width: 260px;
}

.themen-menu-content {
	position: relative;
	top: 0.4375rem;
	z-index: 2;
}


.thema-menu-banner {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 2.8125rem;
	line-height: 2.375rem;
	color: #fff;
	letter-spacing: -2px;
	
}

.thema-menu-banner.webdesign {
	margin-left: 1.5rem;
}

#thema-menu-banner-webdesign {
	animation-name: logo-animation-animation1;
	animation-duration: 30s;
  	animation-iteration-count: infinite;
}

	@-webkit-keyframes logo-animation-animation1 {
		0% {
			color: #ff0062 !important;
		}

		15% {	
			color: #ff0062 !important;
		}

		20% {	
			color: #ff0062 !important;
		}
		
		25% {
			color: #fff !important;
		}
		
		100% {	
			color: #ff0062 !important;
		}
}






.thema-menu-banner.uiuxdesign {
	margin-left: 1.5rem;
}

.thema-menu-banner.webentwicklung {
	margin-left: 1.5rem;
}

.thema-menu-banner.grafikdesign {
	margin-left: 3.5rem;
}

.thema-menu-banner.screendesign {
	margin-left: 3.5rem;
}

.thema-menu-banner.motiondesign {
	margin-left: 5.5rem;
}

.thema-menu-banner.marketing {
	margin-left: 6.5rem;
}

.thema-menu-banner.low-code {
	margin-left: 3.5rem;
}

.thema-menu-banner.ki {
	margin-left: 5.5rem;
}

.arrow {
	position: absolute;
	top: 95vh;
	-webkit-animation: arrow-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	}

	@-webkit-keyframes arrow-animation {
		0% {
			top: 95vh;
		}
		
		5% {
			top: 90vh;
		}

		10% {	
			top: 95vh;
		}
		
		14% {
			top: 92vh;
		}
		
		17% {	
			top: 95vh;
		}
}


.button-active {
	padding-top: 10px;
	padding-bottom: 10px; 
	padding-left: 20px;
	padding-right: 20px;
	color: #000 !important;
	background-color: #FF0062;
	border: 2px solid #FF0062;
	border-radius: 4px;
	text-decoration: none;
	font-family: Helvetica, "sans-serif";
	font-weight: normal;
	font-size: 16px;
	transition: 0.5s;
	text-align: center;
}

.button-active:hover {
	border-color: #FF0062;
	background-color: #FF0062;
	color: #000 !important;
}

.font-white {
	color: #fff !important;
}

p {
	font-size: 16px;
	line-height: 25px;
	color: #fff;
	font-weight: normal;
}

.headline-subtext {
	margin-bottom: 50px;
}

.buttonset {
	margin-top: 20px;
}

.uppercase {
	text-transform: uppercase;
}

.font-color-primary {
	color: #FF0062;
}

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

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-gap {
	display: inline-flex;
  	flex-wrap: wrap;
	gap: 5px;
}

.visibility-hidden {
	visibility: hidden;
}

ul, li {
	color: #fff;
	font-size: 16px;
	line-height: 25px;
	font-weight: lighter;
}

ul {
	margin: 0; 
	padding: 0;
}

/*--Akkordeon--*/
ol, ul { list-style: none }

input.hidden {
	display:none;
}

.nav__list {
	margin-top: 160px;
}

.nav__list label {
	cursor: pointer;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 2.8125rem;
	line-height: 3.125rem;
	letter-spacing: -2px;
}

.group-line {
	width: 100%;
	border-bottom: 4px solid #fff;
	position: relative;
	top: -0.75rem;
	margin-left: 4px;
}

.group-line-subtext {
	width: 100%;
	border-bottom: 4px solid #fff;
	position: relative;
	top: -0.4375rem;
	margin-left: 4px;
}

.group-list {
	max-height: 0;
	overflow: hidden;
}

.group-content {
	margin-bottom: 80px;
}

.group-spacer {
	margin-left: 7px;
}

.vertikal-spacer-standard {
	height: 40px;
}

.vertikal-spacer-big {
	height: 80px;
}

.group-spacer-two {
	margin-left: 50px;
}

.menu-placeholder {
	height: 0;
}

/*--Akkordeon aufklappen--*/
.nav__list input[type=checkbox]:checked + label + ul {
	max-height: 5000px;
}


/*--Minus Button einblenden (Senkrechten Strich des Plus Button ausblenden)--*/
.nav__list input:checked ~ * .plus-line {
	  visibility: collapse;
}

.plus-line {
	visibility: visible;
}


/*--Beispiel Content mit Checkbox ausblenden--*/
input:checked + .toggle { display: none; }

.nav__list input:checked + .toggle { display: none; }



select {
	padding-left: 10px;
	padding-right: 10px;
	min-width: 380px;
	height: 38px;
	max-height: 38px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 4px;
	text-decoration: none;
	font-family: Helvetica, "sans-serif";
	font-weight: normal;
	font-size: 1rem;
	transition: 0.5s;
	cursor: pointer;
	 margin: 0;      
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #000;
	background-image:
	linear-gradient(45deg, transparent 50%, white 50%),
	linear-gradient(135deg, white 50%, transparent 50%),
	linear-gradient(to right, #ccc, #ccc);
	background-position:
	calc(100% - 20px) calc(1em + 2px),
	calc(100% - 15px) calc(1em + 2px),
	calc(100% - 2.5em) 0.5em;
	background-size:
	5px 5px,
	5px 5px,
	1px 1.5em;
	background-repeat: no-repeat;
}

select:focus {
  background-image:
    linear-gradient(45deg, #FF0062 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #FF0062 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: #FF0062;
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}


[data-value=themen1] ~ #themen1 {
display: block;
}

[data-value=themen2] ~ #themen2 {
    display: block;
}

[data-value=themen3] ~ #themen3 {
    display: block;
}

[data-value=themen4] ~ #themen4 {
    display: block;
}

[data-value=themen5] ~ #themen5 {
    display: block;
}


[data-value=themen6] ~ #themen6 {
    display: block;
}

[data-value=themen7] ~ #themen7 {
	display: block;
}

[data-value=themen8] ~ #themen8 {
    display: block;
}

[data-value=themen9] ~ #themen9 {
    display: block;
}

[data-value=themen10] ~ #themen10 {
    display: block;
}

[data-value=themen11] ~ #themen11 {
    display: block;
}

[data-value=themen12] ~ #themen12 {
    display: block;
}

[data-value=themen13] ~ #themen13 {
    display: block;
}

[data-value=themen14] ~ #themen14 {
    display: block;
}

[data-value=themen15] ~ #themen15 {
    display: block;
}

[data-value=themen16] ~ #themen16 {
    display: block;
}

[data-value=themen17] ~ #themen17 {
    display: block;
}

[data-value=themen18] ~ #themen18 {
    display: block;
}

[data-value=themen19] ~ #themen19 {
    display: block;
}

[data-value=themen20] ~ #themen20 {
    display: block;
}

#themen1,
#themen2,
#themen3,
#themen4,
#themen5,
#themen6,
#themen7,
#themen8,
#themen9,
#themen10,
#themen11,
#themen12,
#themen13,
#themen14,
#themen15,
#themen16,
#themen17,
#themen18,
#themen19,
#themen20 {
	display: none;
	width: 100%;
}


.standard-button {
	text-align: center; 
	padding-left: 30px;
	padding-right: 30px;
	min-width: 210px;
	height: 38px;
	max-height: 38px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 4px;
	text-decoration: none;
	font-family: Helvetica, "sans-serif";
	font-weight: normal;
	font-size: 1rem;
	transition: 0.5s;
	cursor: pointer;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}

.standard-button:hover {
	border-color: #FF0062;
	background-color: #FF0062;
	color: #000 !important;
}

.website-links {
	padding: 5px;
	border: 2px solid #fff;
	color: #fff;
	font-weight: normal;
	margin-top: 10px;
	text-decoration: none;
	transition: 0.5s;
	cursor: pointer;
	width: 100%;
}

.website-links:hover {
	padding: 5px;
	border: 2px solid #FF0062;
	background-color: #FF0062;
	color: #000 !important;
}

.links-content {
	display: flex;
	flex-direction: column;
	width: 100%;
}


/*--Scrollbar--*/
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	outline: 2px solid #000;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #707070;
	border: 2px solid #707070;
	width: 12px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555; 
}

/*--Social Media Icons--*/
.youtube:hover rect,
.xing:hover rect,
.linkedin:hover rect,
.facebook:hover rect {
	fill: #FF0062;
	transition: 0.5s;
}

.website-content {
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100vh;
	position: absolute;
	z-index: 17;
}

/*--Startlogo Animation Overlay--*/
.logo-animation-section-overlay {
	position: fixed;
	z-index: 10;
	padding-top: 52vh;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: #000;
	-webkit-animation: logo-animation-overlay-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes logo-animation-overlay-animation {
		0% {
			width: 100%;
			background-color: #000;
		}

		75% {	
			width: 100%;
			background-color: #000;
			opacity: 1;
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		}

		85% {	
			width: 100%;
			background-color: #000;
			opacity: 1;
			clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
		}
		
		
		97% {	
			width: 100%;
			background-color: rgba(0,0,0,0);
			opacity: 0;
			clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
		}
		
		
		100% {	
			width: 0%;
			background-color: rgba(0,0,0,0);
			opacity: 0;
			clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
		}
}

.logo-animation-content {
	display: flex; 
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	-webkit-animation: logo-animation-content-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes logo-animation-content-animation {
		0% {
			margin-left: 0;
			opacity: 1;
		}

		70% {
			margin-left: 0;
			opacity: 1;
		}

		95% {	
			margin-left: 0;
			opacity: 1;
			
		}
		

		100% {	
			margin-left: 0;
			opacity: 0;
			
		}
}

.logo-animation-point {
	width: 5px;
	height: 5px;
	background-color: #fff;
	position: absolute;
	z-index: 11;
	margin-top: -45%;
	border-radius: 0%;
	-webkit-animation: point-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes point-animation {
		0% {
			opacity: 0;
			background-color: #FF0062;
		}

		5% {
			opacity: 1;	
			background-color: #FF0062;
		}

		20% {
			margin-top: 50px;	
			margin-left: -153px;
			width: 10px;
			height: 10px;
			background-color: #FF0062;
		}

		22% {
			margin-top: 45px;
			margin-left: -153px;
			width: 10px;
			height: 10px;
			background-color: #FF0062;
		}


		35% {
			margin-top: 5px;
			margin-left: -286px;
			opacity: 1;
			width: 2px;
			height: 2px;
			background-color: #FF0062;

		}

		36% {
			margin-top: 5px;
			margin-left: -286px;
			background-color: #fff;
			opacity: 0;	
		}

		100% {
			margin-top: 5px;
			margin-left: -286px;
			opacity: 0;		
		}
}

.logo-animation-line-one {
	width: 70px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	z-index: 12;
	transform: rotate(17deg);
	margin-left: -221px;
	margin-top: 25px;
	-webkit-animation: line-one-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes line-one-animation {
		0% {
			margin-top: 45px;
			margin-left: -153px;
			width: 0px;
			height: 2px;
			background-color: #FF0062;
		}

		5% {
			margin-top: 45px;
			margin-left: -153px;
			width: 0px;
			height: 2px;
			background-color: #FF0062;
		}

		23% {
			margin-top: 45px;
			margin-left: -153px;
			width: 0px;
			height: 2px;
			background-color: #FF0062;
		}

		34% {
			margin-left: -221px;
			margin-top: 25px;
			width: 70px;
			height: 2px;
			background-color: #FF0062;
		}

		45% {
			background-color: #fff;
		}

		100% {	
			opacity: 1;
		}
}

.logo-animation-line-two {
	width: 70px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	z-index: 13;
	transform: rotate(-72deg);
	margin-left: -266px;
	margin-top: -63px;
	-webkit-animation: line-two-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes line-two-animation {
		0% {
			opacity: 0;
			background-color: #FF0062;
		}

		32% {
			opacity: 0;
			background-color: #FF0062;
		}

		33% {
			opacity: 1;
			transform: rotate(17deg);
			margin-left: -221px;
			margin-top: 25px;
			background-color: #FF0062;
		}

		38% {
			transform: rotate(-72deg);
			margin-left: -266px;
			margin-top: -63px;
			background-color: #FF0062;
		}

		45% {
			background-color: #FFF;
		}

		100% {	
			opacity: 1;
		}
}

.logo-animation-line-three {
	width: 74px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	z-index: 14;
	transform: rotate(17deg);
	margin-left: -176px;
	margin-top: -108px;
	-webkit-animation: line-three-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes line-three-animation {
		0% {
			opacity: 0;
			background-color: #FF0062;
		}

		38% {
			opacity: 0;
			background-color: #FF0062;
		}

		40% {
			opacity: 1;
			transform: rotate(-68deg);
			margin-left: -261px;
			margin-top: -60px;
			background-color: #FF0062;
		}

		48% {
			transform: rotate(17deg);
			margin-left: -176px;
			margin-top: -108px;
			background-color: #FF0062;
		}

		54% {
			background-color: #FFF;
		}

		100% {	
			opacity: 1;
		}
}


.logo-animation-line-four {
	width: 70px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	z-index: 15;
	transform: rotate(-72deg);
	margin-left: -131px;
	margin-top: -17px;
	-webkit-animation: line-four-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes line-four-animation {
		0% {
			opacity: 0;
			background-color: #FF0062;
		}

		45% {
			opacity: 0;
			background-color: #FF0062;
		}

		47% {
			opacity: 1;
			transform: rotate(17deg);
			margin-left: -167px;
			margin-top: -105px;
			background-color: #FF0062;
		}

		54% {
			transform: rotate(-72deg);
			margin-left: -131px;
			margin-top: -17px;
			background-color: #FF0062;
		}

		60% {
			background-color: #FFF;
		}

		100% {	
			opacity: 1;
		}
}

.logo-animation-text {
	font-family: Helvetica, "sans-serif";
	font-size: 21px;
	font-weight: bold;
	color: #fff;
	position: absolute;
	z-index: 16;
	-webkit-animation: logotext-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes logotext-animation {
		0% {
			clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
		}

		54% {
			clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
		}

		65% {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		}

		100% {	
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		}
}

.logo-animation-subline {
	position: relative;
	top: 18px;
	left: 69px;
	font-size: 1rem;
	-webkit-animation: logosubline-animation 5.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes logosubline-animation {
		0% {
			clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
		}

		54% {
			clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
		}

		65% {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		}

		100% {	
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		}
}

/*--Menu--*/
.menu-link.active
.menu-link.active h2,
.menu-link.active h3,
.menu-link.active h4,
.menu-link.active h5,
.menu-link.active h6,
.menu-link.active h7 {
	color: #FF0062;
}

.menu-link h2,
.menu-link h3,
.menu-link h4,
.menu-link h5,
.menu-link h6,
.menu-link h7 {
	font-family: Helvetica, "sans-serif";
	font-weight: 900;
	font-size: 45px;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	transition: 0.5s;
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
	cursor: pointer;
}

.menu-link h2:hover,
.menu-link h3:hover,
.menu-link h4:hover,
.menu-link h5:hover,
.menu-link h6:hover,
.menu-link h7:hover {
	color: #FF0062 !important;
}


#youtube:hover rect,
#facebook:hover rect,
#linkedin:hover rect,
#xing:hover rect {
	fill: #FF0062;
}

/*--Content--*/
.themen-svg {
	margin-top: 25px;
	margin-left: 40px;
}

.themenschwerpunkte-select-buttonset {
	margin-bottom: 40px;
}

.skills-content {
	min-height: 500px;
	margin-bottom: 40px;
}

.halbprozent {
	width: 50%;	
}

.erfahrungen-section {
	display: flex;
	flex-direction: row;
	min-height: 190px;
}

.erfahrungen {
	min-width: 440px;
}

.erfahrungen-svg {
	min-height: 175px;
	margin-right: 40px;
}




/*--Modalbox: allgemein--*/
.modal-close {
	padding-left: 30px;
	padding-right: 30px;
	width: 210px;
	height: 38px;
	max-height: 38px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 4px;
	text-decoration: none;
	font-family: Helvetica, "sans-serif";
	font-weight: normal;
	font-size: 1rem;
	transition: 0.5s;
	cursor: pointer;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}

.modal-close:hover {
	background-color: #FF0062;
	color: #000 !important;
	border-color: #FF0062;
}

.modalbox-header {
	position: fixed;
	background-color: #000;
	width: 80vw;
	padding-top: 40px;
	padding-bottom: 40px;
	z-index: 3;
	top: 0;
	justify-content: flex-end;
}

.open-modal-wp {
	color: #fff;
}

.modal-content-scroll-wp {
	width: 100%;
	height: max-content;
	padding-bottom: 80px;
}

/*--Modalbox: Datenschutz--*/
.h2-line {
	border-bottom: 4px solid #fff;
	width: 100%;
	position: relative;
	top: -2.875rem;
}

.modal-headline {
	margin-top: 60px;
}

.open-modal-d {
	color: #fff;
}

.modal-content-scroll-d {
	width: 100%;
	height: max-content;
	padding-bottom: 80px;
}

.modal-window-d {
	position: fixed;
	background-color: #000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	padding-top: 40px;
	padding-bottom: 40px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s;
	overflow: auto;
	display: flex;
	justify-content: center;
}

.modal-window-d:target {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.modal-window-d > div {
	width: 80%;
	margin: 0px auto;
	position: absolute;
	padding: 2em;
	background: #000;
	overflow: auto;
}





/*--Modalbox: Impressum--*/
.impressum-hinweise-headline {
	min-width: 526px;
}
.open-modal {
	color: #fff;
}

.modal-content-scroll {
	width: 100%;
	height: max-content;
	padding-bottom: 80px;
}

.modal-window {
	position: fixed;
	background-color: #000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	padding-top: 40px;
	padding-bottom: 40px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s;
	overflow: auto;
	display: flex;
	justify-content: center;
}

.modal-window:target {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.modal-window > div {
	width: 80%;
	margin: 0px auto;
	position: absolute;
	padding: 2em;
	background: #000;
	overflow: auto;
}


/*--Footer--*/
.footer {
	color: #fff;
	max-width: 1200px;
	margin: 0px auto;
	padding-top: 80px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 40px;
}

.footer-bottom-menu {
	display: flex;
	flex-direction: row;
}

.footer-bottom-link {
	font-size: 1rem;
	color: #fff;
	padding-left: 10px;
	padding-right: 10px;
}

.footer-bottom-link:hover {
	color: #FF0062;
}

@media only screen and (max-width: 1344px) and (min-width: 769px) {
	.logo-content {
		position: absolute;
		top: 8vh;
		left: 32% !important;
		transform: scale(1.5);
	}
	
	.logo-line {
		display: none;
	}
	
	.logo-subline {
		position: absolute;
		top: 21vh;
		left: 43.3% !important;
		transform: scale(1.5);
	}
	
	.halbprozent {
		width: 100%;
	}

	
	.halbprozent:nth-child(1) {
		margin-bottom: 40px;
	}
	
	.flex-row.mobile-column {
		flex-direction: column;
	}
	
	.logo-animation-content {
		margin-top: -40px;
	}
	
	.themen-menu-content {
		position: absolute;
		top: 38vh;
		left: 28vw;
	}
	
	.themenschwerpunkte-content {
		margin-top: -80px;
	}
	
	.arrow {
		margin-top: -80px !important;
	}
	
	.erfahrungen-section {
	display: block;
}

.erfahrungen-section div {
	width: 100%;
	margin-bottom: 20px;
	text-align: center;
}
	
	.modalbox-header {
		width: 85%;
		left: 75px;
	}
	
	.modal-content-scroll div {
	}
	
	.modal-window > div {
		width: 85vw;
	}
	
	.website-links {
		width: 97%;
	}
}

@media only screen and (max-width: 768px) {
.erfahrungen-section {
	display: block;
}

.erfahrungen-section div {
	width: 100%;
	margin-bottom: 20px;
	text-align: center;
}
	.group-line-subtext {
		margin-left: -32vw;
	}
	
	.group-line {
		margin-left: 0 !important;
		width:  -webkit-fill-available;
	}
	
	.arrow {
		margin-top: -80px !important;
	}
	
	.themenschwerpunkte-content {
		margin-top: -180px;
	}
	
	.modal-window {
		width: 100vw;
	}
	
	.modal-content-scroll {
		max-width: 700px;
	}
	
	.modalbox-header {
		width: 100%;
		left: 0;
		padding-right: 40px;
	}
	
	.modal-content-scroll div:nth-child(2) {
		max-width: 100vw;
	}
	
	.modal-window > div {
		width: 85vw;
	}
	
	.modal-close {
		position: relative;
		left: -40px;
	}
}

@media only screen and (max-width: 768px) and (min-width: 450px) {
	.logo-content {
		position: absolute;
		top: 110px;
		left: 30%;
		transform: scale(1);
	}
	
	.logo-line {
		display: none;
	}
	
	.logo-subline {
		position: absolute;
		top: 190px;
		left: 41.3%;
		transform: scale(1);
	}
	
	.halbprozent {
		width: 100%;
	}
	
	.h2-line {
		display: none;
	}
	
	h2, h3 {
		font-size: 1.825rem;
		line-height: 1.5rem;
	}
	
	.mobile-br {
		display: block;
	}
	
	.impressum-hinweise-headline {
		min-width: auto;
	}

	
	.halbprozent:nth-child(1) {
		margin-bottom: 40px;
	}
	
	.flex-row.mobile-column {
		flex-direction: column;
	}
	
	.flex-row.flex-gap.buttonset {
		display: flex;
		flex-direction: column;
		align-content: center;
	}
	
	.standard-button {
		width: 90%;
		margin-bottom: 10px;
	}
	
	.content-social-media-set {
		margin-top: 30px;
		
	}
	
	.footer-bottom-link {
		padding-left: 0;
	}
	
	.light.mobile-none {
		display: none;
	}
	
	.logo-animation-content {
		margin-top: -40px;
	}
	
	.arrow {
		margin-top: -120px !important;
	}
	
	.footer-bottom-link.datenschutz {
		margin-left: 10px !important;
	}
	.website-links {
		width: 97%;
	}
}

@media only screen and (max-width: 449px) {
	.logo-content {
		position: absolute;
		top: 22px;
		margin-left: -24vw !important;
		transform: scale(0.8);
	}
	
	.logo-line {
		display: none;
	}
	
	.logo-subline {
		position: absolute;
		top: 91px;
		left: 23vw !important;
		transform: scale(0.8);
	}
	
	.halbprozent {
		width: 100%;
	}

	
	.halbprozent:nth-child(1) {
		margin-bottom: 0;
	}
	
	.flex-row.mobile-column {
		flex-direction: column;
		margin-bottom: 0 !important;
	}
	
	.flex-row.flex-gap.buttonset {
		display: flex;
		flex-direction: column;
		align-content: center;
	}
	
	.standard-button {
		width: 78%;
		margin-bottom: 10px;
	}
	
	.erfahrungen {
		min-width: auto;
	}
	
	.content-social-media-set {
		margin-top: 30px;
		
	}
	
	.thema-menu-banner {
		font-size: 1.825rem;
		line-height: 1.5rem;
	}
	
	h2, h3 {
		font-size: 1.825rem;
		line-height: 1.8rem;
	}
	
	.h2-line {
		display: none;
	}
	
	.mobile-br {
		display: block;
	}
	
	.impressum-hinweise-headline {
		min-width: auto;
	}
	
	.nav__list label {
		font-size: 1.3rem;
		line-height: 1.5rem;
	}
	
	.h4 {
		font-size: 1.2625rem;
		line-height: 1.725rem;
	}
	
	.arrow-plus {
		width: 16px;
		height: 16px;
	}
	
	select {
		width: 100%;
		min-width: auto;
	}
	
	.themen-svg {
		position: relative;
		left: -35.5%;
		transform: scale(0.4);
		top: -80px;
		min-height: 160px;
	}
	
	.group-line {
		margin-left: -28px !important;
	}
	
	.erfahrungen-section {
		flex-direction: column;
		align-content: center;
		align-items: center;
	}
	
	.erfahrungen-svg {
		margin-right: 0;
		margin-bottom: 30px;
	}
	
	.nav__list input[type=checkbox]:checked + label + ul {
		max-height: 7000px;
	}
	
	.ueber-mich {
		margin-top: -200px;
	}
	
	.flex-gap.themenschwerpunkte-select-buttonset {
		width: 100%;
	}
	
	.skills-svg {
		width: 320px;
		height: auto;
	}
	.skills-svg-info {
		width: 306px;
		height: auto;
		margin-bottom: 40px;
	}
	
	.website-links {
		width: 95%;
	}
	
	.footer-bottom-link {
		padding-left: 0;
	}
	
	.light.mobile-none {
		display: none;
	}
	
	.logo-animation-content {
		margin-top: -40px;
	}
	
	.logo-animation-subline {
		font-size: 13px;
		left: 50px;
	}
	
	.arrow {
		margin-top: -120px !important;
	}
	
	.themen-menu-content {
		position: absolute;
		top: 40vh;
	}
	
	.footer-bottom-link.datenschutz {
		margin-left: 10px !important;
	}
	
	.group-line-subtext {
		margin-left: 0 !important;
	}
	
	.website-links {
		width: 95% !important;
	}
}

@media only screen and (max-height: 768px) and (min-height: 701px) {
	.arrow {
		margin-top: -80px !important;
	}
}

@media only screen and (max-height: 700px) {
	.banner {
		height: 700px !important;
	}
	
	.banner-content {
		margin-top: 450px;
	}
	
	.logo-animation-content {
		margin-top: -20px;
	}
	
	.arrow {
		margin-top: -40px !important;
	}
	
	.logo-content {
		left: 28.5%;
	}
	
	.logo-subline {
		left: 42.3%;
	}
	
	.website-links {
		width: 97%;
	}
}

@media only screen and (max-height: 450px) {
	.logo-content {
		left: 22.5%;
		margin-top: -20px;
	}
	
	.logo-subline {
		left: 34.3%;
		margin-top: -25px;
	}
	
	.themen-menu-content {
		top: -35vh;
	}
	
	.arrow {
		margin-top: -80px !important;
	}
	
	.themen-svg {
		position: relative;
		transform: scale(0.8);
		top: -40px;
		min-height: 160px;
		left: -7vw;
	}
	
	.standard-button {
		width: 89%;
	}
	
	.logo-animation-content {
		margin-top: -28px;
		margin-left: -78px !important;
	}
	
	.ueber-mich {
		margin-top: -80px;
	}
	
	.website-links {
		width: 97%;
	}
}