/* nunito-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-sans-v15-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-sans-v15-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* nunito-sans-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/nunito-sans-v15-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-sans-v15-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* CSS reset */
*,:after,:before{box-sizing:border-box}hr,input[type=search]{box-sizing:content-box}img,legend{border:0}*,legend,td,th{padding:0}*{margin:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}hr{height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}table{border-spacing:0;border-collapse:collapse}

html, body { height: 100%; width: 100%; background: #000; font: 100% "Nunito Sans", sans-serif; }

.no-js .main-content { height:100%; }
.main-content section { background-size: cover; background-position: 50%; background-repeat: no-repeat; }
.no-js .main-content section { padding-top:4%; }

/* Baustelle */
.logo { padding-left:0px !important; }
.adresse { color:#fff; margin-right:4em; }
.nudia { color:#e50051; }
a { color:#fff; }
.intro { max-width:25vw; }
.no-js .main-content .intro p { white-space:normal !important; }


.s3d,
.s3d__side { overflow:hidden; }
.s3d { height:100%; position:relative; }
.s3d__navigation { position:fixed; top:10%; right:0; z-index:100; -webkit-transform:translateY(-8.5%); -ms-transform:translateY(-8.5%); transform:translateY(-8.5%); }
.no-js .s3d__navigation { position:fixed; }
.s3d__navigation-item { list-style: none; margin-bottom:5px; }
.s3d__navigation-item.active .s3d__navigation-link { color:#e50051; right:0; opacity:1; }
.s3d__navigation-item.active .s3d__navigation-link:after { background:-webkit-radial-gradient(#e50051, #b37400); background:radial-gradient(#e50051, #b37400); }
.s3d__navigation-link { text-decoration:none; outline:0; display:block; height:29px; padding:2px 100px 2px 30px; border-radius:12px 0 0 12px; background:-webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)); background:linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)); font-size:20px; color:#fff; position:relative; right:-30px; opacity:0.7; -webkit-transition:all 0.5s cubic-bezier(0.175, 0.885, 0.32, 2.4); transition:all 0.5s cubic-bezier(0.175, 0.885, 0.32, 2.4); }
.s3d__navigation-link:after,
.s3d__navigation-link:before { content:""; display:block; border-radius:50%; position:absolute; }
.s3d__navigation-link:before { width:18px; height:18px; background:#fff; top:5px; left:5px; }
.s3d__navigation-link:after { width:14px; height:14px; background:-webkit-radial-gradient(#f2f2f2, #a6a6a6); background:radial-gradient(#f2f2f2, #a6a6a6); box-shadow:inset 0 0 1px #000; top:7px; left:7px; }
.s3d__navigation-link:hover { right:-10px; opacity:1; }
.s3d__content { height: 100%; position:relative; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:all 0.5s linear; transition:all 0.5s linear; }
.s3d__side { width:100%; height:100%; position:absolute; -webkit-backface-visibility:hidden; backface-visibility:hidden; }

.no-js .main-content section { width:100%; height:100%; }

.no-js .trans-bg,
.s3d__side.active .trans-bg { left: -1%; }
.no-js .main-content section h1,
.no-js .main-content section p,
.no-js .main-content .cta-button,
.s3d__side.active h1,
.s3d__side.active p,
.s3d__side.active .cta-button { margin-left:0; }

.main-content section.active { z-index:150 !important; }

.trans-bg { background-color:rgba(0,0,0,.8); position:absolute; left:-100%; top:7%; padding:15px 30px 25px 5%; color:#fff; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.8); border-radius:1px; -webkit-transition:left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); transition:left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); }
.no-bg-col { background-color:transparent; padding-top:0; padding-bottom:0; }
.no-js .trans-bg { position:static; }

.no-js .main-content h1,
.s3d__side h1 { color:#fff; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.8); margin-left:-100%; margin-bottom:0.5em; -webkit-transition:margin-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); transition:margin-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); transition-delay:.25s; font-size:3em; line-height:1.2; white-space: nowrap; }

.no-js .main-content p,
.s3d__side p { margin:15px 0 10px 0; color:#fff; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.8); margin-left:-100%; -webkit-transition:margin-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); -webkit-transition-delay: .5s; transition:margin-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); transition-delay:.5s; font-size:1.28em; line-height:1.4; white-space: nowrap; }

.main-content .content { display:none; }

.cta-button { display:inline-block; margin-top:20px; margin-left:-100%; padding:10px 20px; font-size:1.28em; color:#fff; background-color:#007BFF; border:none; border-radius:5px;	text-decoration:none; -webkit-transition:margin-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); transition:margin-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); transition-delay:.75s; }
.cta2 { background-color:#e50051; -webkit-transition:margin-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); transition:margin-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05); transition-delay:1s; }
.cta-button:hover { background-color: #0056b3; }
.cta-button.active { background-color:#e50051; }

.logo { color:#fff; font-size: 3em; padding-left: 32px; font-weight: bold; }
.logo span { color:#e50051; }

ul,ol { margin-left:15px; }

/* Mouse Scroll: Yurij Rightblog.ru */
.mouse_scroll {
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 100px;
  margin-top: 125px;
  position:absolute;
  bottom:3%;
  right:3%;
}


.m_scroll_arrows
{
  display: block;
  width: 5px;
  height: 5px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
   
  border-right: 2px solid #e50051;
  border-bottom: 2px solid #e50051;
  margin: 0 0 3px 4px;
  
  width: 16px;
  height: 16px;
}


.unu
{
  margin-top: 1px;
}

.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}

.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}

.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -6px;
}

.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -6px;
}

.mouse {
  height: 42px;
  width: 24px;
  border-radius: 14px;
  transform: none;
  border: 2px solid #e50051;
  top: 170px;
}

.wheel {
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: #e50051;
  position: relative;
  
  height: 4px;
  width: 4px;
  border: 2px solid #e50051;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}

.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
  animation: mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-moz-keyframes mouse-wheel {
  0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@-o-keyframes mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@keyframes mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}





/* Baustelle */

@media only screen and (min-height: 730px) {
	.mouse_scroll { display:none; }
}
@media only screen and (max-height: 729px) {
	.mouse_scroll { display:block; }
}

@media only screen and (min-width: 630px) { /* ab 630px große Bilder laden */
	.main-content section:nth-child(1) { background-image: url("../img/technology-6701504_1920.jpg"); } /* Startseite */
	.main-content section:nth-child(2) { background-image: url("../img/abstract-5035778_1920.jpg"); } /* Leistungen */
	.main-content section:nth-child(3) { background-image: url("../img/technology-7111755_1920.jpg"); } /* Referenzen */
	.main-content section:nth-child(4) { background-image: url("../img/web-3963945_1920.jpg"); } /* Kontakt */
	.main-content section:nth-child(5) { background-image: url("../img/ai-generated-8540914_1920.jpg"); } /* Datenschutz */
	.main-content section:nth-child(6) { background-image: url("../img/ai-generated-8136172_1920.png"); } /* Impressum */
}
@media only screen and (max-width: 630px) { /* ab 630px große Bilder laden */
	.main-content section:nth-child(1) { background-image:none; } /* Startseite */
}

@media only screen and (max-width: 1450px) {
	.s3d__navigation { top:17%; background:rgba(0,0,0,.65); padding:1.5em 2em; margin-top:2em; margin-right:5%; border-radius:12px; }
	.adresse { margin-right:0; }
	.intro { max-width: 30vw; padding:1.5em 2em; background: rgba(0,0,0,.65); margin-top:2em; border-radius:12px; }
	.no-js .main-content p:first-of-type { margin-top:0; }
	.logo { margin-top:-20px; }
	.no-js .main-content h1, .s3d__side h1 { text-align:center; }
}

@media only screen and (max-width: 1150px) {
	body { text-align:center; }
	.full-mobile { display:block; }
	.hide-mobile { display:none; }
	.nudia,
	.small-mobile { font-size:75%; }
	.intro { max-width: 100vw; }
	.no-js .main-content h1, .s3d__side h1 { white-space:normal; line-height:1; margin-bottom:540px }
	.no-js .s3d__navigation { position:static; margin-left:5%; margin-bottom:5%; }
	.main-content section { background-position:50% -60px;  }
	.no-js .trans-bg { min-height:840px; }
	.no-js .main-content section { height:auto; }
}

@media only screen and (max-width: 630px) {
	.nudia,
	.small-mobile { font-size:50%; }
	.no-js .main-content h1, .s3d__side h1 { padding-top:0.5em; line-height:.8; background-image: url("../img/technology-6701504_1920_mobile.jpg"); background-size:cover; background-repeat:no-repeat; background-position:center top; height:555px; margin-bottom:0; }
	.no-js .trans-bg { min-height:auto; }
	.trans-bg { padding:0; }
	.no-js .main-content section { padding-top:0 }
	.main-content section { background-position: center top; background-size: contain; }
	.intro { margin-top:-90px; padding-top:0; background-color:transparent; }
	.no-js .s3d__navigation { padding:1.5em 2em; margin:0; }
}

@media only screen and (max-width: 480px) {
	.nudia,
	.small-mobile { font-size:30%; line-height:0; }
	.full-mobile { line-height:0.5; }
	.no-js .main-content p { font-size:100%; }
	.intro { margin-top:-60px; }
}