* {
	box-sizing: border-box;
	scrollbar-color: #F6931D transparent;
	cursor: none;
}
html, body{
	font-family: var(--main-font), sans-serif;
	min-height: 100vh;
	height: 100dvh;
	margin: 0;
	padding: 0;
	background-color: var(--background-main);
	font-size: 1.8vh;
	touch-action: pan-x pan-y;
	overflow: hidden;
}
@media (max-width: 768px) {
	html, body{font-size: 3vw;}
}
/*-------------------------*/
.switcher{position: fixed;top: 5rem;right: 1rem; width: 6rem;border: 0.1rem solid #000;display: flex;height: 3rem;z-index: 9999;justify-content: center;align-items: center; border-radius: 0.2rem;}
.switcher > a{display: flex;height: 100%;width: 100%;text-align: center;justify-content: center;align-items: center;text-decoration: none;font-weight: 500;font-size: 2rem;color: #000;opacity: 0.3;}
.switcher > a:first-child{background: #d65e5e;border-top-left-radius: 0.2rem;border-bottom-left-radius: 0.2rem;}
.switcher > a:nth-child(2){background: #c3e32d;}
.switcher > a:nth-child(3){background: #f4e5b8;}
.switcher > a:last-child{background: #66a6c5;border-top-right-radius: 0.2rem;border-bottom-right-radius: 0.2rem;}
.switcher > a.current{opacity: 1;}
.switcher > a:hover{opacity: 1;}
/*-------------------------*/
main{background: #f3f1ed; scroll-snap-type: y mandatory; overflow-y: scroll;height: 100dvh;}
main[data-theme="default"] section.regular[data-num]:not(:first-child):not(:nth-child(6))::before{content: attr(data-num); font-size: 30rem; opacity: 0.05; position:absolute; top:0; font-weight: 900; letter-spacing: -5rem;}
main[data-theme="default"] section:is(.regular, .last)[data-comment]:not(:first-child)::after{font-size:1.2rem; text-align: right; content: attr(data-comment); width: 80%; position:absolute; top:4rem; border-bottom: 0.1rem solid var(--font-color); padding: 0.5rem 0; left: 10%;}
main[data-theme="grid"]{
	background-image: linear-gradient(#e5e1d850 0.1rem, transparent 0.1rem), linear-gradient(90deg, #e5e1d850 0.1rem, transparent 0.1rem);
	background-size: 10rem 10rem;
}
header{display:flex; justify-content: space-between; position:absolute; top:0; left:0; height: 5rem; width: 100%; padding:1rem 3rem; z-index: 999;}
header #menu{width: 3rem; height:3rem; mask-image: url('../svg/menu.svg'); mask-size: contain; background-color: #000; display:none; position: fixed; top:1rem; right: 3rem;}
header img{height: 100%;}
footer{position:absolute; bottom:0; left:50%; transform: translateX(-50%); display: block; padding:1rem 0; z-index: 99; user-select:none; display:flex; flex-direction:column; gap:1rem;}
footer > div{display:flex; justify-content: center; gap:1rem; text-align:center;}
footer > div a{color: var(--font-color); text-decoration:none;}
footer > div a:hover{text-decoration:underline;}

main[data-theme="grid"] footer{height: 6rem; border-top: 0.1rem solid #D8D8D8; width:100%;}
/*-------------------------*/
section:is(.regular, .last, .blank){height: 100dvh;position:relative;display: flex;flex-direction: column;justify-content: center;border-top: 0.1rem solid #D8D8D8;border-bottom: 0.1rem solid #D8D8D8;padding: 0 10%;gap: 1rem; scroll-snap-align: center; user-select:none;}
section:is(.regular, .last)[data-background="accent"]{background-color: var(--background-accent);}
section.regular .pack{display:flex; gap:1.5rem; flex-direction: column;}
section.regular .pack2{display:flex; gap:1rem; width:100%;}
section.regular > img{max-width: 100%;max-height:100%;position: absolute; object-fit: contain; z-index:99;}
main[data-theme="default"] section.regular:first-child[data-toptext]::after{content: attr(data-toptext); white-space: nowrap; font-size: 13.5rem; position: absolute; top:3rem; left:0; text-transform: uppercase; font-weight: 700; opacity: 0.05;}

section.regular[data-text-position="left"]{align-items: flex-start;}
section.regular[data-text-position="right"]{align-items: flex-end;}

main[data-theme="default"] section.regular[data-text-position="left"] > img{right:0; max-width: 45%;}
main[data-theme="default"] section.regular[data-text-position="right"] > img{left:10%; max-width: 35%;}
main[data-theme="default"] section.regular[data-img-position="bottom"] > img{bottom:0;}


main[data-theme="grid"] section.regular[data-text-position="right"] > img{left:10%; max-width: 35%; height:80%;}
main[data-theme="grid"] section.regular[data-text-position="left"] > img{right:0;}
main[data-theme="grid"] section.regular[data-img-position="bottom"] > img{height:60%; bottom:0;}
main[data-theme="grid"] section.regular[data-img-position="height"] > img{height:100%; bottom:0;}
main[data-theme="grid"] section.regular[data-img-position="width50"] > img{width:50%; right: 3rem;}
main[data-theme="grid"] section.regular[data-img-position="center"] > img{height:60%; right: 3rem;}
main[data-theme="grid"] section.regular:last-child .read{height:70%; justify-content:space-between;}
main[data-theme="grid"] section.regular:last-child img{bottom: 10rem;}

section.regular :is(h1,h2){color: var(--font-color);text-transform: uppercase;font-size: 8rem;font-weight: 700; margin:0; line-height:0.8;}
main[data-theme="default"] section.regular .title{line-height: 0.75; letter-spacing: -0.7rem;}
section.blank {flex-direction: row; padding: 10%;}
section.blank img{max-height: 100%;}
section.blank .title{color: var(--font-color);text-transform: uppercase;font-size: 8rem;font-weight: 700; line-height: 1;}
main[data-theme="default"] section.blank .title{letter-spacing: -0.7rem;}
section.blank .title span{color: var(--font-accent);}
section.blank .description{color: var(--font-color); font-size: 1.5rem; margin-bottom:1rem;}
section.blank .comment{color: var(--font-secondary); font-size: 1rem; text-transform: uppercase;}
main[data-theme="default"] section.regular :is(h1,h2) span{display:block;}
main[data-theme="default"] section.regular[data-background="light"] .title span{color: var(--font-accent);}
section.regular .read{width: 50%; z-index:99; gap: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; position:relative;}
section.regular .description{font-size: 1.2rem; line-height: 1.2;}
section.regular .description p{color: var(--font-secondary); font-size: 1rem; line-height: 1.2; width: 80%; float:right; text-transform: uppercase; margin: 2rem 0 0 0;}
section.regular[data-background="accent"] .description{color: var(--font-color);}
section.regular button{white-space:nowrap;font-size:1.3rem; height: 4rem; padding: 0 4rem; border-radius: 2rem; display: inline-block; color: var(--font-light); background-color: var(--background-accent); border: 0.1rem solid var(--background-accent); transition: all 0.3s linear;}
section.regular button:hover{color: var(--background-accent); background-color: #ffffff80;}
section.regular .runline{position:absolute; left:0; bottom:0; width:100%; color: var(--font-color); background-color: var(--background-accent); font-weight: 700; font-size: 6rem; text-transform: uppercase;}

main[data-theme="default"] section.regular :is(.title, .description){opacity: 0; transform: translateY(4rem); transition: opacity 3s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1);}
main[data-theme="default"] section.regular.animate :is(.title, .description) {opacity:1; transform: none;}

main[data-theme="grid"] section.regular :is(h1,h2){color: #F6931D; font-size: 2.4rem; opacity: 0;}
main[data-theme="grid"] section.regular .description{color: var(--font-secondary);background: linear-gradient(90deg,#595959 0%,#595959 90%,#F6931D 95%,#F6931D 100%);background-clip: text;-webkit-background-clip: text;	-webkit-text-fill-color: transparent;background-size: 0%;background-repeat: no-repeat;}
main[data-theme="grid"] section.regular.animate :is(h1,h2) {opacity:1; transition: opacity 0.4s ease-in;}
main[data-theme="grid"] section.regular.animate .description {animation: textReveal 1.2s ease-out forwards; animation-delay: 0.5s;}
@keyframes textReveal {to {background-size: 110%;}}
main[data-theme="grid"] section.regular:first-child::before{content:'';width: 1rem;height: 5rem;position:absolute;left:50%;bottom:2%;background-color: #e4e3e1;border-radius: 1rem;transform: translateX(-50%);}
main[data-theme="grid"] section.regular:first-child::after{content:'';width: 0.6rem;height: 2rem;position:absolute;left:50%;bottom: calc(2% + 0.3rem);background-color: #f3f1ed;border-radius: 1rem;transform: translateX(-50%);animation: scrollUp 2s ease infinite;}

@keyframes scrollUp {
	0% {bottom: calc(2% + 0.3rem);}
	50% {bottom: calc(2% + 2.7rem);}
	100% {bottom: calc(2% + 0.3rem);}
}
section.regular .mini {display:flex; gap:1rem;}
section.regular .mini > div {display:flex; flex-direction:column; justify-content: space-between; border:0.1rem solid #dedbd7; background-color: #ebe8e4; padding: 1rem; border-radius: 0.5rem; gap:1rem;}
section.regular .mini .one{font-size:1.6rem; color: var(--font-accent); font-weight: 700; white-space:nowrap;}
section.regular .mini .two{font-size:1rem; line-height: 1.2; color: var(--font-secondary);}
/*-------------------------*/
section.last {align-items:center;}
section.last button{font-size:1.2rem;background-color:#D92D20; border:0.1rem solid #D92D20; padding:1.2rem; border-radius:50%; aspect-ratio: 1; color: #fff; font-weight: 600; box-shadow: 0px 16px 34px 0px #76140E3D; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition:all 0.3s linear;}
section.last button:hover{transform: scale(1.2) translate(-40%, -40%) rotate(15deg);}
section.last button::after{content:''; position: absolute; right: 1.5rem; width:2rem; height:2rem; display: block; mask-image: url('../svg/arrow_rigth.svg'); mask-size: contain; background-color: #fff;}
section.last .title{transform: translateX(-10%); line-height: 0.7;font-size: 12rem; font-weight: 700; letter-spacing: -0.5rem;}
section.last .description{transform: translateX(10%); line-height: 0.75;font-size: 12rem; font-weight: 700; -webkit-text-stroke: 0.1rem var(--font-color); color: var(--background-accent); -webkit-text-fill-color: var(--background-accent); letter-spacing: -0.5rem;}
section.last .read a{font-size:1rem;border:0.1rem solid var(--font-color); color: var(--font-color); border-radius: 2rem; padding: 3rem; text-decoration:none; background-color: var(--background-accent); position: absolute; top: 30%; right: 5%;}
section.last .read a:hover{border:0.1rem solid var(--font-light); color: var(--font-light);}
/*-------------------------*/
section.regular a.site{white-space:nowrap;display: flex; align-items:center; font-size:1.3rem; height: 4rem; padding: 0 4rem; border-radius: 2rem; color: var(--font-accent); border: 0.1rem solid var(--background-accent); transition: all 0.3s linear; text-decoration:none; justify-content: center; background-color: #ffffff80;}
section.regular a.site:hover{color: var(--background-light); background-color: var(--font-accent);}
.hint{position: absolute; right: -100%; bottom: 0;}
.hint span{color: #D92D20;}
.hint a{font-weight:600; color: var(--font-accent); text-decoration: none;}
/*-------------------------*/
.cursor{pointer-events: none; position: fixed; height: 1rem; width: 1rem; border-radius: 1rem; background-color: var(--background-accent); transform: translate(-50%, -50%); transform-origin: top left; z-index:99999; border:0.1rem solid #fff; transition: scale 0.1s linear;}
.click {scale: 0.7;}
.pressable {scale: 2;}
.progress{position:fixed;left:0;top:0;width:100%;height:0.2rem;background:var(--background-accent);transform-origin:left;transform:scaleX(0);z-index:1500}
/*-------------------------*/
.scroll-legend{position:fixed;z-index:100;left:2rem;top:50%;transform:translateY(-50%);width:4rem;display:flex;flex-direction:column;}
.scroll-legend::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.4rem;background:#999;border-radius:.2rem;}
.scroll-legend a{position:relative;height:6rem;display:flex;align-items:center;padding-left:1.5rem;color: var(--font-color);text-decoration:none;font-size:1.3rem;line-height:1;transition:color .3s ease;}
.scroll-legend a::before{content:"";position:absolute;left:0;top:0;width:0.4rem;height:100%;opacity:0;background: var(--font-color);border-radius:.2rem;transition:opacity .35s ease;}
.scroll-legend[data-theme="grid"] a{color: #777;}
.scroll-legend[data-theme="grid"] a::before{background: var(--font-accent);}
.scroll-legend a.active{color: var(--font-color);}
.scroll-legend[data-theme="grid"] a.active{color: var(--font-accent);}
.scroll-legend a.active::before{opacity:1;}
.scroll-legend a span{display:block; transform:rotate(90deg); font-size: 1.4rem; font-weight: 500;}
.scroll-legend a span.tx{display:none;}
@media (max-width: 768px) {
	.scroll-legend{position:fixed;z-index:100;transform:none;left:0;top:0;width:100%;display:none;flex-direction:column; background: var(--background-accent); height: 100dvh; padding: 6rem 2rem 0 2rem;}
	.scroll-legend[data-theme="grid"]{background: var(--background-light);}
	.scroll-legend a{font-size: 2rem; border-bottom: 0.1rem solid #000;}
	.scroll-legend[data-theme="grid"] a{border-bottom: none;}
	.scroll-legend[data-theme="grid"] a.active{background: var(--background-main);}
	.scroll-legend a span{transform:none; font-size: 2rem; font-weight: 900;}
	.scroll-legend[data-theme="grid"] a span{font-weight: 600;}
	.scroll-legend::before{content: none;}
	.scroll-legend a span.num{display:none;}
	.scroll-legend a span.tx{display:block;}
}
/*-------------------------*/
#scrollTop{opacity:0.2;z-index:99; width: 4rem; height: 4rem; border:0.1rem solid var(--background-light); position:fixed; right:2rem; bottom: 2rem; border-radius: 0.5rem; display:none; background-color: var(--background-accent); transition: all 0.3s linear;}
#scrollTop::before{content:""; position:relative; top: -0.2rem; width: 4rem; height: 4rem; mask-image: url('../svg/arrow.svg'); mask-size: 50%; background-color: #fff; display: block; mask-repeat: no-repeat; mask-position: center;}
@keyframes bounceArrow {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(4px); }
  50%  { transform: translateY(-12px); }
  80%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}
/*-------------------------*/
.request-modal {backdrop-filter: blur(0.25rem); user-select:none; position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s;}
.request-modal.is-open {visibility: visible; opacity: 1;}
.modal_overlay {position: absolute; inset: 0; background: rgba(0, 0, 0, .65);}
.modal_content {width: 60%;display: flex; position: relative; z-index: 1; background: #fff; border-radius: 1rem; overflow: hidden;}
.modal_content form{padding:4rem; display:flex; flex-direction: column; gap:2rem; width:100%;}
.modal_content form .input{display:flex; flex-direction: column; flex: 1;}
.modal_content form label{text-transform: uppercase; font-weight: 600;}
.modal_content span{font-size:0.8rem; color: #17191A7A;}
.modal_content span.required{color: #D92D20;}
.modal_content form input{width:100%; height: 3rem; border: none; border-bottom: 0.1rem solid #17191A47; outline: none; font-size: 1rem;}
.modal_content form textarea{font-size: 1rem; padding: 1rem 0; width:100%; border: none; border-bottom: 0.1rem solid #17191A47; height: 6rem; outline: none;}
.modal_content button[type=submit]{transition: all 0.3s linear; height: 4rem; padding: 0 4rem; border-radius: 2rem; background-color: #D92D20; color: #fff; border: 0.1rem solid #D92D20; font-weight: 600; font-size: 1rem;}
.modal_content button[type=submit]:hover{background-color: #fff; color: #D92D20;}
main[data-theme="grid"] + .request-modal .modal_content {background-color: var(--background-main); border-radius: 0.5rem;}
main[data-theme="grid"] + .request-modal .modal_content form{padding: 2rem;}
main[data-theme="grid"] + .request-modal .modal_content form input{border: 0.1rem solid #17191A47; border-radius: 0.5rem; padding: 0 1rem;}
main[data-theme="grid"] + .request-modal .modal_content form textarea{border: 0.1rem solid #17191A47; border-radius: 0.5rem; padding: 1rem;}
main[data-theme="grid"] + .request-modal .modal_content form label{font-weight: 400;}
main[data-theme="grid"] + .request-modal .modal_content form .input{gap:0.5rem;}
main[data-theme="grid"] + .request-modal .modal_content form::before {content:'Kontaktformular'; display:block; font-size: 1.5rem; border-bottom: 0.1rem solid #17191A47; padding-bottom: 1rem;}
main[data-theme="grid"] + .request-modal .modal_content button[type=submit]{border: 0.1rem solid var(--background-accent); background-color: var(--background-accent); border-radius: 0.5rem;}
main[data-theme="grid"] + .request-modal .modal_content button[type=submit]:hover{background-color: #fff; color: var(--background-accent);}

.modal_content .split{display:flex; gap:1rem; justify-content: flex-end;}
.modal_content .help{color: #00000060; font-weight: 600; display: none;align-items: flex-end;gap: 0.5rem;}
.modal-close {position: absolute; top:2rem; right:2rem; width: 1.5rem; height: 1.5rem; mask-image: url('../svg/times.svg'); mask-size: contain; background-color: #000; transition: all 0.4s ease-in-out;}
.modal-close:hover {transform: rotate(180deg);}
.modal_side {padding:4rem; background-color: var(--background-accent); width: 40%; display:flex; flex-direction: column; justify-content: space-between;}
.modal_side .title{color: #00000060; font-weight: 600;}
.modal_side .split{display:flex; flex-direction: column; justify-content: space-between;}
.modal_side .big{font-size:3rem; font-weight: 600; line-height: 1;}
body.modal-open {overflow: hidden;}
.request-submit:disabled {
    opacity: .5;
    cursor: wait;
}

main[data-theme="grid"] + div.request-modal .modal_side{display:none;}
main[data-theme="grid"] + div.request-modal .modal_content{width: 40%;}
main[data-theme="grid"] + div.request-modal .split{flex-direction:column;}
@media (max-width: 768px) {
	main[data-theme="grid"] + div.request-modal .modal_content{width: 90%;}
}
/*-------------------------*/
@media (max-width: 768px) {
	header #menu{display:block;}
	section.regular{padding: 7rem 1rem 0 1rem; justify-content: flex-start;}
	main[data-theme="grid"] section.regular{padding: 5rem 1rem 0 1rem;}
	section.regular:first-child{justify-content: flex-end;}
	section.regular:first-child .read{margin-bottom:8rem;}
	section.regular > img {max-width:80%; bottom:1rem;}
	
	main[data-theme="default"] section.regular img{max-width: 80% !important;}
	
	main[data-theme="default"] section.regular[data-text-position="left"] > img{right:50%; transform: translateX(50%);}
	main[data-theme="default"] section.regular:first-child > img{top:15%;}
	
	main[data-theme="grid"] section.regular[data-text-position="left"] > img{right:0;}
	main[data-theme="grid"] section.regular[data-img-position="bottom"] > img{height: 40%; max-width: none; bottom:0;}
	main[data-theme="grid"] section.regular[data-text-position="right"] > img{left:10%; top: 15% !important; width: 80%; max-width: 80%; height: auto;}
	main[data-theme="grid"] section.regular[data-img-position="height"] > img{width:100%; height: auto; bottom:0;}
	main[data-theme="grid"] section.regular[data-img-position="width50"] > img{width:100%; height: auto; bottom: 8rem; right:3rem;}
	main[data-theme="grid"] section.regular[data-img-position="center"] > img{height:40%; max-width: calc(100% - 4rem);}
	main[data-theme="grid"] section.regular:not(:first-child)[data-img-position="center"] > img{right: 50%; transform: translateX(50%);}
	main[data-theme="grid"] button.request{width: 100%;}
	main[data-theme="grid"] section.regular:last-child img{bottom: 12rem;}
	
	main[data-theme="default"] section:is(.regular, .last)[data-comment]:not(:first-child)::after{width: 90%; left: 5%;}
		
	section.regular .read{width: 100%;}
	section.regular :is(h1,h2){font-size: 4rem;}
	section.regular .description p {float: none;}
	main[data-theme="default"] section.regular :is(h1,h2){letter-spacing: -0.4rem;}
	section.blank .title{font-size: 4rem;}
	main[data-theme="default"] section.blank .title{letter-spacing: -0.4rem;}
	section.blank img{width:100%;}
	section.regular .runline{font-size: 4rem;}
	main[data-theme="default"] section.regular[data-num]::before{font-size: 22rem;}
	main[data-theme="default"] section.regular:first-child[data-toptext]::after{font-size: 4rem; top:4rem;}
	section.regular .mini {display:none;}
	section.last button{width: 10rem;}
	section.last {text-align:center;}
	section.last .title{font-size: 5rem; transform: translateY(-90%);line-height: 1;}
	section.last .description{font-size: 5rem; transform: translateY(90%);line-height: 1;letter-spacing: 0; paint-order: stroke fill;}
	section.last a{top: 15% !important;}
	section.blank {flex-direction: column; gap:2rem; padding: 6rem 1rem 0 1rem;}
	.modal_content{flex-direction:column;width: 90%;}
	.modal_content form{padding:2rem;gap:1rem;}
	.modal_content .split {justify-content: center;}
	.modal_side{width:100%;padding:2rem;gap:1rem;}
	.cursor{display:none;}
	
	section.regular a.site{width:100%;}
	.hint{position: absolute; right: 0; bottom: -7rem;}
	section.regular .pack{width:100%;}
	section.regular .pack2{flex-direction: column;}
	
	main[data-theme="grid"] section.regular:last-child .read{height:85%;}
}