@font-face {font-display: swap;  font-family: 'Oxanium'; font-style: normal; font-weight: 200; src: url('/fonts/oxanium/200.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 300; src: url('/fonts/oxanium/300.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 400; src: url('/fonts/oxanium/400.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 500; src: url('/fonts/oxanium/500.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 600;src: url('/fonts/oxanium/600.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 700; src: url('/fonts/oxanium/700.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 800; src: url('/fonts/oxanium/800.woff2') format('woff2');}




/*** INLINE ICONS ***/
:root {
--ico_arrow1: url("data:image/webp;base64,UklGRnwFAABXRUJQVlA4WAoAAAAQAAAAWQAATQAAQUxQSHcCAAARkERbmyFJUbZt99j2yrZt27at1axs27Zt23ZlRTMy888YzyIiHDiS2za7TmOKKxnyC+i/bQsZqaUUk7g5XEslvs841cTVAUrqUL/CGWQudpPSxQVMlDnTTkwPWzCr8ePNKWEU5uT3w3UpoAXm7Nc9lQWmQBzz8fP20sKukK8fNxYXCPkTDOH71fmEWSGUb5Zkh2YZhvTlvBjsCqF9PjcARQ3MwvBNnyACj2c6BFjhYYRQhZ2fIQL3J5n5Yv2IyZxE6a227yvmb+LOGD2vFT7GZK4jknUPf4cI3Biq5swJttOG2Gx+Mg4RuNxLzonFmMwnO+Jgh7MMQIA531nKSn+2veac290vJgAC8dOtxeQVJthWiLgbGH4NIvD9WIOMZGZfIT9DI29jAL8dqJGO7CycQvyNTLjHn4O1UTonkDcGwVjmdJwPH+ZwfXES4m7sXbgX0OGbIOGDtQX42lWYrzVGBAcB5VEXsDwCz/22Z0By/wKnVu4Uz3rV9DhIvbraVw5SY6/SVGOR9RPmtr6qe75iAO+O0YP+lx1Mpdz2zxCRh1OtiLe1MItDN36EiDyZ46K3ZwBzJSivFiTR2Zu9XZYTvp98BtNPrilAZw/8aWNx4fp2hhdfdpahdNbYV5Xa+YjSme5kc0SLF1kq8tkOUkSPWuLs3F3+c5z3JUq9pRaTuD8rdywpKSkWjYT8HpfdYtSp5GIhUZpc4aQ0axdI4mYs5HfZTDqVTASMyh5OAjTid9uMWoUYBIUvSRijAY/dpFNKeF2HsSSBjQZcVoOKW15EkigxFnCn/RzNUPmCyo/Q+EMCZGhSEu8MFa6qONz+YCTKqar8tokAAFZQOCDeAgAA8BAAnQEqWgBOAD5FGIlEoqGhH3QAKAREsgBo+veub0X/IcqHzDIXfMtk/qr7gPEw6WXmA/Zn9Offh9BH++3yXn1P2N+DMiSzvI1VpNf3/KOqb39MUnBiQktVDq0plMYQww4x12DdIDzEW7VQntE00TuvbSTCTWD9nZ7NnqLpzGr7P41h17obXoqVwTqPj0AAAP79bkgAbf/qxJ9nxi+aS++fH+B0SH/+ZLU+b3JiFdxB1Hj9EpE+1fh+Y4BxzeLG51/WcnvUf+QxB/fyiWWR7FjD/A+3QwLmZ8177ne2HT2OpMD/j/5KIxgCzLBqlznb3rQcUL7nJFQLIvZECpqCWzSTQmIWtulfBYd30gjbNVd51Jpp4ECRvK+gDCgIbaNXga/kW73GnidP8ERs/V1whRxz/EeoOw+wF8bXXjezu8iK0GKn34XqfYzLYJj/d4KxLq2DTpnPLvpVaXgFTElEoG7/awF+9VLR6sKG4F7WRPzuHgSErPKtwSCJyFE4hT7tEHcpqvkHv+q6cOuCCDOh5K0q5z++zw4JZssOWdDhSlafl5wvUuAd6a3xtR4KwYCSSABj18SjfYWP3uHTsisKjgYov4gOa75UhGT3rGzvAi9eGA61XgqRsD0Lmrcxk9TT3VRJbjYX+F0qBbcl2gN3rb9UEExaIWrVyoazNwa7mwemwNjTBDHSH/4SgOB6mjuD3PeGx/Wzjb2q1NvefTYGuMNbY4mtKvoAzrki8yuNSbUIF3D6UQfHxwTSKgv8FcoYG7fEqQpd9OwXbECO93e+A6VdiLUIWnsiV7EEwGijGcbymuDE5zIv8nGO81UPmf9q/ugRjV0VJPJn6RDQ/sWCP//KD7MMUSsX9MqKLW57HS6EfmLk9AviE7vm1NldqtddRX6RIBPczOMsejjyfct4qD3f9985Xp/3d//V7vLN92wvgtcXet2Va0gkep+Dq31l+4fw///4N7DbwBgAAAA=");
}
/***********/



html {scroll-behavior: smooth; font-size: var(--fontsize); font-weight: 300; line-height: 1.5 !important;}
body {background: #FFF; color: #FFFFFFBB; letter-spacing: 0.0px; overflow-x: hidden;}
body.noscroll {overflow-y: hidden;}
* {margin: 0; padding: 0; list-style-type: none; font-family: 'Oxanium', Century Gothic,AppleGothic,verdana,tahoma; box-sizing: border-box;}
.clear {clear: both;}
.tac {text-align: center;}
.tar {text-align: right;}
.tal {text-align: left;}
.dp-b {display: block;}
.w100 {width: 100%;}
img {border: 0px; height: auto; hyphens: auto;}

@media screen and (max-width : 680px){ .vis_desk {display: none !important;} }
@media screen and (min-width : 681px){ .vis_mob {display: none !important;} }


.wrap {width: 100%; margin: 0 auto; max-width: calc(var(--maxwidth) + var(--gp1-r) + var(--gp1-r)); padding: 0 var(--gp1-r) !important;}



a {text-decoration: none; color: #FFFFFFBB; transition: color 0.3s;}
a:hover {color: #FFF;}

::selection {color: #000000BB; background: #5deaffCC;}

:root {--maxwidth: 1600px;}


@media screen and (max-width : 480px){ h1, h2, h3, h4 {hyphens: auto;} }



/*** FONT SCALES ***/
:root {
--fontsize: clamp(14px, calc(1.25vw + 1.5px), 20px);
--ratio: 1.5;
}

.fs-xl4 {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));}
.fs-xl3 {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio)));}
.fs-xl2 {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio)));}
.fs-xl1 {font-size: calc(var(--fontsize) * (var(--ratio)));}
.fs1 {font-size: var(--fontsize);}
.fs-xs1 {font-size: calc(var(--fontsize) / (var(--ratio)));}
.fs-xs2 {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio)));}
.fs-xs3 {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio)));}
.fs-xs4 {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));}
:root {
	--fs-xl4: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xl3: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xl2: calc(var(--fontsize) * (var(--ratio) * var(--ratio)));
	--fs-xl1: calc(var(--fontsize) * (var(--ratio)));
	--fs1: var(--fontsize);
	--fs-xs1: calc(var(--fontsize) / (var(--ratio)));
	--fs-xs2: calc(var(--fontsize) / (var(--ratio) * var(--ratio)));
	--fs-xs3: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xs4: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));
}
/***********/








/*** ABSTÄNDE ***/
:root {
--gp1-xl3: 256px;
--gp1-xl2: 128px;
--gp1-xl1: 64px;
--gp1: 32px;
--gp1-xs1: 16px;
--gp1-xs2: 8px;
--gp1-xs3: 4px;

--gp1-r-xl3: calc(var(--gp1-r) * 8);
--gp1-r-xl2: calc(var(--gp1-r) * 4);
--gp1-r-xl1: calc(var(--gp1-r) * 2);
--gp1-r: 32px;
--gp1-r-xs1: calc(var(--gp1-r) / 2);
--gp1-r-xs2: calc(var(--gp1-r) / 4);
--gp1-r-xs3: calc(var(--gp1-r) / 8);
}
@media screen and (max-width : 768px){
:root {--gp1-r: 16px;}
}

.gaps1 {display: flex; flex-direction: column; gap: var(--gp1-r);}
.gaps1-xl1 {display: flex; flex-direction: column; gap: var(--gp1-r-xl1);}
.gaps1-xl2 {display: flex; flex-direction: column; gap: var(--gp1-r-xl2);}
.gaps1-xl3 {display: flex; flex-direction: column; gap: var(--gp1-r-xl3);}
.gaps1-xs1 {display: flex; flex-direction: column; gap: var(--gp1-r-xs1);}
.gaps1-xs2 {display: flex; flex-direction: column; gap: var(--gp1-r-xs2);}
.gaps1-xs3 {display: flex; flex-direction: column; gap: var(--gp1-r-xs3);}
/***********/






/*** TRENNER ***/
.space-xs3 {height: var(--gp1-r-xs3);}
.space-xs2 {height: var(--gp1-r-xs2);}
.space-xs1 {height: var(--gp1-r-xs1);}
.space {height: var(--gp1-r);}
.space-xl1 {height: var(--gp1-r-xl1);}
.space-xl2 {height: var(--gp1-r-xl2);}
.space-xl3 {height: var(--gp1-r-xl3);}
/***********/






/*** VERLÄUFE / SCHATTEN ***/
:root {
--grd_bg01: linear-gradient(to right, #121214 0%,#111119 50%,#121214 100%);
--grd01: linear-gradient(to right, #b193ff 0%,#5deaff 100%);


--shd01: 0 4px 8px #233C4310, 0 4px 16px #233C4310, 0 4px 32px #233C4310;
}
/***********/




/*** BACKGROUNDS ***/
.bg01 {background: var(--grd_bg01); background: #111119;}
.bg02 {background: #060609;}
.bg03 {background: #000;}
.bg00 {background: linear-gradient(120deg, #06060d 0%, #0c1724 25%, #14081a 50%, #071211 75%, #0a0a12 100%);}
/***********/



.bg_overlay {position: fixed; top: 0px; width: 100%; height: 100vh; background: #ffffff00; opacity: .15; pointer-events: none; filter: blur(100px);}
.bg_overlay .svg1 {display: block; width: 60vh; position: absolute; left: 50vw; top: 5vh; animation: svgani01 80s linear infinite, svgani01b 94s ease-in-out infinite, svgani01c 1300s ease-in-out infinite;}
.bg_overlay .svg2 {display: block; width: 60vh; position: absolute; left: 35vw; top: 20vh; animation: svgani02 84s linear infinite, svgani02b 122s ease-in-out infinite;}
.bg_overlay .svg3 {display: block; width: 60vh; position: absolute; left: 25vw; top: 10vh; animation: svgani03 110s linear infinite, svgani03b 74s ease-in-out infinite;}
.cls-1 {fill: #30ffe4; stroke-width: 0px;}
.cls-2 {fill: #c74fff; stroke-width: 0px;}
.cls-3 {fill: #6cadf6; stroke-width: 0px;}
.zindex2 {z-index: 2; position: relative;}

@keyframes svgani01 {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes svgani02 {
	0% {transform: rotate(405deg);}
	100% {transform: rotate(45deg);}
}
@keyframes svgani03 {
	0% {transform: rotate(230deg);}
	100% {transform: rotate(590deg);}
}


@keyframes svgani01b {
	0% {left: 50vw;}
	50% {left: 30vw;}
	100% {left: 50vw;}
}
@keyframes svgani02b {
	0% {top: 20vh;}
	50% {top: 10vh;}
	100% {top: 20vh;}
}
@keyframes svgani03b {
	0% {left: 20vw;}
	50% {left: 45vw;}
	100% {left: 20vw;}
}

@keyframes svgani01c {
	0% {top: 5vh;}
	50% {top: 30vh;}
	100% {top: 5vh;}
}









/*** ÜBERSCHRIFTEN ***/
.title1 {display: block; margin: 0; font-size: var(--fs-xl3); line-height: 1.4 !important; font-weight: 500; hyphens: auto; letter-spacing: 1.5px;}
.title2 {display: block; margin: 0; font-size: var(--fs-xl1); line-height: 1.4 !important; font-weight: 200; hyphens: auto; letter-spacing: 1.5px;}

.colw {color: #fff;}
.colb {color: #000;}
.col1 {color: #000;}
.col2 {color: #00aaf0;}

.colgr01 {background: var(--grd01);  -webkit-background-clip: text;	-webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; width: fit-content; display: inline-block; text-shadow: 0 0 16px #84daff2d;}

.fw600 {font-weight: 600;}
.fw500 {font-weight: 500;}


.title1_line2 {display: block; font-size: var(--fs-xl1); font-weight: 400; letter-spacing: 1px;}
.title2 .line2 {display: block; font-size: var(--fs1); font-weight: 500;}

/*Circle Title*/
.circletitle {display: flex; gap: var(--gp1); align-items: center;}
.circletitle .circ {width: 80px; height: 80px; position: relative; display: flex; justify-content: center; align-items: center;}
.circletitle .circ svg {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; fill: none; stroke-linecap: round; stroke-miterlimit: round; stroke-width: 4px;}
.circletitle .circ svg .s1 {stroke: #5de9ff2f;}
.circletitle .circ svg .s2 {stroke: #5de9ffc9;}
.circletitle .circ span {display: block; font-size: var(--fs-xl1); font-weight: 500; color: #FFF;}
.circletitle .txt {text-transform: uppercase; color: #FFF;}


.circletitle .circ {opacity: 0; transform: translate(0, 16px); transition: all .8s;}
.circletitle .txt {opacity: 0; transform: translate(8px, 0px); transition: all .8s;}
.circletitle .circ svg:nth-of-type(1) {transform: rotate(270deg); transition: all 0.8s;}
.circletitle .circ svg:nth-of-type(2) {transform: rotate(90deg); transition: all 0.8s;}

.scrolled .circletitle .circ {opacity: 1; transform: translate(0, 0px);}
.scrolled .circletitle .txt {opacity: 1; transform: translate(0px, 0px);}
.scrolled .circletitle .circ svg:nth-of-type(1) {transform: rotate(0deg);}
.scrolled .circletitle .circ svg:nth-of-type(2) {transform: rotate(0deg);}


@media screen and (max-width : 680px){
	.circletitle {gap: var(--gp1-xs1);}
	.circletitle .circ {width: 64px; height: 64px;}
}


/*Trennlinie*/
.line01 {display: flex;}
.line01 > div:first-child {height: 1px; width: 32px; background: #79ebff; box-shadow: 0 0 4px #79ebffd0, 0 0 8px #79ebff, 0 0 16px #79ebff69;}
.line01 > div:last-child {height: 1px; width: 128px; background: #ffffff7c;}

/*Responsive*/
@media screen and (max-width : 768px){
	.title1, .title1 .elementor-heading-title {font-size: var(--fs-xl2); letter-spacing: -0.5px;}
	.title2, .title2 .elementor-heading-title {font-size: var(--fs-xl1); letter-spacing: -0.5px;}
	.tline {max-width: 150px; height: 2px;}
}

.linkanker {position: relative; top: -120px; height: 0px;}
@media screen and (max-width : 768px){ .linkanker {top: -80px;} }
/***********/




















/**** LISTEN ****/
.list1 {margin: var(--mg) var(--mg); padding: 0;}
.list1 li {background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2U4NmQ0NCIgZD0iTTMgMi4yaDB2M0w2LjkgOCAzIDEwLjh2M2gwTDExIDh6Ii8+PC9zdmc+") no-repeat left center; background-size: 1rem; margin: .5rem 0 .5rem var(--mg); padding-left: 1.25rem;}
.list1 .list1 {margin: 10px 10px 0px 0px; font-size: 110%;}

/*Iconlist1*/
:root {--il1_gap: var(--gp1-r); --il1_ico: 48px;}
.iconlist1 {display: flex; flex-direction: column; gap: var(--gp1-r);}
.iconlist1 li {display: flex; gap: var(--gp1-r); align-items: center;}
.iconlist1 .ico {width: var(--il1_ico); height: var(--il1_ico);}
.iconlist1 .ico svg {display: block; width: 100%; stroke: #000; stroke-width: 3px; fill: none;}
.iconlist1 .txt {width: calc(100% - var(--il1_ico) - var(--il1_gap) );}
.iconlist1 .tit {display: block; font-weight: 700; margin-bottom: var(--gp1-r-xs3)}
/***********/









/**** BUTTONS ****/
.buttonwrap {text-align: center; display: flex;}
.buttonwrap.cnt {justify-content: center;}
.button {display: flex; align-items: center; width: fit-content; position: relative; text-align: center; z-index: 1; cursor: pointer;}
.button .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all .6s; z-index: 3;}
.button span {transition: all .6s; position: relative; z-index: 10; letter-spacing: 2px; text-transform: uppercase;}

.button1 {padding: 8px var(--gp1-r); font-size: var(--fs1); font-weight: 400; text-decoration: none; transition: all 0.6s;}
.button2 {padding: calc(var(--gp1-r-xs1) - var(--gp1-r-xs2)) var(--gp1-r); font-size: var(--fs-xs1); font-weight: 400; text-decoration: none; transition: all 0.6s;}

.button2 .bg:after {width: calc(100% + 10px) !important; height: calc(100% + 10px) !important; top: -6px !important; left: -6px !important;}

/*Col1*/
.buttoncol1 {margin: 8px;}
.buttoncol1 .bg {width: 100%; height: 100%; position: absolute; border-radius: 100px; border: 1px solid #bd82b8; box-shadow: inset 0 0 32px rgba(193, 97, 228, 0.4), 0 0 10px rgba(255,143,247,.0); transition: all .6s; /*background: linear-gradient(to right,rgba(226,99,212,1) 0%,rgba(159,113,176,.2) 25%,rgba(118, 121, 154, 0) 40%,rgba(116, 121, 153, 0) 60%,rgba(157,113,175,.2) 75%,rgba(226,99,212,1) 100%);*/ background-size: 200% 200%; background-position: center;}
.buttoncol1:hover .bg {background-size: 100% 100%; border: 1px solid #FF8FF7; box-shadow: inset 0 0 32px rgba(193, 97, 228, 0.2), 0 0 10px rgba(255,143,247,.3);}

.buttoncol1 .bg:after {content: ""; width: calc(100% + 14px); height: calc(100% + 14px); position: absolute; top: -8px; left: -8px; border-radius: 100px; border: 1px solid rgba(223,190,220,.2); border-left: 1px solid #bd82b8; border-right: 1px solid #bd82b8; transition: all .6s; box-shadow: inset 0 0 10px rgba(0,0,0,.2),0 0 20px rgba(255,255,255,0);}
.buttoncol1:hover .bg:after {border: 1px solid rgba(223,190,220,.5); border-left: 1px solid #ff88f5; border-right: 1px solid #ff88f5; box-shadow: inset 0 0 10px rgba(0,0,0,.4),0 0 20px rgba(255,255,255,.1);}

.buttoncol1 span {color: #FFF;}
.buttoncol1:hover span {color: #FFF; text-shadow: 0 0 8px #FFFFFFCC;}


/*Col2*/
.buttoncol2 {margin: 8px;}
.buttoncol2 .bg {width: 100%; height: 100%; position: absolute; border-radius: 100px; border: 1px solid #bd82b8; box-shadow: inset 0 0 32px rgba(193, 97, 228, 0.4), 0 0 10px rgba(255,143,247,.0); transition: all .6s; /*background: linear-gradient(to right,rgba(226,99,212,1) 0%,rgba(159,113,176,.2) 25%,rgba(118, 121, 154, 0) 40%,rgba(116, 121, 153, 0) 60%,rgba(157,113,175,.2) 75%,rgba(226,99,212,1) 100%);*/ background-size: 200% 200%; background-position: center;}
.buttoncol2:hover .bg {background-size: 100% 100%; border: 1px solid #5deaff; box-shadow: inset 0 0 32px rgba(193, 97, 228, 0.2), 0 0 10px rgba(255,143,247,.3);}

.buttoncol2 .bg:after {content: ""; width: calc(100% + 14px); height: calc(100% + 14px); position: absolute; top: -8px; left: -8px; border-radius: 100px; border: 1px solid rgba(223,190,220,.2); border-left: 1px solid #bd82b8; border-right: 1px solid #bd82b8; transition: all .6s; box-shadow: inset 0 0 10px rgba(0,0,0,.2),0 0 20px rgba(255,255,255,0);}
.buttoncol2:hover .bg:after {border: 1px solid rgba(223,190,220,.0); border-left: 1px solid #5deaff; border-right: 1px solid #5deaff; box-shadow: inset 0 0 10px rgba(0,0,0,.4),0 0 20px rgba(255,255,255,.1);}

.buttoncol2 span {color: #FFF;}
.buttoncol2:hover span {color: #FFF; text-shadow: 0 0 8px #FFFFFFCC;}

/*Pulse Ani*/
.button .pulseani {content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; border: 1px solid transparent; border-radius: 100px; transition: all .6s; box-shadow: 0 0 0px 0px #c375ce0f; animation: button_pulse 4s ease-in-out infinite;}


@keyframes button_pulse {
	0% {box-shadow: 0 0 0px 0px #c375ce0f;}
	40% {box-shadow: 0 0 0px 0px #c475ce31;}
	100% {box-shadow: 0 0 0px 30px #c375ce00;}
}

/***********/



/*box-shadow: 0 0 20px #7f7ab700;
	0% {box-shadow: 0 0 20px #7f7ab700;}
	20% {box-shadow: 0 0 30px #7f7ab7bb;}
	100% {box-shadow: 0 0 50px #7f7ab700;}

.button .pulseani {content: ""; width: calc(100% + 14px); height: calc(100% + 14px); position: absolute; z-index: 1; top: -8px; left: -8px; border: 1px solid transparent; border-radius: 100px; transition: all .6s;  animation: button_pulse 4s ease-in-out infinite; background: #FFFFFF44}

*/









/**** COVER ****/
#cover {height: 100vh; overflow: hidden;}
.cover_overlay_area1 {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; overflow: hidden;}
.wrapper_lines02 {position: absolute; right: 0px; bottom: 0px; transform: rotate(180deg);}
.linegrid {width: 500px; height: 1200px; display: flex; gap: 20px; position: relative; transform-origin: top left; transform: translateX(30px) rotate(30deg) translate(0px,-250px);}
.linegrid .line {width: 1px; height: 100%; background: #FFF; position: relative; z-index: 5;}
.linegrid .linepos1 {transform: translate(0, -10%)  rotate(180deg);}
.linegrid .linecol1 {background: #FFF; opacity: 0.05;}
.linegrid .linecol2 {background: linear-gradient(0deg, rgba(86,209,255, .0) 40%, rgba(86,209,255, 1) 100%); position: relative;}
.linegrid .linecol2:after {content:""; display: block; position: absolute; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(86,209,255, .0) 70%, rgba(86,209,255, 1) 100%); filter: blur(5px);}
.linegrid .linecol2:before {content:""; display: block; position: absolute; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(86,209,255, .0) 70%, rgba(86,209,255, 1) 100%); filter: blur(5px);}
.linegrid .linecol2 > div {display: block; position: absolute; width: 100%; height: 20%; top: 8%; background: linear-gradient(0deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); animation: lineani_pos01 4s ease-in-out infinite, lineani_col01 8s ease-in-out infinite; animation-direction: alternate, alternate}
.linegrid .linecol2 > div:after {content:""; display: block; position: absolute; width: 100%; height: 100%; top: 0; background: linear-gradient(0deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); filter: blur(5px);}
.linegrid .linecol2 > div:before {content:""; display: block; position: absolute; width: 100%; height: 100%; top: 0; background: linear-gradient(0deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); filter: blur(10px);}

.linegrid .gradient {position: absolute; z-index: 0; width: 30%; height: 100%; top: 0; left: 102px; background: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.4) 60%, rgba(255,255,255, 1) 100%); opacity: 0.05; animation: gradient_pos01 16s 3s ease-in-out infinite alternate;}
.linegrid .gradient2 {position: absolute; z-index: 0; width: 30%; height: 100%; top: 0; left: 40px; background: linear-gradient(90deg, rgba(150,172,255, 0) 0%, rgba(150,172,255, 0.4) 60%, rgba(150,172,255, 1) 100%); opacity: 0.1; animation: gradient_pos02 24s ease-in-out infinite alternate;}


@keyframes lineani_pos01 { 0% {top: 15%;} 100% {top: 25%;} }
@keyframes lineani_col01 { 0% {filter: hue-rotate(-20deg);} 100% {filter: hue-rotate(90deg);} }
@keyframes gradient_pos01 { 0% {transform: translate(0px, 0px)} 100% {transform: translate(84px, 0px)} }
@keyframes gradient_pos02 { 0% {transform: translate(0px, 0px)} 100% {transform: translate(-63px, 0px)} }
@media screen and (max-width : 800px){
	.linegrid {width: 300px; height: 770px; gap: 12px; transform: translateX(30px) rotate(30deg) translate(0px,-180px);}
}
@media screen and (max-width : 600px){
	.linegrid {width: 300px; height: 600px; gap: 12px; transform: translateX(30px) rotate(30deg) translate(-100px,-180px);}
}

.cover_overlay_area2 {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4; overflow: hidden; background: rgba(0,0,0, 0.3);}


/*Titel mit Linie*/
.hero_ttl {position: absolute; top: 50%; left: 50%; align-items: center; transform: translate(-50%, -50%); display: flex; flex-direction: column; --linewidth: 400px;}
.hero_ttl .row1 {overflow: hidden;}
.hero_ttl .row2 {overflow: hidden;}
.hero_ttl .row1 span {display: block; width: fit-content; margin: 0 auto; font-size: var(--fs-xl3); color: #FFF; line-height: 1; transform: translate(0, 80px); margin-bottom: 10px; white-space: nowrap; animation: textani_01 1.3s 1.0s ease-in-out 1 forwards;}
.hero_ttl .row2 span {display: block; width: fit-content; margin: 0 auto; font-size: var(--fs1); color: #FFF; line-height: 1; transform: translate(0, -80px); text-transform: uppercase; letter-spacing: 16px; font-weight: 200; margin-top: 20px; white-space: nowrap; animation: textani_02 1.3s 1.0s ease-in-out 1 forwards;}

.ttl_line {width: 0; height: 1px; position: relative; animation: lineani_01 1.5s ease-in-out 1 forwards;}
@keyframes lineani_01 { 0% {width: 0;} 100% {width: var(--linewidth);} }
@keyframes textani_01 { 0% {transform: translate(0, 80px);} 100% {transform: translate(0, 0);} }
@keyframes textani_02 { 0% {transform: translate(0, -80px);} 100% {transform: translate(0, 0);} }
@keyframes ava_ani { 0% {opacity: 0;} 100% {opacity: 1;} }
@keyframes scroll_ani { 0% {opacity: 0;} 100% {opacity: 1;} }

.ttl_line_ground {width: 100%; height: 100%; background: linear-gradient(90deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); position: absolute; top: 0; left: 0;}
.ttl_line_glow1 {width: 100%; height: 100%; background: linear-gradient(90deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); position: absolute; top: 0; left: 0; filter: blur(5px);}
.ttl_line_glow1:after {content:""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); filter: blur(10px);}
.ttl_line_glow1:before {content:""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); filter: blur(20px);}

.ttl_line_glow2 {width: 100%; height: 100%; background: linear-gradient(90deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); position: absolute; top: 0; left: 0; filter: blur(2px);}
.ttl_line_glow2:after {content:""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); filter: blur(30px);}
.ttl_line_glow2:before {content:""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(86,209,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); filter: blur(40px); opacity: .5;}

.ttl_line_glow3 {width: 50%; height: 100%; background: linear-gradient(90deg, rgba(86,209,255, 0) 0%, rgb(110, 216, 255) 50%, rgba(86,209,255, 0) 100%); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); animation: lineani_col01 8s ease-in-out infinite; animation-direction: alternate;}
.ttl_line_glow3:after {content:""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(110,216,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); filter: blur(5px);}
.ttl_line_glow3:before {content:""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(110,216,255, 0) 0%, rgba(86,209,255, 1) 50%, rgba(86,209,255, 0) 100%); filter: blur(10px);}

@media screen and (max-width : 480px){
	.hero_ttl {--linewidth: 300px;}
	.hero_ttl .row2 span {font-size: var(--fs1); letter-spacing: 8px;}
}

/*Avatar*/
.thatsme {width: fit-content; position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 128px)); opacity: 0; animation: ava_ani 1.3s 2.3s ease-in-out 1 forwards;}
.avatar {position: relative; width: 80px; margin: 0 auto; --circ_gap: 8px}
.avatar img {display: block; width: 100%; position: relative; z-index: 10;}

.ava_circ1 {position: absolute; z-index: 5; bottom: calc(var(--circ_gap) * -1); left: calc(var(--circ_gap) * -1); width: calc(100% + calc(var(--circ_gap) *2)); aspect-ratio: 1/1; background: linear-gradient(40deg, #6d6da036 0%, #6d6da036 50%, #5deaff36 100%); border-radius: 100px; opacity: .2; animation: ava_circ 4s .8s ease-in-out infinite; animation-direction: alternate;}
.ava_circ2 {position: absolute; z-index: 5; bottom: calc(var(--circ_gap) * -2); left: calc(var(--circ_gap) * -2); width: calc(100% + calc(var(--circ_gap) *4)); aspect-ratio: 1/1; background: linear-gradient(130deg, #6d6da036 0%, #6d6da036 50%, #5deaff36 100%); border-radius: 100px; opacity: .2; animation: ava_circ 4s .4s ease-in-out infinite; animation-direction: alternate;}
.ava_circ3 {position: absolute; z-index: 5; bottom: calc(var(--circ_gap) * -3); left: calc(var(--circ_gap) * -3); width: calc(100% + calc(var(--circ_gap) *6)); aspect-ratio: 1/1; background: linear-gradient(250deg, #6d6da036 0%, #6d6da036 50%, #5deaff36 100%); border-radius: 100px; opacity: .2; animation: ava_circ 4s .0s ease-in-out infinite; animation-direction: alternate;}
@keyframes ava_circ { 0% {transform: scale(1.0);} 100% {transform: scale(1.1);} }


/*Scroll Icon*/
.scrolldown {--color: white; --sizeX: 30px; --sizeY: 50px; position: absolute; width: var(--sizeX); height: var(--sizeY); border: calc(var(--sizeX) / 15) solid var(--color); border-radius: 50px; box-sizing: border-box; margin-bottom: 16px; left: 50%; bottom: 128px; transform: translate(-50%, 0); opacity: 0; animation: scroll_ani 1.3s 4.0s ease-in-out 1 forwards;}
.scrolldown:before {content: ""; position: absolute; bottom: 30px; left: 50%; width: 6px; height: 6px; margin-left: -3px; background-color: #5deaff; border-radius: 50px; animation: scrolldown-anim 2s infinite; box-sizing: border-box; box-shadow: 0px -5px 3px 1px #5de9ff34;}
@keyframes scrolldown-anim { 0% {opacity: 0; height: 6px;} 40% {opacity: 1; height: 10px;} 80% {transform: translate(0, 20px); height: 10px; opacity: 0;} 100% {height: 3px; opacity: 0;} }
.chevrons {padding: 6px 0 0 0; margin-left: -3px; margin-top: 48px; width: 30px; display: flex; flex-direction: column; align-items: center;}
.chevrondown {margin-top: -4px; position: relative; border: solid #FFF; border-width: 0 2px 2px 0; display: inline-block; width: 10px; height: 10px; transform: rotate(45deg);}
.chevrondown:nth-child(odd) { animation: pulse 1s ease infinite alternate; }
.chevrondown:nth-child(even) { animation: pulse 1s ease infinite alternate 100ms; }
@keyframes pulse { 0% {opacity: 0;} 50% {opacity: 0.5;} 100% {opacity: 0.5;} }
/***********/










/**** ANSCHREIBEN ****/
/*FadeIn*/
#anschreiben .content a {border-bottom: 1px dotted #76cdff; color: #FFF; transition: all .5s;}
#anschreiben .content a:hover {text-shadow: 0 0 10px #FFFFFF66;}
@media screen and (min-width : 681px){
	#anschreiben .content {/*transition: opacity 1s 0.8s;*/}
	#anschreiben .content .gaps1 > * {opacity: 0; filter: blur(20px);}
	#anschreiben.scrolled .content .gaps1 * {opacity: 1; filter: blur(0px);}

	#anschreiben .content .gaps1 > :nth-child(1) {transition: all 1s 0.8s}
	#anschreiben .content .gaps1 > :nth-child(2) {transition: all 1s 1.0s}
	#anschreiben .content .gaps1 > :nth-child(3) {transition: all 1s 1.2s}
	#anschreiben .content .gaps1 > :nth-child(4) {transition: all 1s 1.4s}
	#anschreiben .content .gaps1 > :nth-child(5) {transition: all 1s 1.6s}
	#anschreiben .content .gaps1 > :nth-child(6) {transition: all 1s 1.8s}
	#anschreiben .content .gaps1 > :nth-child(7) {transition: all 1s 2.0s}
	#anschreiben .content .gaps1 > :nth-child(8) {transition: all 1s 2.2s}
	#anschreiben .content .gaps1 > :nth-child(9) {transition: all 1s 2.4s}
	#anschreiben .content .gaps1 > :nth-child(10) {transition: all 1s 2.6s}
}
/***********/










/**** REFERENZEN ****/
.portfolio {display: flex; gap: var(--gp1-xl1); justify-content: space-between;}

.portfolio .clients {width: 35%;}
.portfolio .screenshot {width: 65%; position: relative;}
.portfolio .screenshot > div {width: 100%; height: 80vh; position: sticky; top: 10vh;}
.portfolio .screenshot > div > div {width: 100%; height: 0; padding-bottom: 65%; position: absolute; left: 0; top: 50%; transform: translate(0, -50%);}
.portfolio .screenshot img {display: block; width: 100%;}
.portfolio .screenshot .overlay01 {position: absolute; inset: 0; background: url(/img/portfolio_bg.webp); z-index: 0; background-size: cover;}
.portfolio .screenshot .wrapper {position: absolute; transition: opacity 1s, transform 1s, filter 1s;}

.portfolio .screenshot .wrapper {opacity: 0; z-index: 5; transform: translate(0, 64px); filter: blur(10px) brightness(2) contrast(2); pointer-events: none;}
.portfolio .screenshot .wrapper[visible="1"] {opacity: 1; z-index: 1; transform: translate(0, 0); filter: blur(0) brightness(1) contrast(1); pointer-events: auto;}

.portfolio .client {min-height: 80vh; display: flex; align-items: center;}
.portfolio .client span.colw {display: block;}

/*FadeIn*/
@media screen and (min-width : 681px){
	.portfolio_wrapper {opacity: 0; transition: opacity 0.8s 0.4s;}
	.scrolled .portfolio_wrapper {opacity: 1;}
	.pftitle {opacity: 0; transition: opacity 0.8s 0.4s;}
	.scrolled .pftitle {opacity: 1;}
}

@media screen and (max-width : 1250px){
	.portfolio {gap: 16px;}
}

@media screen and (max-width : 800px){
	.portfolio {gap: 0px;}
	.portfolio .clients {width: 45%;}
	.portfolio .screenshot {width: 55%;}
	.portfolio .screenshot > div {height: 60vh;}
}

@media screen and (max-width : 640px){
	.portfolio_wrapper {height: 600vh; position: relative;}
	.portfolio {display: flex; position: sticky; top: 0px; height: 100vh; width: 100%;}
	.portfolio .clients {position: absolute; bottom: 0px; left: 0; width: 100%; height: 50vh;}
	.portfolio .screenshot {position: absolute; top: 0px; left: 0; width: 100%; height: 50vh;}
	.portfolio .client {min-height: unset; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transition: opacity 1s, transform 1s;}

	.portfolio .client[visible="1"] {opacity: 1; transform: translate(0, 0);}
	.portfolio .client[visible="0"] {opacity: 0; transform: translate(20px, 0)}

	.portfolio .screenshot > div {width: 100%; height: 100%; position: relative; top: 0px;}
	.portfolio .screenshot > div > div {position: absolute; top: unset; bottom: 0px; transform: unset;}
}
/***********/










/**** REFERENZEN POPUP ****/
#portfolio_details {display: block;}
.pfp_darkbg {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 45; background: #000000eb; transition: opacity .5s; pointer-events: none; opacity: 0;}
.pfp_darkbg.active {opacity: 1; pointer-events: auto;}

.pfpopup_wrapper {width: calc(100% - var(--gp1-xl1)); max-width: 2200px; height: calc(100% - var(--gp1-xl1)); position: fixed; top: var(--gp1); left: 50%; transform: translate(-50%, 0); z-index: 50; display: flex; flex-direction: column; gap: var(--gp1-xs1); transition: opacity .5s; opacity: 0; pointer-events: none;}
.pfpopup_wrapper.active {opacity: 1; pointer-events: auto;}
.pfpopup_nav {display: flex; gap: var(--gp1-xs2); justify-content: center;}
.pfpopup_clients {height: 100%; background: linear-gradient(90deg, #26262dEE 0%,#1e1e24EE 100%); backdrop-filter: blur(20px); border-radius: 8px; overflow: hidden; position: relative;}
.pfpopup_clients .overlay {position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 8px; background: url(/img/popupbg.webp) center no-repeat; background-size: cover; filter: blur(150px);}

.pfpopup_clients .client {position: absolute; inset: 0; z-index: 2; display: flex; height: 100%; border-radius: 8px; --desc_width: 600px; opacity: 0; pointer-events: none; transition: opacity .5s;}
.pfpopup_clients .client.active {opacity: 1; pointer-events: auto;}
.pfpopup_clients .client .pictures {width: calc(100% - var(--desc_width)); position: relative;}
.pfpopup_clients .client .details {width: var(--desc_width); background: #111119DD; display: flex; flex-direction: column;}
.pfpopup_clients .client .details .head {padding: var(--gp1-r) var(--gp1-r) 0 var(--gp1-r);}
.pfpopup_clients .client .details .body {max-height: 100%; overflow-y: scroll !important; position: relative; height: 100%; margin: var(--gp1-r) 0; scrollbar-width: 4px; /* Für Firefox */ scrollbar-color: #5deaff #0F000000; /* Für Firefox */}
.pfpopup_clients .client .details .body::-webkit-scrollbar {width: 2px;}
.pfpopup_clients .client .details .body::-webkit-scrollbar-track {background: #FFF;}
.pfpopup_clients .client .details .body::-webkit-scrollbar-thumb {background-color: #000; border-radius: 4px;}

/*Beschreibungselemente*/
.pfpopup_clients .client .details .ttl01 {display: block; color: #FFF; font-weight: 500; font-size: var(--fs-xl2); line-height: 1; font-weight: 500; margin-bottom: var(--gp1-r-xs1);}
.pfpopup_clients .client .details .ttl02 {display: block; color: #FFF; font-weight: 400; font-size: var(--fs-xl1); line-height: 1; letter-spacing: 2px; margin-top: var(--gp1-r-xs1);}
.pfpopup_clients .client .details .detailbar {display: flex; flex-wrap: wrap; width: fit-content; gap: 4px var(--gp1-r-xs1); align-items: center; font-size: var(--fs-xs1); margin-top: var(--gp1-r-xs2); background: linear-gradient(40deg, #6d6da036 0%, #6d6da036 50%, #5deaff36 100%); padding: 4px var(--gp1-r-xs1); border-radius: 4px; color: #FFF;}
.pfpopup_clients .client .details .detailbar div {display: block; width: 1px; height: 1em; background: #80efffa3;}
.pfpopup_clients .client .details .detailbar div:last-child {display: none;}
.pfpopup_clients .client .details .txt {display: flex; flex-direction: column; gap: var(--gp1-r); padding: 0 var(--gp1-r);}
.pfpopup_clients .client .details .txt .pre {font-weight: 500; color: #FFF;}
.pfpopup_clients .client .details .txt .pre {font-weight: 500; color: #FFF;}

/*Gallery Navis*/
.pfpopup_clients .client .pictures img {display: block; object-fit: contain; width: 100%; height: 100%; position: absolute; opacity: 0; transition: opacity .5s; pointer-events: none; user-select: none;}
.pfpopup_clients .client .pictures img.active {opacity: 1;}
.pfpopup_clients .client .pictures .picnav {position: absolute; bottom: 16px; left: 50%; transform: translate(-50%, 0); display: flex; gap: var(--gp1-xs2); padding: 8px 16px; background: linear-gradient(40deg, #6d6da036 0%, #6d6da036 50%, #5deaff36 100%); border: 1px solid rgba(223,190,220,.00); border-left: 1px solid #5deaff; border-right: 1px solid #5deaff; border-radius: 64px; backdrop-filter: blur(10px);}
.pfpopup_clients .client .pictures .picnav button {outline: 0; height: 24px; width: 24px; display: block; border-radius: 100px; padding: 4px; cursor: pointer; transition: all .5s ease-in-out; border: none; background: #01010280;}
.pfpopup_clients .client .pictures .picnav button.active {height: 24px; width: 48px;}
.pfpopup_clients .client .pictures .picnav button:after {content:""; background: #455a68; display: block; width: 100%; height: 100%; border-radius: 32px; transition: all .5s ease-in-out;}
.pfpopup_clients .client .pictures .picnav button.active:after {background: #FFF; box-shadow: 0 0 8px #FFFFFF88;}

.gallery_button_prev {display: block; cursor: pointer; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); background: linear-gradient(40deg, #6d6da036 0%, #6d6da036 50%, #5deaff36 100%); backdrop-filter: blur(10px); padding: 32px 16px; border-radius: 0 8px 8px 0;}
.gallery_button_prev:before {content: "\002770"; font-size: var(--fs-xl1); color: #FFF; transition: text-shadow .4s;}
.gallery_button_next {display: block; cursor: pointer; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); background: linear-gradient(-40deg, #6d6da036 0%, #6d6da036 50%, #5deaff36 100%); backdrop-filter: blur(10px); padding: 32px 16px; border-radius: 8px 0 0 8px;}
.gallery_button_next:before {content: "\002771"; font-size: var(--fs-xl1); color: #FFF; transition: text-shadow .4s;}
.gallery_button_next:hover:before, .gallery_button_prev:hover:before {text-shadow: 0 0 5px #FFFFFFAA, 0 0 10px #FFFFFF66, 0 0 20px #FFFFFF66, 0 0 30px #FFFFFF66;}

/*Live Demo Button*/
.pfpopup_clients .client .demo {display: flex; position: absolute; right: 16px; top: 16px; width: 96px; height: 96px; border-radius: 4px; justify-content: center; align-items: center; background: linear-gradient(40deg, #6d6da036 0%, #6d6da036 50%, #5deaff36 100%); backdrop-filter: blur(10px); box-shadow: inset 0 0 64px 8px #FFFFFF00; transition: box-shadow .3s;}
.pfpopup_clients .client .demo:hover {box-shadow: inset 0 0 64px 8px #FFFFFF11;}
.pfpopup_clients .client .demo span {display: block; text-align: center; line-height: 1.2; text-transform: uppercase; font-size: calc(var(--fs1) - var(--fs-xs3)); font-weight: 600; transition: all .3s;}
.pfpopup_clients .client .demo:hover span {text-shadow: 0 0 6px #FFFFFF66;}
.pfpopup_clients .client .demo div:nth-of-type(1) {position: absolute; inset: 8px; background: url(/img/demoline01.svg); animation: demorotate01 10s linear infinite;}
.pfpopup_clients .client .demo div:nth-of-type(2) {position: absolute; inset: 8px; background: url(/img/demoline02.svg); animation: demorotate02 10s linear infinite;}
@keyframes demorotate01 { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
@keyframes demorotate02 { 0% {transform: rotate(360deg);} 100% {transform: rotate(0deg);} }


.gallery_button_prev.clicked, .gallery_button_next.clicked {animation: galbut_clicked 0.5s; animation-iteration-count: 1;}
@keyframes galbut_clicked {
	0% {box-shadow: inset 0 0 100px #ededff99;}
	2% {box-shadow: inset 0 0 100px #ededff44;}
	50% {box-shadow: inset 0 0 40px #ededff00;}
	100% {box-shadow: inset 0 0 0 40px #ededff00;}
}


@media screen and (orientation: portrait) {
	@media screen and (max-width : 1250px){
		.pfpopup_clients .client {flex-direction: column;}
		.pfpopup_clients .client .pictures {width: 100%; height: calc(100% - var(--desc_width));}
		.pfpopup_clients .client .details {width: 100%; height: var(--desc_width);}
	}
	@media screen and (max-width : 640px){
		.pfpopup_wrapper {width: calc(100% - var(--gp1)); height: calc(100% - var(--gp1));  top: var(--gp1-xs1);}
		.pfpopup_clients .client .pictures {height: 45%;}
		.pfpopup_clients .client .details {height: 55%;}
		.pfpopup_clients .client .demo {width: 64px; height: 64px; top: 8px; right: 8px;}
		.pfpopup_clients .client .demo div {inset: 4px !important;}
		.pfpopup_clients .client .demo span {font-size: var(--fs-xs1);}
		.pfpopup_nav button span {display: none;}
	}
	@media screen and (max-width : 480px){
		.pfpopup_clients .client .pictures .picnav {padding: 4px 8px;}
		.pfpopup_clients .client .pictures .picnav button {height: 20px; width: 20px;}
		.pfpopup_clients .client .pictures .picnav button.active {height: 20px; width: 40px;}
		.gallery_button_prev, .gallery_button_next {padding: 24px 12px;}
	}
}

@media screen and (orientation: landscape) {
	@media screen and (max-width : 1500px){
		.pfpopup_clients .client {--desc_width: 400px;}
	}
	@media screen and (max-width : 1000px){
		.pfpopup_clients .client {--desc_width: 300px;}
		.pfpopup_wrapper {width: calc(100% - var(--gp1)); height: calc(100% - var(--gp1));  top: var(--gp1-xs1);}
		.pfpopup_clients .client .details .head {padding: 16px 16px 0 16px;}
		.pfpopup_clients .client .details .body {margin: 16px 0;}
		.pfpopup_clients .client .details .txt {padding: 0 16px;}
		.pfpopup_clients .client .details .ttl01 {margin-bottom: 8px; font-size: var(--fs-xl1);}
		.pfpopup_clients .client .details .ttl02 {margin-top: 8px; font-size: var(--fs1);}
		.pfpopup_clients .client .demo {width: 64px; height: 64px; top: 8px; right: 8px;}
		.pfpopup_clients .client .demo div {inset: 4px !important;}
		.pfpopup_clients .client .demo span {font-size: var(--fs-xs1);}
	}
	@media screen and (max-width : 800px){
		.pfpopup_clients .client .pictures .picnav {padding: 4px 8px;}
		.pfpopup_clients .client .pictures .picnav button {height: 20px; width: 20px;}
		.pfpopup_clients .client .pictures .picnav button.active {height: 20px; width: 40px;}
		.gallery_button_prev, .gallery_button_next {padding: 24px 12px;}
	}
}


/*Hauptnavigation*/
.pfpopup_nav button {cursor: pointer; outline: 0; border-radius: 0; background: transparent; color: #FFF; font-size: var(--fs1); padding: var(--gp1-r-xs3) var(--gp1-xs1); border: 2px solid #FFF; transition: all 0.4s;}
.pfpopup_nav button:hover {box-shadow: 0 0 32px #FFFFFF11, 0 0 4px #FFFFFF11, 0 0 8px #FFFFFF11,  inset 0 0 2px #FFFFFF11,  inset 0 0 8px #FFFFFF11,  inset 0 0 16px #FFFFFF11; text-shadow: 0 0 16px #FFFFFFBB;}

/***********/

















/**** AUFTEILUNG FÜR LEBENSLAUF ****/
.slice1 {display: flex; justify-content: space-between; gap: 32px;}
.slice1 > div:nth-of-type(1) {width: 30%; display: flex; flex-direction: column; gap: 32px;}
.slice1 > div:nth-of-type(2) {width: 70%; display: flex; flex-direction: column; gap: 32px;}



@media screen and (max-width : 1050px){
	.slice1 {flex-wrap: wrap; margin: 0;}
	.slice1 > div:nth-of-type(1) {width: 100%; background: none;}
	.slice1 > div:nth-of-type(2) {width: 100%;}
	.bg0 {margin-bottom: 40px;}
}
@media screen and (max-width : 1050px){
	.slice1 > div:nth-of-type(1) {display: grid; gap: 32px; grid-template-columns: repeat(2,1fr);}
}

@media screen and (max-width : 680px){
	.slice1 {flex-direction: column-reverse;}
	.slice1 > div:nth-of-type(1) {grid-template-columns: repeat(1,1fr);}
}
/***********/



/*FadeIn*/
@media screen and (min-width : 681px){
.slice1 > div:nth-of-type(1) .innercard {transform: translate(-64px, 0); opacity: 0; filter: blur(100px);}
.slice1 > div:nth-of-type(1) .innercard:nth-of-type(1) {transition: all .8s 0.4s ease-in-out;}
.slice1 > div:nth-of-type(1) .innercard:nth-of-type(2) {transition: all .8s 0.6s ease-in-out;}
.slice1 > div:nth-of-type(1) .innercard:nth-of-type(3) {transition: all .8s 0.8s ease-in-out;}
.slice1 > div:nth-of-type(1) .innercard:nth-of-type(4) {transition: all .8s 1.0s ease-in-out;}
.slice1 > div:nth-of-type(1) .innercard:nth-of-type(5) {transition: all .8s 1.2s ease-in-out;}
.slice1 > div:nth-of-type(1) .innercard:nth-of-type(6) {transition: all .8s 1.4s ease-in-out;}

.slice1 > div:nth-of-type(2) .innercard {transform: translate(64px, 0); opacity: 0; filter: blur(100px);}
.slice1 > div:nth-of-type(2) .innercard:nth-of-type(1) {transition: all .8s 0.4s ease-in-out;}
.slice1 > div:nth-of-type(2) .innercard:nth-of-type(2) {transition: all .8s 0.6s ease-in-out;}

.scrolled .slice1 .innercard {transform: translate(0,0) !important; opacity: 1 !important; filter: blur(0px) !important;}
}


.innercard {background: #6d6da036; backdrop-filter: blur(30px); padding: 16px; border-radius: 8px;}



/**** LEBENSLAUF ****/
.lebenslauf {
--linecol01: #478d99;
}
.lebenslauf {margin: 20px;}
.llbox {display: flex; align-items: center;}
.llbox > div:nth-of-type(1) {width: fit-content; margin-right: 16px;}
.llbox > div:nth-of-type(2) {width: 70px; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.llbox > div:nth-of-type(3) {width: calc(100% - 140px); padding: 20px 0 64px 0;}
.llbox:last-of-type > div:nth-of-type(3) {padding-bottom: 0;}


/*Typo*/
#lebenslauf .tit {color: #FFF; font-weight: 500; font-size: var(--fs-xl2); line-height: 1;}

/*Tabelle*/
.lltable1 {width: fit-content;}
.lltable1 td {padding: 0px 0px 16px 0px;}
.lltable1 tr td:first-child {padding-right: 32px;}
.lltable1 td b {font-weight: 500; color: #FFF;}

/*Icon Liste*/
.icon_list {display: flex; flex-direction: column; gap: 16px;}
.icon_list li {display: flex; gap: 16px; align-items: center;}
.icon_list li .icon {display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 4px; background: #0000004f; /*box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.08), inset -1px -1px 0 0 rgba(0, 0, 0, 0.31);*/}
.icon_list li .icon svg {display: block; width: 22px; height: 22px; fill: none; stroke: #FFF; stroke-width: 5px; filter: drop-shadow(0 0 4px #ffffff77) drop-shadow(0 0 2px #ffffff77);}

/* Element links mit den Jahreszahlen */
.llbox > div:nth-of-type(1) span {display: block; width: fit-content; text-align: center; padding: 4px 10px; color: #FFF; font-size: var(--fs-xl1); line-height: 1; font-weight: 600; letter-spacing: 2px; background: #0000004f; border-radius: 4px; position: relative;}
.llbox > div:nth-of-type(1) span:after {content: ""; display: block; width: 16px; height: 1px; background: #79ebff; position: absolute; bottom: 0px; left: calc(50% - 8px);}

/* Element Mitte mit den Pfeilen und Linien */
.llbox > div:nth-of-type(2) > div:nth-of-type(1) {width: 2px; height: calc(50% - 16px); background: var(--linecol01);}
.llbox > div:nth-of-type(2) > div:nth-of-type(2) {width: 18px; height: 18px; padding: 2px; border-top: 2px solid var(--linecol01); border-right: 2px solid var(--linecol01); transform: rotate(45deg); position: relative;}
.llbox > div:nth-of-type(2) > div:nth-of-type(2):before {content:""; display: block; width: 100%; height: 100%; background: linear-gradient(45deg, #b6f5ff 0%,#c9beff 100%);}
.llbox > div:nth-of-type(2) > div:nth-of-type(2):after {content:""; display: block; width: calc(100% - 14px); height: calc(100% - 14px); position: absolute; top: 6px; right: 6px; border-right: 3px solid rgba(0,0,0, 0.7); border-top: 3px solid rgba(0,0,0, 0.7);}
.llbox > div:nth-of-type(2) > div:nth-of-type(3) {width: 2px; height: calc(50% - 16px); background: var(--linecol01);}


/* Anpassungen für lange Einträge, wo die linken Elemente lieber mit der Überschrift in der selben Höhe stehen */
.llbox > div.t:nth-of-type(1) {align-self: flex-start; margin-top: 16px;}
.llbox > div.t:nth-of-type(2) > div:nth-of-type(1) {height: 22px; margin-bottom: 4px;}
.llbox > div.t:nth-of-type(2) > div:nth-of-type(2) {height: 18px; box-sizing: content-box;}
.llbox > div.t:nth-of-type(2) > div:nth-of-type(3) {height: calc(100% - 20px - 18px - 4px); margin-top: 4px;}


/* Die vertikalen Striche beim ersten und letzten Element ausblenden */
.lebenslauf .llbox:first-of-type > div:nth-of-type(2) > div:nth-of-type(1) {background: none;}
.lebenslauf .llbox:last-of-type > div:nth-of-type(2) > div:nth-of-type(3) {background: none;}

/* Inhalte rechts für die Beschreibung */
.llbox > div:nth-of-type(3) {width: calc(100% - 150px); font-size: 120%;}
.llbox > div:nth-of-type(3) p {padding: 0; margin-bottom: 10px;}
.llbox > div:nth-of-type(3) b.ttl {display: flex; align-items: center; gap: 8px; text-transform: uppercase; font-weight: 700;}
.llbox > div:nth-of-type(3) .tr:before {content: "|"; font-weight: 700; color: #5361f9;}
.llbox > div:nth-of-type(3) .sttl_wrap {display: flex;}
.llbox > div:nth-of-type(3) .sttl {color: #FFF; font-size: var(--fs-xs1); font-weight: 500; margin: 0; padding: 4px 8px 4px 10px; width: fit-content; background: #0000004f; position: relative;}
.llbox > div:nth-of-type(3) .sttl:before {content:""; width: 1px; height: 12px; background: #60E8FF; position: absolute; left: 0; top: calc(50% - 6px);}
.llbox > div:nth-of-type(3) .ttl:before {content: "❯ "; font-size: 1rem; color: #FFF;}

.ll-list {margin-top: 10px; margin-left: 0px;}
.ll-list li {margin-bottom: 16px; padding-left: 45px; background: var(--ico_arrow1) left center no-repeat; background-size: 30px; font-size: var(--fs1);}
.ll-list li:last-of-type {margin-bottom: 0}

.us1 img {margin-top: var(--gp1-xs1);}


/* Responsive Einstellungen */

.res-ttl {display: none;}



@media screen and (max-width : 680px){
	.llbox > div:nth-of-type(3) .sttl_wrap {flex-wrap: wrap;}
}





@media screen and (max-width : 480px){
	.lebenslauf {margin: 20px 0;}

	.llbox > div:nth-of-type(1) {width: 52px; display: none;}
	.llbox > div:nth-of-type(2) {width: 44px;}
	.llbox > div:nth-of-type(3) {width: calc(100% - 20px - 54px); padding: 20px 0;}

	/* Element links mit den Jahreszahlen */
	.llbox > div:nth-of-type(1) span {width: 44px; padding: 4px; font-size: 150%; line-height: 100%; letter-spacing: 0px;}
	.llbox > div.t:nth-of-type(1), .llbox > div.rt:nth-of-type(1) {margin-top: 15px;}

	/* Element Mitte mit den Pfeilen und Linien */
	.llbox > div.t:nth-of-type(2) > div:nth-of-type(1), .llbox > div.rt:nth-of-type(2) > div:nth-of-type(1) {height: 14px;}

	/* Anpassungen für lange Einträge, wo die linken Elemente lieber mit der Überschrift in der selben Höhe stehen */
	.llbox > div.rt:nth-of-type(1) {align-self: flex-start; margin-top: 10px;}
	.llbox > div.rt:nth-of-type(2) > div:nth-of-type(1) {height: 16px; margin-bottom: 4px;}
	.llbox > div.rt:nth-of-type(2) > div:nth-of-type(2) {height: 18px;}
	.llbox > div.rt:nth-of-type(2) > div:nth-of-type(3) {height: calc(100% - 20px - 18px - 4px); margin-top: 4px;}

	.res-ttl {display: block; width: fit-content; text-align: center; padding: 2px 6px; color: #FFF; font-size: 130%; line-height: 100%; font-weight: 600; letter-spacing: 2px; margin-bottom: 10px; margin-top: -3px; background: #0000004f; border-radius: 4px; position: relative;}
	.res-ttl:after {content: ""; display: block; width: 16px; height: 1px; background: #79ebff; position: absolute; bottom: 0px; left: calc(50% - 8px);}

	.ll-list li {padding-left: 30px; background: var(--ico_arrow1) left -2px no-repeat; background-size: 25px;}

}
/***********/









/**** PROZENT BAR ****/
.bar_t {display: block;}
.bar_t span {font-weight: lighter;}
.bar_t b {font-weight: 500; color: #FFF;}

.bar {padding: 6px; background: rgba(0, 0, 0, 0.45); overflow: hidden; border-radius: 32px;}
.bar > div {height: 8px; box-shadow: 3px 0 5px rgba(0,0,0, 0.2), 0 1px 0 rgba(255, 255, 255, .25) inset; line-height: 18px; text-align: center; font-weight: 600; color: #333; border-radius: 32px; background: var(--grd01);}


.bar2 {padding: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; border-radius: 32px; width: 100%; margin: auto; max-width: 300px;}
.bar2 > div {height: 4px; box-shadow: 3px 0 5px rgba(0,0,0, 0.2), 0 1px 0 rgba(255, 255, 255, .25) inset; line-height: 18px; text-align: center; font-weight: 600; color: #333; border-radius: 32px; background: var(--grd01);}

.dots {display: flex; gap: 8px; width: fit-content; margin: auto;}
.dots > div {padding: 3px; background: rgba(0, 0, 0, 0.45); overflow: hidden; border-radius: 2px; margin: auto; max-width: 300px; transform: rotate(45deg);}
.dots > div > div {width: 8px; aspect-ratio: 1/1; /*box-shadow: 3px 0 5px rgba(0,0,0, 0.2), 0 1px 0 rgba(255, 255, 255, .25) inset;*/ box-shadow: inset 0 0 0px 0.3px #AFFBFF, inset 0 0 3px 0px #24F1FB; line-height: 18px; text-align: center; font-weight: 600; color: #333; border-radius: 0px; /*background: var(--grd01)*/;}

.dots[score="1"] > div:nth-of-type(1n+2) > div {opacity: 0;}
.dots[score="2"] > div:nth-of-type(1n+3) > div {opacity: 0;}
.dots[score="3"] > div:nth-of-type(1n+4) > div {opacity: 0;}
.dots[score="4"] > div:nth-of-type(1n+5) > div {opacity: 0;}
.dots[score="5"] > div:nth-of-type(1n+6) > div {opacity: 0;}
/***********/










/**** FÄHIGKEITEN ****/
#skills {container-name: skills; container-type: inline-size;}
.skills {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(6,1fr);}
.skills > div {background: #6d6da036; backdrop-filter: blur(30px); padding: 32px 16px; border-radius: 8px; position: relative; display: flex; flex-direction: column; gap: 16px; pointer-events: none;}
.skills > div:after {content: ""; display: block; width: 32px; height: 1px; background: #79ebff; box-shadow: 0 0 5px #79ebff, 0 0 10px #79ebffa8; position: absolute; bottom: 0px; left: calc(50% - 16px);}


.skills > div .ttl {display: block; text-align: center; font-weight: 500; color: #FFF; text-shadow: 0 0 5px #FFFFFF61, 0 0 10px #FFFFFF47;}

.skills > div .icon {width: 100%; max-width: 192px; margin: auto;}
.skills > div .icon img {display: block; width: 100%;}


@media screen and (min-width : 681px){
.skani_01 {filter: blur(150px); opacity: .05; transform: translate(850px, -180px) scale(2.0); transition: all 2s, order 0s;}
.skani_02 {filter: blur(150px); opacity: .05; transform: translate(-920px, -380px) scale(2.0); transition: all 1.8s, order 0s;}
.skani_03 {filter: blur(150px); opacity: .05; transform: translate(360px, -200px) scale(2.0); transition: all 3.2s, order 0s;}
.skani_04 {filter: blur(150px); opacity: .05; transform: translate(500px, 110px) scale(2.0); transition: all 3.1s, order 0s;}
.skani_05 {filter: blur(150px); opacity: .05; transform: translate(760px, -70px) scale(2.0); transition: all 1.85s, order 0s;}
.skani_06 {filter: blur(150px); opacity: .05; transform: translate(270px, -450px) scale(2.0); transition: all 2.1s, order 0s;}
.skani_07 {filter: blur(150px); opacity: .05; transform: translate(-870px, 210px) scale(2.0); transition: all 2.6s, order 0s;}
.skani_08 {filter: blur(150px); opacity: .05; transform: translate(910px, -90px) scale(2.0); transition: all 1.8s, order 0s;}
.skani_09 {filter: blur(150px); opacity: .05; transform: translate(910px, -520px) scale(2.0); transition: all 2s, order 0s;}
.skani_10 {filter: blur(150px); opacity: .05; transform: translate(1020px, 10px) scale(2.0); transition: all 3.0s, order 0s;}
.skani_11 {filter: blur(150px); opacity: .05; transform: translate(-1270px, -370px) scale(2.0); transition: all 1.95s, order 0s;}
.skani_12 {filter: blur(150px); opacity: .05; transform: translate(-960px, -490px) scale(2.0); transition: all 2.8s, order 0s;}
.skani_13 {filter: blur(150px); opacity: .05; transform: translate(-840px, 280px) scale(2.0); transition: all 2.1s, order 0s;}
.skani_14 {filter: blur(150px); opacity: .05; transform: translate(480px, 120px) scale(2.0); transition: all 3.1s, order 0s;}

#skills.scrolled .skills > div {filter: blur(0px); transform: translate(0px, 0px); opacity: 1;}
}


/*Anordnung und Größe*/

[skill="photoshop"], [skill="illustrator"], [skill="html"], [skill="css"] {grid-column: span 2;}


@container skills (max-width : 1500px) {
	.skills {grid-template-columns: repeat(4,1fr)};
	[skill="html"] {order: 1;}
	[skill="css"] {order: 2;}
	[skill="jquery"] {order: 3;}
	[skill="photoshop"] {order: 4;}
	[skill="javascript"] {order: 5;}
	[skill="xd"] {order: 6;}
	[skill="illustrator"] {order: 7;}
	[skill="vsc"] {order: 8;}
	[skill="accessibility"] {order: 9; grid-column: span 2;}
	[skill="pagespeed"] {order: 10; grid-column: span 2;}
	[skill="seo"] {order: 11;}
	[skill="php"] {order: 12;}
	[skill="mysql"] {order: 13;}
	[skill="wordpress"] {order: 14;}
}

@container skills (max-width : 1100px) {
	.skills {grid-template-columns: repeat(3,1fr);}
	[skill="html"] {order: 1;}
	[skill="jquery"] {order: 2; grid-column: span 1;}
	[skill="css"] {order: 3;}
	[skill="vsc"] {order: 4;}
	[skill="xd"] {order: 5;}
	[skill="photoshop"] {order: 6;}
	[skill="javascript"] {order: 7;}
	[skill="illustrator"] {order: 8;}
	[skill="accessibility"] {order: 9; grid-column: span 1;}
	[skill="pagespeed"] {order: 10; grid-column: span 1;}
	[skill="seo"] {order: 11;}
	[skill="php"] {order: 12;}
	[skill="mysql"] {order: 13;}
	[skill="wordpress"] {order: 14;}
}

@container skills (max-width : 850px) {
	.skills {grid-template-columns: repeat(2,1fr);}
	.skills > div {grid-column: span 1 !important;}
	.skills > div .icon {max-width: 160px;}
	[skill="html"] {order: 1;}
	[skill="css"] {order: 2;}
	[skill="photoshop"] {order: 3;}
	[skill="illustrator"] {order: 4;}
	[skill="jquery"] {order: 5;}
	[skill="xd"] {order: 6;}
	[skill="vsc"] {order: 7;}
	[skill="javascript"] {order: 8;}
	[skill="accessibility"] {order: 9; grid-column: span 1;}
	[skill="pagespeed"] {order: 10; grid-column: span 1;}
	[skill="seo"] {order: 11;}
	[skill="php"] {order: 12;}
	[skill="mysql"] {order: 13;}
	[skill="wordpress"] {order: 14;}

}

/*
@media screen and (max-width : 680px){
	.skills > div {opacity: 0;}
	#skills.scrolled [skill="html"] {animation: skill_fadein 0.5s 0s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="css"] {animation: skill_fadein 0.5s .2s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="photoshop"] {animation: skill_fadein 0.5s .4s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="illustrator"] {animation: skill_fadein 0.5s .6s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="jquery"] {animation: skill_fadein 0.5s .8s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="xd"] {animation: skill_fadein 0.5s 1s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="vsc"] {animation: skill_fadein 0.5s 1.2s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="javascript"] {animation: skill_fadein 0.5s 1.4s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="accessibility"] {animation: skill_fadein 0.5s 1.6s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="pagespeed"] {animation: skill_fadein 0.5s 1.8s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="seo"] {animation: skill_fadein 0.5s 2s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="php"] {animation: skill_fadein 0.5s 2.2s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="mysql"] {animation: skill_fadein 0.5s 2.4s forwards ease-in-out; animation-iteration-count: 1;}
	#skills.scrolled [skill="wordpress"] {animation: skill_fadein 0.5s 2.6s forwards ease-in-out; animation-iteration-count: 1;}

	@keyframes skill_fadein { 0% {opacity: 0;} 100% {opacity: 1;} }
}
*/

@container skills (max-width : 480px) {
	.skills > div {padding: 16px 8px;}
	.skills > div .icon {width: 100%;}
	.skills > div .ttl {hyphens: auto;}
	.skills .dots {gap: 4px;}
	.skills .dots > div {padding: 2px;}
}

/***********/









/**** DOKUMENTE ****/
#documents {container-name: documents; container-type: inline-size;}
.docs {display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gp1-r);}
.docs .card {/*background: #6d6da036; backdrop-filter: blur(30px);*/ padding: 32px 16px; border-radius: 8px; position: relative; display: flex; flex-direction: column; gap: 16px; overflow: hidden;}

/*FadeIn*/
@media screen and (min-width : 681px){
	.docs .card {transform: perspective(1500px) rotateY(90deg); filter: blur(20px);}
	.scrolled .docs .card {transform: perspective(1500px) rotateY(0deg); filter: blur(0px);}
	.docs .card:nth-of-type(1) {transition: all .8s 0.4s;}
	.docs .card:nth-of-type(2) {transition: all .8s 0.6s;}
	.docs .card:nth-of-type(3) {transition: all .8s 0.8s;}
	.docs .card:nth-of-type(4) {transition: all .8s 1.0s;}
	.docs .card:nth-of-type(5) {transition: all .8s 1.2s;}
	.docs .card:nth-of-type(6) {transition: all .8s 1.4s;}
}

.docs .card .content {position: relative; z-index: 10; display: flex; height: 100%; flex-direction: column; gap: 8px; justify-content: space-between;}
.docs .card .content .txt {display: flex; flex-direction: column; gap: 8px;}

.docs .icon {display: block; width: 96px; aspect-ratio: 700/748; background: url(/img/pdf-icon.webp) center no-repeat; background-size: contain; margin: 0 auto;}
.docs .line {display: block; width: 121px; aspect-ratio: 385/92; background: url(/img/divider01.webp) center no-repeat; background-size: contain; margin: -8px auto 0 auto;}
.docs .ttl {display: block; text-align: center; font-size: var(--fs-xs1); font-weight: 300; letter-spacing: 2.5px; color: #FFF; text-transform: uppercase;}
.docs .ttl span {display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0px; font-size: var(--fs1);}
.docs .buttonwrap {margin-top: var(--gp1-r-xl2);}


.docs .card .background {position: absolute; inset: 0; background: #3b3b685e; backdrop-filter: blur(30px); z-index: 0;}

.docs .card .overlay01 {
--radius: 800px;

position: absolute;
inset: 0;
background-image: url('/test0.png');
background-size: cover;
background-position: center;
pointer-events: none;

opacity: 0;
mask-image: url(/img/alphamask01.png);
mask-mode: alpha;
mask-size: var(--radius);
transition: mask-position 0.05s ease, opacity 0.4s;

mix-blend-mode: overlay;

display: none;
}
.card:hover .overlay01 {opacity: 1;}




.docs .card .overlay02 {
	--radius: 800px;
	position: absolute;
	inset: 0;

	filter: blur(10px);
	background: url(/img/docs_overlay.webp) center repeat;
	background-size: cover;
	opacity: 0.15;
	mask-image: url(/img/alphamask01.webp);
	mask-mode: alpha;
	mask-size: var(--radius);
	mask-position: -2000px -2000px;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	transition: opacity 0.4s;
	mix-blend-mode: color-dodge;
}
/*.card:hover .overlay02 {opacity: .15;}*/

.docs .card:nth-of-type(1) .overlay02 {background-position: 0 0;}
.docs .card:nth-of-type(2) .overlay02 {background-position: -250px 150px;}
.docs .card:nth-of-type(3) .overlay02 {background-position: -400px -50px;}
.docs .card:nth-of-type(4) .overlay02 {background-position: 0px 150px;}
.docs .card:nth-of-type(5) .overlay02 {background-position: 250px 150px;}
.docs .card:nth-of-type(6) .overlay02 {background-position: 500px 0px;}


.card:hover .overlay03 {opacity: 1;}



@container documents (max-width : 1050px) {
	.docs {grid-template-columns: repeat(2,1fr);}
	.docs .icon {width: 64px;}
	.docs .line {width: 104px;}
}

@container documents (max-width : 480px) {
	.docs {grid-template-columns: repeat(1,1fr);}
	.docs .icon {width: 64px;}
	.docs .line {width: 104px;}
}

/***********/









/**** FOOTER ****/
.footwrapper {display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gp1-r); padding: var(--gp1-r-xl1) 0;}
.footwrapper .ttl {font-size: var(--fs-xl1); font-weight: 500; color: #FFF;}

.foot_contact {margin-top: calc((var(--gp1-r-xl1) + var(--gp1-r) + var(--gp1-r)) * -1); background: linear-gradient(-40deg, #946da036 0%, #6d6da036 20%, #6d6da036 60%, #56568036 60%, #56568036 70%, #5deaff36 100%); padding: 32px; backdrop-filter: blur(30px); border-radius: 8px;}
.foot_links {grid-column: span 2; padding-left: 32px;}
.footlinks li div {width: 5px; height: 5px; border: 1px solid #24F1FB; transition: all .4s;}
.footlinks li:hover div {border: 1px solid #FFF; background: #FFF; box-shadow: 0 0 8px #FFF;}
.footlinks li {display: flex; align-items: center; gap: 16px; padding: 4px 0;}



@media screen and (max-width : 800px){
	.footwrapper {display: grid; grid-template-columns: repeat(1,1fr);}
	.foot_links {grid-column: span 1;}
}
/***********/