new landing pages, css, js -> first commit

_inc/_footer-suite-start.php

@@ -51,5 +51,6 @@
         <script src="assets/js/bootstrap/dropdown.js"></script>
         <script src="assets/js/aos/aos.js"></script>
         <script src="assets/js/functions.js"></script>
+        <script src="assets/js/functions-new-landing.js"></script>
     </body>
 </html>

_inc/_header-suite-start.php

@@ -29,7 +29,7 @@
         	<h2 class="sr-only">HazmatSuite</h2>
         	<div class="container">
 				<nav id="ch-ggs-web-suite-nav" class="navbar navbar-expand-lg align-items-lg-start">
-	        		<a href="index.php" class="navbar-brand"><img src="assets/img/logo-hazmat-suite.png" alt="Logo HazmatSuite"></a>
+	        		<a href="index.php" class="navbar-brand"><img src="assets/img/logo-hazmat-suite.png" alt="Logo HazmatSuite" width="297" height="60" class="img-fluid"></a>
 					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ch-ggs-web-suite-toggler-nav" aria-controls="ch-ggs-web-suite-toggler-nav" aria-expanded="false" aria-label="Toggle navigation">
 						<span class="navbar-toggler-bar"></span>
 						<span class="navbar-toggler-bar"></span>

_inc/_sectionArticleNew.php

@@ -0,0 +1,16 @@
+<a href="#" class="row align-items-center ch-ggs-web-suite-article-landing">
+	<div class="col-md-5 order-md-1">
+		<img src="//placehold.it/900x600" class="img-fluid"/>	
+	</div>
+	<div class="col-md-7">
+		<div class="ch-ggs-web-suite-landing-article-content">
+			<h3 class="mt-0 ch-ggs-web-suite-landing-article-title">Der erste Werkzeugkasten</h3>
+			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+			<div class="row">
+				<div class="col-md-6 col-lg-5">
+					<div class="btn btn-block btn-primary">start now</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</a>

_inc/_sectionArticleNewText.php

@@ -0,0 +1,29 @@
+<a href="#" class="row ch-ggs-web-suite-article-landing">
+	<div class="col-md-7">
+		<div class="ch-ggs-web-suite-landing-article-content">
+			<h3 class="mt-0 ch-ggs-web-suite-landing-article-title">Der erste Werkzeugkasten</h3>
+			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+			<div class="row d-none d-md-flex">
+				<div class="col-md-6 col-lg-5">
+					<div class="btn btn-block btn-primary">start now</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-5">
+		<div class="ch-ggs-web-suite-landing-article-content-aside">
+			<ul class="ch-ggs-web-suite-facts-list">
+				<li class="ch-ggs-web-suite-facts-list-item">6 Tools,</li> 
+				<li class="ch-ggs-web-suite-facts-list-item">1284 Funktionen,</li> 
+				<li class="ch-ggs-web-suite-facts-list-item">374 Etiketten,</li> 
+				<li class="ch-ggs-web-suite-facts-list-item">3029 Vorlagen</li>
+				<li class="ch-ggs-web-suite-facts-list-item ch-ggs-web-suite-facts-list-item-important">1 Hazmat Suite</li>
+			</ul>
+			<div class="row d-md-none">
+				<div class="col-md-6 col-lg-5">
+					<div class="btn btn-block btn-primary">start now</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</a>

_inc/_sectionCardsNew.php

@@ -0,0 +1,40 @@
+<?php 
+	$box = array(
+			'SmartIdentify' => array('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+					'ifc ifc-frontal-truck'),
+			'SmartLabel' => array('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.',
+					'ifc ifc-train-front'),
+			'SmartPackage' => array('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+					'ifc ifc-sea-ship-with-containers'),
+			'EasyDGD' => array('Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+					'ifc ifc-air-transport'),
+			'BatteryGuide' => array('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+					'ifc ifc-train-front'),
+			'ADR-Check' => array('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+					'ifc ifc-frontal-truck')
+			
+	)
+?>
+	
+<div class="container">
+	<h2 class="ch-ggs-web-suite-landing-section-title">Die Tools der HazmatSuite auf einen Blick</h2>
+	<p>Starten Sie jetzt durch mit der HazmatSuite! So schnell und effizient haben Sie noch nie mit Gefahrstoffen und Gefahrgut gearbeitet. Sparen Sie nicht nur Zeit, sondern auch Nerven für die Suche nach passender Software.</p>
+	<div class="ch-ggs-web-suite-card-hover-group">
+		<div class="row ch-ggs-web-suite-card-hover-holder">
+			<?php foreach ($box as $key => $value): ?>
+				<div class="col-sm-6 col-lg-4 d-flex">
+					<a href="<?php echo ($key === 'SmartIdentify' ? 'index-smartify.php' : '#') ?>" class="ch-ggs-web-suite-card-hover">
+						<div class="ch-ggs-web-suite-card-hover-main">
+							<h2 class="ch-ggs-web-suite-card-hover-title">
+								<i class="<?php echo $value[1] ?> ch-ggs-web-suite-card-hover-icon"></i>
+								<?php echo $key ?>
+							</h2>
+							<p class="ch-ggs-web-suite-card-hover-text"><?php echo $value[0] ?></p>
+							<div class="btn btn-block btn-iconed btn-iconed-primary ch-ggs-web-suite-card-hover-link">Zum Tool <i aria-hidden="true" class="btn-icon ifc ifc-arrow-right"></i></div>
+						</div>
+					</a>
+				</div>
+			<?php endforeach; ?>
+		</div>
+	</div>
+</div>

assets/css/style.css

@@ -7,8 +7,8 @@
  */
 @font-face {
   font-family: "icomoon";
-  src: url("../fonts/icomoon.eot?un1hhiu");
-  src: url("../fonts/icomoon.eot?un1hhiu#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?un1hhiu") format("truetype"), url("../fonts/icomoon.woff?un1hhiu") format("woff"), url("../fonts/icomoon.svg?un1hhiu#icomoon") format("svg");
+  src: url("../fonts/icomoon.eot?u6kkyr5");
+  src: url("../fonts/icomoon.eot?u6kkyr5#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?u6kkyr5") format("truetype"), url("../fonts/icomoon.woff?u6kkyr5") format("woff"), url("../fonts/icomoon.svg?u6kkyr5#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -9581,6 +9581,10 @@ h3 {
   }
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   display: flex;
   flex-direction: column;
@@ -9894,6 +9898,38 @@ h4 + hr {
   padding-left: 0;
 }
 
+.btn-white {
+  color: #212529;
+  background-color: #fff;
+  border-color: #fff;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+  color: #990099;
+}
+.btn-white:hover {
+  color: #fff;
+  background-color: #990099;
+  border-color: #990099;
+}
+.btn-white:focus, .btn-white.focus {
+  color: #fff;
+  background-color: #990099;
+  border-color: #990099;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(222, 222, 223, 0.5);
+}
+.btn-white.disabled, .btn-white:disabled {
+  color: #212529;
+  background-color: #fff;
+  border-color: #fff;
+}
+.btn-white:not(:disabled):not(.disabled):active, .btn-white:not(:disabled):not(.disabled).active, .show > .btn-white.dropdown-toggle {
+  color: #212529;
+  background-color: #e6e6e6;
+  border-color: #dfdfdf;
+}
+.btn-white:not(:disabled):not(.disabled):active:focus, .btn-white:not(:disabled):not(.disabled).active:focus, .show > .btn-white.dropdown-toggle:focus {
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(222, 222, 223, 0.5);
+}
+
 .modal-dialog {
   max-width: 540px;
 }
@@ -10881,4 +10917,229 @@ a.ch-ggs-web-suite-icon-link {
   to {
     left: 100%;
   }
+}
+.ch-ggs-web-suite-landing-seciton {
+  min-height: 100vh;
+  padding: 120px 0;
+}
+
+.ch-ggs-web-suite-landing-seciton-dark {
+  color: #fff;
+  background: #250025;
+}
+
+.ch-ggs-web-suite-landing-seciton-hero {
+  min-height: calc(100vh - 91px);
+  background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-xs.jpg");
+  background-size: cover;
+}
+
+.ch-ggs-web-suite-landing-section-title {
+  font-size: 32px;
+  display: flex;
+}
+
+.ch-ggs-web-suite-landing-section-title-icon {
+  margin-right: 12px;
+}
+
+.ch-ggs-web-suite-landing-hero-title,
+.ch-ggs-web-suite-landing-hero-text {
+  color: #fff;
+}
+
+.ch-ggs-web-suite-landing-hero-title {
+  font-size: 56px;
+  line-height: 1.418;
+  text-align: left;
+  border-bottom: 0;
+}
+
+.ch-ggs-web-suite-article-landing {
+  margin-bottom: 30px;
+  color: #212529;
+}
+.ch-ggs-web-suite-article-landing:hover, .ch-ggs-web-suite-article-landing:focus {
+  text-decoration: none;
+}
+
+.ch-ggs-web-suite-landing-seciton-dark .ch-ggs-web-suite-article-landing {
+  color: #fff;
+}
+
+.ch-ggs-web-suite-landing-hero-text {
+  font-size: 22px;
+}
+
+.ch-ggs-web-suite-card-hover-text {
+  opacity: 1;
+  transition: all 0.2s ease-in-out;
+  transition-property: opacity;
+  font-size: 18px;
+}
+
+.ch-ggs-web-suite-card-hover {
+  margin-bottom: 30px;
+  padding: 30px;
+  position: relative;
+  z-index: 0;
+  display: flex;
+}
+.ch-ggs-web-suite-card-hover:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: white;
+  transition: all 0.2s ease-in-out;
+  transition-property: transform;
+  transform: scale(1);
+  z-index: -1;
+}
+.ch-ggs-web-suite-card-hover:hover, .ch-ggs-web-suite-card-hover:focus {
+  text-decoration: none;
+}
+.ch-ggs-web-suite-card-hover:hover .ch-ggs-web-suite-card-hover-text, .ch-ggs-web-suite-card-hover:focus .ch-ggs-web-suite-card-hover-text {
+  opacity: 0;
+}
+.ch-ggs-web-suite-card-hover:hover:after, .ch-ggs-web-suite-card-hover:focus:after {
+  transform: scale(1.025);
+}
+
+.ch-ggs-web-suite-card-hover-main {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.ch-ggs-web-suite-card-hover-title {
+  display: flex;
+  font-size: 21px;
+}
+
+.ch-ggs-web-suite-card-hover-icon {
+  margin-right: 12px;
+}
+
+.ch-ggs-web-suite-landing-article-title {
+  margin-top: 20px;
+  font-size: 42px;
+}
+
+.ch-ggs-web-suite-landing-article-content {
+  font-size: 22px;
+}
+
+.ch-ggs-web-suite-facts-list {
+  list-style: none;
+  padding-left: 0;
+  font-size: 22px;
+}
+
+.ch-ggs-web-suite-facts-list-item {
+  margin-bottom: 10px;
+}
+
+.ch-ggs-web-suite-facts-list-item-important {
+  margin-top: 20px;
+  font-weight: bolder;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-item.active > .nav-link {
+  color: #990099;
+}
+
+@media (min-width: 576px) {
+  .ch-ggs-web-suite-landing-seciton-hero {
+    background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-sm.jpg");
+  }
+}
+@media (min-width: 768px) {
+  .ch-ggs-web-suite-landing-seciton-hero {
+    background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-md.jpg");
+  }
+
+  .ch-ggs-web-suite-card-hover-text {
+    opacity: 1;
+    transition: all 0.2s ease-in-out;
+    transition-property: opacity;
+    margin-bottom: 0;
+  }
+
+  .ch-ggs-web-suite-card-hover-link {
+    margin-top: auto;
+    position: absolute;
+    opacity: 0;
+    transition: all 0.2s ease-in-out;
+    transition-property: opacity;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .ch-ggs-web-suite-card-hover:hover .ch-ggs-web-suite-card-hover-text, .ch-ggs-web-suite-card-hover:focus .ch-ggs-web-suite-card-hover-text {
+    opacity: 0;
+  }
+  .ch-ggs-web-suite-card-hover:hover .ch-ggs-web-suite-card-hover-link, .ch-ggs-web-suite-card-hover:focus .ch-ggs-web-suite-card-hover-link {
+    opacity: 1;
+  }
+}
+@media (min-width: 992px) {
+  .ch-ggs-web-suite-landing-seciton-hero {
+    min-height: calc(100vh - 98px);
+    background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-lg.jpg");
+  }
+
+  .ch-ggs-web-suite-landing-nav {
+    position: sticky;
+    z-index: 1;
+    overflow: hidden;
+    top: 0;
+    margin-top: -56px;
+  }
+  .ch-ggs-web-suite-landing-nav, .ch-ggs-web-suite-landing-nav a {
+    color: #fff;
+  }
+  .ch-ggs-web-suite-landing-nav .container {
+    position: relative;
+    z-index: 0;
+    background: #250025;
+  }
+  .ch-ggs-web-suite-landing-nav .container:before, .ch-ggs-web-suite-landing-nav .container:after {
+    content: "";
+    background: #250025;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+    transition: all 0.2s ease-in-out;
+    transition-duration: 0.5s;
+    transition-property: transform;
+    width: calc((100vw - 960px)/2);
+    transform: scaleX(0);
+  }
+  .ch-ggs-web-suite-landing-nav .container:before {
+    right: 100%;
+    transform-origin: right;
+  }
+  .ch-ggs-web-suite-landing-nav .container:after {
+    left: 100%;
+    transform-origin: left;
+  }
+
+  .ch-ggs-web-suite-landing-nav.stuck .container:before,
+.ch-ggs-web-suite-landing-nav.stuck .container:after {
+    transform: scaleX(1);
+  }
+}
+@media (min-width: 1200px) {
+  .ch-ggs-web-suite-landing-seciton-hero {
+    background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-xl.jpg");
+  }
+
+  .ch-ggs-web-suite-landing-nav .container:before, .ch-ggs-web-suite-landing-nav .container:after {
+    width: calc((100vw - 1140px)/2);
+  }
 }/*# sourceMappingURL=style.css.map */

assets/js/functions-new-landing.js

@@ -0,0 +1,66 @@
+jQuery(document).ready(function($) {
+	
+	(function() {
+		const sections = [
+			  document.getElementById('ch-ggs-web-suite-section-01'),
+			  document.getElementById('ch-ggs-web-suite-section-02'),
+			  document.getElementById('ch-ggs-web-suite-section-03'),
+			];
+			
+			const navItems = {
+			  'ch-ggs-web-suite-section-01': document.getElementById('ch-ggs-web-suite-nav-item-01'),
+			  'ch-ggs-web-suite-section-02': document.getElementById('ch-ggs-web-suite-nav-item-02'),
+			  'ch-ggs-web-suite-section-03': document.getElementById('ch-ggs-web-suite-nav-item-03'),
+			};
+			
+			// intersection observer setup
+			const observerOptions = {
+			  root: null,
+			  rootMargin: '0px',
+			  threshold: 0.7,
+			};
+			
+			function observerCallback(entries, observer) {
+			  entries.forEach((entry) => {
+			    if (entry.isIntersecting) {
+			      // get the nav item corresponding to the id of the section
+			      // that is currently in view
+			      const navItem = navItems[entry.target.id];
+			      // add 'active' class on the navItem
+			      navItem.classList.add('active');
+			      // remove 'active' class from any navItem that is not
+			      // same as 'navItem' defined above
+			      Object.values(navItems).forEach((item) => {
+			        if (item != navItem) {
+			          item.classList.remove('active');
+			        }
+			      });
+			    }
+			  });
+			}
+			
+			const observer = new IntersectionObserver(observerCallback, observerOptions);
+			
+			sections.forEach((sec) => observer.observe(sec));
+	})();
+	
+	(function() {
+			
+		const sentinelEl = document.getElementById('ch-ggs-web-suite-landing-nav-trigger');
+		const headerEl = document.getElementById('ch-ggs-web-suite-landing-nav');
+		const stuckClass = 'stuck';
+		
+		const handler = (entries) => {
+		  if (headerEl) {
+		    if (!entries[0].isIntersecting) {
+		      headerEl.classList.add(stuckClass);
+		    } else {
+		      headerEl.classList.remove(stuckClass);
+		    }
+		  }
+		}
+		
+		const observer = new window.IntersectionObserver(handler);
+		observer.observe(sentinelEl);
+	})();
+})

assets/scss/_layout.scss

@@ -3,6 +3,10 @@
 
 // stretch content -> sticky footer
 
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	display: flex;
 	flex-direction: column;

assets/scss/_project.scss

@@ -104,6 +104,11 @@ h4 + hr {
 	padding-left: 0;
 }
 
+.btn-white {
+	@include button-variant($white, $white, $primary, $primary);
+	color: $primary;
+}
+
 //modal
 .modal-dialog {
 	max-width: 540px;
@@ -1157,3 +1162,254 @@ a.ch-ggs-web-suite-icon-link {
 	95% { left: 120%; width: 80%}
 	to { left: 100%; }
   }
+
+
+// new landing
+
+.ch-ggs-web-suite-landing-seciton {
+	min-height: 100vh;
+	padding: 120px 0;
+}
+
+.ch-ggs-web-suite-landing-seciton-dark {
+	color: $white;
+	background: $primary-d-200;
+}
+
+.ch-ggs-web-suite-landing-seciton-hero {
+	min-height: calc(100vh - 91px);
+	background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xs.jpg');
+	background-size: cover;
+}
+
+.ch-ggs-web-suite-landing-section-title {
+	font-size: 32px;
+	display: flex;
+}
+
+.ch-ggs-web-suite-landing-section-title-icon {
+	margin-right: 12px;
+}
+
+.ch-ggs-web-suite-landing-hero-title,
+.ch-ggs-web-suite-landing-hero-text {
+	color: $white;
+}
+
+.ch-ggs-web-suite-landing-hero-title {
+	font-size: 56px;
+	line-height: 1.418;
+	text-align: left;
+	border-bottom: 0;
+}
+
+.ch-ggs-web-suite-article-landing {
+	margin-bottom: $grid-gutter-width;
+	color: $body-color;
+
+	&:hover,
+	&:focus {
+		text-decoration: none;
+	}
+}
+
+.ch-ggs-web-suite-landing-seciton-dark .ch-ggs-web-suite-article-landing {
+	color: $white;
+}
+
+.ch-ggs-web-suite-landing-hero-text {
+	font-size: 22px;
+}
+
+.ch-ggs-web-suite-card-hover-text {
+	opacity: 1;
+	transition: $transition-base;
+	transition-property: opacity;
+	font-size: 18px;
+}
+
+.ch-ggs-web-suite-card-hover {
+	margin-bottom: $grid-gutter-width;
+	padding: 30px;
+	position: relative;
+	z-index: 0;
+	display: flex;
+	&:after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background: white;
+		transition: $transition-base;
+		transition-property: transform;
+		transform: scale(1);
+		z-index: -1;
+	}
+	
+	&:hover,
+	&:focus {
+		text-decoration: none;
+		.ch-ggs-web-suite-card-hover-text {
+			opacity: 0;
+		}
+		&:after {
+			transform: scale(1.025);
+		}
+
+	}
+}
+
+.ch-ggs-web-suite-card-hover-main {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+.ch-ggs-web-suite-card-hover-title {
+	display: flex;
+	font-size: 21px;
+}
+
+.ch-ggs-web-suite-card-hover-icon {
+	margin-right: 12px;
+}
+
+.ch-ggs-web-suite-landing-article-title {
+	margin-top: 20px;
+	font-size: 42px;
+}
+
+.ch-ggs-web-suite-landing-article-content {
+	font-size: 22px;
+}
+
+.ch-ggs-web-suite-facts-list {
+	list-style: none;
+	padding-left: 0;
+	font-size: 22px;
+}
+
+.ch-ggs-web-suite-facts-list-item {
+	margin-bottom: 10px;
+}
+
+.ch-ggs-web-suite-facts-list-item-important {
+	margin-top: 20px;
+	font-weight: bolder;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-item.active > .nav-link {
+	color: $primary;
+}
+
+@include media-breakpoint-up(sm) {
+	.ch-ggs-web-suite-landing-seciton-hero {
+		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-sm.jpg');
+	}
+}
+
+@include media-breakpoint-up(md) {
+	.ch-ggs-web-suite-landing-seciton-hero {
+		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-md.jpg');
+	}
+
+	.ch-ggs-web-suite-card-hover-text {
+		opacity: 1;
+		transition: $transition-base;
+		transition-property: opacity;
+		margin-bottom: 0;
+	}
+
+	.ch-ggs-web-suite-card-hover-link {
+		margin-top: auto;
+		position: absolute;
+		opacity: 0;
+		transition: $transition-base;
+		transition-property: opacity;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+	}
+
+	.ch-ggs-web-suite-card-hover {
+		&:hover,
+		&:focus {
+			.ch-ggs-web-suite-card-hover-text {
+				opacity: 0;
+			}
+			.ch-ggs-web-suite-card-hover-link {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@include media-breakpoint-up(lg) {
+	.ch-ggs-web-suite-landing-seciton-hero {
+		min-height: calc(100vh - 98px);
+		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-lg.jpg');
+	}
+
+	.ch-ggs-web-suite-landing-nav {
+		position: sticky;
+		z-index: 1;
+		overflow: hidden;
+		top: 0;
+		margin-top: -56px;
+		&,
+		& a {
+			color: $white;
+		}
+		.container {
+			position: relative;
+			z-index: 0;
+			background: $primary-d-200;
+			&:before,
+			&:after {
+				content: "";
+				background: $primary-d-200;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				z-index: -1;
+				transition: $transition-base;
+				transition-duration: 0.5s;
+				transition-property: transform;
+				width: calc((100vw - 960px)/2);
+				transform: scaleX(0);
+			}
+
+			&:before {
+				right: 100%;
+				transform-origin: right;
+			}
+			&:after {
+				left: 100%;
+				transform-origin: left;
+			}
+		}
+	}
+
+	.ch-ggs-web-suite-landing-nav.stuck .container:before,
+	.ch-ggs-web-suite-landing-nav.stuck .container:after {
+		// max-width: 100%;
+		transform: scaleX(1);
+	}
+}
+
+@include media-breakpoint-up(xl) {
+	.ch-ggs-web-suite-landing-seciton-hero {
+		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xl.jpg');
+	}
+
+	.ch-ggs-web-suite-landing-nav {
+		.container {
+			&:before,
+			&:after {
+				width: calc((100vw - 1140px)/2);
+			}
+		}
+	}
+}

index-old.php

@@ -0,0 +1,47 @@
+
+<?php include('_inc/_header-suite-start.php'); ?>
+
+<?php /* START: Pagetitle Content */ ?>
+
+<section>
+	<div class="container">
+		<h1>Ihr Software-Werkzeugkasten für gefährliche Stoffe und Güter</h1>
+		<div class="row ch-ggs-web-suite-common-content-holder">
+			<div class="<?php echo $GLOBALS['offsetClass'] ?>">
+				<h2 class="ch-ggs-web-suite-section-title text-center">Der erste Werkzeugkasten für Gefahrstoff- und Gefahrgut</h2>
+				<p>
+					Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra. Phasellus viverra nulla ut metus varius laoreet.
+				</p>
+			</div>
+		</div>
+	</div>
+</section>
+
+<?php /* END: Pagetitle Content */ ?>
+
+
+<?php /* START: Main Includes Content */ ?>
+
+<?php include('_inc/_sectionCards.php') ?>
+        		
+<section>
+	<div class="container">
+		<div class="row">
+			<div class="<?php echo $GLOBALS['offsetClass'] ?>">
+				<h2 class="ch-ggs-web-suite-section-title text-center">Der erste Werkzeugkasten für Gefahrstoff- und Gefahrgut</h2>
+			</div>
+		</div>
+		<?php include('_inc/_sectionArticleLeft.php') ?>
+		
+		<?php include('_inc/_sectionArticleRight.php') ?>
+	</div>
+		
+</section>
+
+<?php include('_inc/_sectionDark.php') ?>
+
+<?php include('_inc/_sectionPlainCards.php') ?>
+        		
+<?php /* END: Main Includes Content */ ?>
+
+<?php include('_inc/_footer-suite-start.php') ?>

index.php

@@ -1,21 +1,53 @@
+<div id="ch-ggs-web-suite-landing-nav-trigger" class="ch-ggs-web-suite-landing-nav-trigger"></div>
 
 <?php include('_inc/_header-suite-start.php'); ?>
 
 <?php /* START: Pagetitle Content */ ?>
-
-<section>
-	<div class="container">
-		<h1>Ihr Software-Werkzeugkasten für gefährliche Stoffe und Güter</h1>
-		<div class="row ch-ggs-web-suite-common-content-holder">
-			<div class="<?php echo $GLOBALS['offsetClass'] ?>">
-				<h2 class="ch-ggs-web-suite-section-title text-center">Der erste Werkzeugkasten für Gefahrstoff- und Gefahrgut</h2>
-				<p>
-					Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra. Phasellus viverra nulla ut metus varius laoreet.
-				</p>
+<div class="ch-ggs-web-suite-landing-sections">
+	<section class="ch-ggs-web-suite-landing-seciton ch-ggs-web-suite-landing-seciton-hero">
+		<div class="container">
+			<h1 class="ch-ggs-web-suite-landing-hero-title">Ihr Software-Werkzeugkasten für gefährliche Stoffe und Güter</h1>
+			<div class="ch-ggs-web-suite-common-content-holder">
+				<div class="ch-ggs-web-suite-landing-hero-text">
+					<p>
+						Die HazmatSuite stellt sowohl für Experten als auch für Einsteiger verschiedene Software-Tools im Umgang mit gefährlichen Stoffen und Gütern bereit.
+					</p>
+					<a href="#" class="btn btn-white">
+						Jetzt starten
+					</a>
+				</div>
+			</div>
+		</div>
+	</section>
+	<div id="ch-ggs-web-suite-landing-nav" class="ch-ggs-web-suite-landing-nav">
+		<div class="container">
+			<div class="navbar">
+				<ul class="navbar-nav flex-row">
+					<li id="ch-ggs-web-suite-nav-item-01" class="nav-item"><a href="#ch-ggs-web-suite-section-01" class="nav-link px-2">Überblick</a></li>
+					<li id="ch-ggs-web-suite-nav-item-02" class="nav-item"><a href="#ch-ggs-web-suite-section-02" class="nav-link px-2">Die <span class="upper">Hazmat</span> Suite</a></li>
+					<li id="ch-ggs-web-suite-nav-item-03" class="nav-item"><a href="#ch-ggs-web-suite-section-03" class="nav-link px-2">Die Tools</a></li>
+				</ul>
 			</div>
 		</div>
 	</div>
-</section>
+	<section id="ch-ggs-web-suite-section-01" class="ch-ggs-web-suite-landing-seciton ch-ggs-web-suite-landing-seciton-dark">
+		<?php include('_inc/_sectionCardsNew.php') ?>
+	</section>
+	<section id="ch-ggs-web-suite-section-02" class="ch-ggs-web-suite-landing-seciton ch-ggs-web-suite-landing-seciton-dark">
+		<div class="container">
+			<h2 class="ch-ggs-web-suite-landing-section-title"><i class="ch-ggs-web-suite-landing-section-title-icon ifc ifc-frontal-truck"></i> Hazmat Suite</h2>
+			<?php include('_inc/_sectionArticleNew.php') ?>
+			<?php include('_inc/_sectionArticleNew.php') ?>
+			<?php include('_inc/_sectionArticleNewText.php') ?>
+		</div>
+	</section>
+	<section id="ch-ggs-web-suite-section-03" class="ch-ggs-web-suite-landing-seciton">
+		<div class="container">
+			<?php include('_inc/_sectionArticleNew.php') ?>
+			<?php include('_inc/_sectionArticleNew.php') ?>
+		</div>
+	</section>
+</div>
 
 <?php /* END: Pagetitle Content */ ?>