tomekk vor 4 Jahren
Ursprung
Commit
ad7f36a9ed

+ 13 - 11
_inc/_sectionArticleNew.php

@@ -1,14 +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>
+<a href="#" class="ch-ggs-web-suite-article-landing">
+	<div class="row ">
+		<div class="col-lg-5 order-lg-1">
+			<img src="//placehold.it/900x600" class="img-fluid mb-5 mb-lg-0"/>	
+		</div>
+		<div class="col-lg-7">
+			<div class="ch-ggs-web-suite-landing-article-content">
+				<h3 class="mt-0 ch-ggs-web-suite-landing-article-title">HAZMAt Suite. Die Lösung für Ihre Gefahrstoff- und Gefahrgut-Fragen</h3>
+				<p class="lead">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-lg btn-block btn-primary">start now</div>
+					</div>
 				</div>
 			</div>
 		</div>

+ 33 - 21
_inc/_sectionArticleNewText.php

@@ -1,27 +1,39 @@
-<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>
+<a href="#" class="ch-ggs-web-suite-article-landing">
+	<div class="row">
+		<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 class="lead">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd</p>
+				<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>
-	<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 class="offset-md-1 col-md-4">
+			<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>
+				<h3>Funktionen & Vorteile</h3>
+				<ul class="ch-ggs-web-suite-simple-list">
+					<li>Super schnell</li> 
+					<li>Zuverlässig und einfach</li> 
+					<li>Sicher dank SSL</li> 
+					<li>3029 Vorlagen</li>
+					<li>International anerkannt</li>
+				</ul>
+				<div class="row d-md-none">
+					<div class="col-md-6 col-lg-5">
+						<div class="btn btn-lg btn-block btn-primary">start now</div>
+					</div>
 				</div>
 			</div>
 		</div>

+ 41 - 0
_inc/_sectionArticleNewTextIcon.php

@@ -0,0 +1,41 @@
+<a href="#" class="ch-ggs-web-suite-article-landing">
+	<img src="assets/img/logo-hazmat-suite.png" alt="Logo HazmatSuite" width="297" height="60" class="img-fluid ch-ggs-web-suite-article-landing-image">
+	<div class="row">
+		<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 class="lead">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd</p>
+				<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-lg btn-block btn-primary">start now</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="offset-md-1 col-md-4">
+			<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>
+				<h3>Funktionen & Vorteile</h3>
+				<ul class="ch-ggs-web-suite-simple-list">
+					<li>Super schnell</li> 
+					<li>Zuverlässig und einfach</li> 
+					<li>Sicher dank SSL</li> 
+					<li>3029 Vorlagen</li>
+					<li>International anerkannt</li>
+				</ul>
+				<div class="row d-md-none">
+					<div class="col-md-6 col-lg-5">
+						<div class="btn btn-lg btn-block btn-primary">start now</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</a>

+ 1 - 1
_inc/_sectionCardsNew.php

@@ -18,7 +18,7 @@
 	
 <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>
+	<p class="lead">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): ?>

+ 102 - 22
assets/css/style.css

@@ -7,8 +7,8 @@
  */
 @font-face {
   font-family: "icomoon";
-  src: url("../fonts/icomoon.eot?u6kkyu8");
-  src: url("../fonts/icomoon.eot?u6kkyu8#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?u6kkyu8") format("truetype"), url("../fonts/icomoon.woff?u6kkyu8") format("woff"), url("../fonts/icomoon.svg?u6kkyu8#icomoon") format("svg");
+  src: url("../fonts/icomoon.eot?u6kl0cl");
+  src: url("../fonts/icomoon.eot?u6kl0cl#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?u6kl0cl") format("truetype"), url("../fonts/icomoon.woff?u6kl0cl") format("woff"), url("../fonts/icomoon.svg?u6kl0cl#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -9907,14 +9907,14 @@ h4 + hr {
   color: #990099;
 }
 .btn-white:hover {
-  color: #fff;
-  background-color: #990099;
-  border-color: #990099;
+  color: #212529;
+  background-color: #ececec;
+  border-color: #e6e6e6;
 }
 .btn-white:focus, .btn-white.focus {
-  color: #fff;
-  background-color: #990099;
-  border-color: #990099;
+  color: #212529;
+  background-color: #ececec;
+  border-color: #e6e6e6;
   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 {
@@ -9931,6 +9931,13 @@ h4 + hr {
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(222, 222, 223, 0.5);
 }
 
+.ch-ggs-web-suite-landing-section-hero .btn-white:hover,
+.ch-ggs-web-suite-landing-section-hero .btn-white:focus,
+.ch-ggs-web-suite-cta-box .btn-white:hover,
+.ch-ggs-web-suite-cta-box .btn-white:focus {
+  color: #990099;
+}
+
 .modal-dialog {
   max-width: 540px;
 }
@@ -10933,11 +10940,18 @@ a.ch-ggs-web-suite-icon-link {
   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;
+  display: flex;
+  align-items: center;
 }
 
 .ch-ggs-web-suite-landing-section-title {
   font-size: 32px;
   display: flex;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+
+.ch-ggs-web-suite-landing-section-title-image {
   margin-bottom: 80px;
 }
 
@@ -10951,26 +10965,55 @@ a.ch-ggs-web-suite-icon-link {
 }
 
 .ch-ggs-web-suite-landing-hero-title {
-  font-size: 56px;
-  line-height: 1.418;
+  font-size: 52px;
+  font-size: 1.75rem;
+  font-size: clamp(1.75rem, 4vw, 3.5rem);
+  font-weight: 700;
+  line-height: 1.35;
   text-align: left;
   border-bottom: 0;
+  padding-bottom: 0;
+  margin-bottom: 20px;
 }
 
 .ch-ggs-web-suite-article-landing {
-  margin-bottom: 200px;
   color: #212529;
 }
 .ch-ggs-web-suite-article-landing:hover, .ch-ggs-web-suite-article-landing:focus {
   text-decoration: none;
 }
 
+.ch-ggs-web-suite-article-landing-image {
+  margin-bottom: 80px;
+}
+
+.ch-ggs-web-suite-article-landing {
+  display: block;
+}
+
+.ch-ggs-web-suite-article-landing:not(:last-child) {
+  margin-bottom: 180px;
+}
+
+.ch-ggs-web-suite-article-landing .lead {
+  font-size: 20px;
+}
+
 .ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-article-landing {
   color: #fff;
 }
 
+.ch-ggs-web-suite-landing-article-content-aside {
+  color: #5C005C;
+}
+
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-landing-article-content-aside {
+  color: #D196D9;
+}
+
 .ch-ggs-web-suite-landing-hero-text {
   font-size: 22px;
+  margin-bottom: 80px;
 }
 
 .ch-ggs-web-suite-card-hover-text {
@@ -11027,11 +11070,24 @@ a.ch-ggs-web-suite-icon-link {
 
 .ch-ggs-web-suite-landing-article-title {
   margin-top: 20px;
+  margin-bottom: 20px;
   font-size: 42px;
+  display: flex;
+  align-items: start;
+  gap: 30px;
 }
 
-.ch-ggs-web-suite-landing-article-content {
-  font-size: 22px;
+.ch-ggs-web-suite-article-landing {
+  font-size: 20px;
+}
+
+.ch-ggs-web-suite-simple-list {
+  padding-left: 22px;
+}
+@-moz-document url-prefix() {
+  .ch-ggs-web-suite-simple-list {
+    padding-left: 20px;
+  }
 }
 
 .ch-ggs-web-suite-facts-list {
@@ -11049,10 +11105,30 @@ a.ch-ggs-web-suite-icon-link {
   font-weight: bolder;
 }
 
-.ch-ggs-web-suite-landing-nav .nav-item > .nav-link.active {
+.ch-ggs-web-suite-landing-nav {
+  font-size: 1.125rem;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link .ifc {
+  transform: rotate(-90deg);
+  display: inline-block;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link.active {
   color: #990099;
 }
 
+.ch-ggs-web-suite-cta-box {
+  background: #990099;
+  color: #fff;
+  padding: 80px 60px;
+  display: block;
+}
+
+a.ch-ggs-web-suite-cta-box {
+  text-decoration: none;
+}
+
 @media (min-width: 576px) {
   .ch-ggs-web-suite-landing-section-hero {
     background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-sm.jpg");
@@ -11087,19 +11163,13 @@ a.ch-ggs-web-suite-icon-link {
   .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-section-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;
+    margin-top: -72px;
   }
   .ch-ggs-web-suite-landing-nav, .ch-ggs-web-suite-landing-nav a {
     color: #fff;
@@ -11119,7 +11189,7 @@ a.ch-ggs-web-suite-icon-link {
     transition: all 0.2s ease-in-out;
     transition-duration: 0.5s;
     transition-property: transform;
-    width: calc((100vw - 960px)/2);
+    width: calc((100vw - 720px)/2);
     transform: scaleX(0);
   }
   .ch-ggs-web-suite-landing-nav .container:before {
@@ -11136,6 +11206,16 @@ a.ch-ggs-web-suite-icon-link {
     transform: scaleX(1);
   }
 }
+@media (min-width: 992px) {
+  .ch-ggs-web-suite-landing-section-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 .container:before, .ch-ggs-web-suite-landing-nav .container:after {
+    width: calc((100vw - 960px)/2);
+  }
+}
 @media (min-width: 1200px) {
   .ch-ggs-web-suite-landing-section-hero {
     background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-xl.jpg");

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
assets/css/style.css.map


+ 4 - 0
assets/scss/_custom.scss

@@ -128,6 +128,8 @@ $gray-lightest:             $antrazit08;
 $primary:             #990099;
 $primary-d-100:			#5C005C;
 $primary-d-200:			#250025;
+$primary-l-100:			#C955D9;
+$primary-l-200:			#D196D9;
 $secondary:             $antrazit60;
 
 $success:             #5cb85c;
@@ -246,6 +248,8 @@ $dropdown-link-active-color:        $primary;
 $dropdown-link-active-bg:          	transparent;
 
 
+$lead-font-size:                    1.25rem;
+
 
 @import "bootstrap/variables";
 

+ 103 - 17
assets/scss/_project.scss

@@ -105,10 +105,18 @@ h4 + hr {
 }
 
 .btn-white {
-	@include button-variant($white, $white, $primary, $primary);
+	@include button-variant($white, $white);
 	color: $primary;
 }
 
+.ch-ggs-web-suite-landing-section-hero,
+.ch-ggs-web-suite-cta-box {
+	.btn-white:hover,
+	.btn-white:focus {
+		color: $primary;
+	}
+}
+
 //modal
 .modal-dialog {
 	max-width: 540px;
@@ -1180,11 +1188,18 @@ a.ch-ggs-web-suite-icon-link {
 	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;
+	display: flex;
+	align-items: center;
 }
 
 .ch-ggs-web-suite-landing-section-title {
 	font-size: 32px;
 	display: flex;
+	font-weight: 700;
+	margin-bottom: 20px;
+}
+
+.ch-ggs-web-suite-landing-section-title-image {
 	margin-bottom: 80px;
 }
 
@@ -1198,28 +1213,57 @@ a.ch-ggs-web-suite-icon-link {
 }
 
 .ch-ggs-web-suite-landing-hero-title {
-	font-size: 56px;
-	line-height: 1.418;
+	font-size: 52px;
+	font-size: 1.75rem;
+    font-size: clamp(1.75rem, 4vw, 3.5rem);
+	font-weight: 700;
+	line-height: 1.35;
 	text-align: left;
 	border-bottom: 0;
+	padding-bottom: 0;
+	margin-bottom: 20px;
 }
 
 .ch-ggs-web-suite-article-landing {
-	margin-bottom: 200px;
 	color: $body-color;
-
+	
 	&:hover,
 	&:focus {
 		text-decoration: none;
 	}
 }
 
+.ch-ggs-web-suite-article-landing-image {
+	margin-bottom: 80px;
+}
+
+.ch-ggs-web-suite-article-landing {
+	display: block;
+}
+
+.ch-ggs-web-suite-article-landing:not(:last-child) {
+	margin-bottom: 180px;
+}
+
+.ch-ggs-web-suite-article-landing .lead {
+	font-size: 20px;
+}
+
 .ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-article-landing {
 	color: $white;
 }
 
+.ch-ggs-web-suite-landing-article-content-aside {
+	color: $primary-d-100;
+}
+
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-landing-article-content-aside {
+	color: $primary-l-200;
+}
+
 .ch-ggs-web-suite-landing-hero-text {
 	font-size: 22px;
+	margin-bottom: 80px;
 }
 
 .ch-ggs-web-suite-card-hover-text {
@@ -1279,11 +1323,23 @@ a.ch-ggs-web-suite-icon-link {
 
 .ch-ggs-web-suite-landing-article-title {
 	margin-top: 20px;
+	margin-bottom: 20px;
 	font-size: 42px;
+	display: flex;
+	align-items: start;
+	gap: 30px;
 }
 
-.ch-ggs-web-suite-landing-article-content {
-	font-size: 22px;
+
+.ch-ggs-web-suite-article-landing {
+	font-size: 20px;
+}
+
+.ch-ggs-web-suite-simple-list {
+	padding-left: 22px;
+	@-moz-document url-prefix() {
+		padding-left: 20px;
+	}
 }
 
 .ch-ggs-web-suite-facts-list {
@@ -1292,6 +1348,7 @@ a.ch-ggs-web-suite-icon-link {
 	font-size: 22px;
 }
 
+
 .ch-ggs-web-suite-facts-list-item {
 	margin-bottom: 10px;
 }
@@ -1301,10 +1358,30 @@ a.ch-ggs-web-suite-icon-link {
 	font-weight: bolder;
 }
 
-.ch-ggs-web-suite-landing-nav .nav-item > .nav-link.active {
+.ch-ggs-web-suite-landing-nav {
+	font-size: 1.125rem;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link .ifc {
+	transform: rotate(-90deg);
+	display: inline-block;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link.active {
 	color: $primary;
 }
 
+.ch-ggs-web-suite-cta-box {
+	background: $primary;
+	color: $white;
+	padding: 80px 60px;
+	display: block;
+}
+
+a.ch-ggs-web-suite-cta-box {
+	text-decoration: none;
+}
+
 @include media-breakpoint-up(sm) {
 	.ch-ggs-web-suite-landing-section-hero {
 		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-sm.jpg');
@@ -1345,20 +1422,13 @@ a.ch-ggs-web-suite-icon-link {
 			}
 		}
 	}
-}
-
-@include media-breakpoint-up(lg) {
-	.ch-ggs-web-suite-landing-section-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;
+		margin-top: -72px;
 		&,
 		& a {
 			color: $white;
@@ -1378,7 +1448,7 @@ a.ch-ggs-web-suite-icon-link {
 				transition: $transition-base;
 				transition-duration: 0.5s;
 				transition-property: transform;
-				width: calc((100vw - 960px)/2);
+				width: calc((100vw - 720px)/2);
 				transform: scaleX(0);
 			}
 
@@ -1400,6 +1470,22 @@ a.ch-ggs-web-suite-icon-link {
 	}
 }
 
+@include media-breakpoint-up(lg) {
+	.ch-ggs-web-suite-landing-section-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 {
+		.container {
+			&:before,
+			&:after {
+				width: calc((100vw - 960px)/2);
+			}
+		}
+	}
+}
+
 @include media-breakpoint-up(xl) {
 	.ch-ggs-web-suite-landing-section-hero {
 		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xl.jpg');

+ 31 - 17
index.php

@@ -8,24 +8,26 @@
 		<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>
+				<p class="ch-ggs-web-suite-landing-hero-text">
+					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>
+				<div class="row">
+					<div class="col-md-4 col-lg-3">
+						<a href="#" class="btn btn-lg btn-block btn-white">
+							Jetzt starten
+						</a>
+					</div>
 				</div>
 			</div>
 		</div>
 	</section>
-	<div id="ch-ggs-web-suite-landing-nav" class="ch-ggs-web-suite-landing-nav">
+	<div id="ch-ggs-web-suite-landing-nav" class="ch-ggs-web-suite-landing-nav d-none d-md-flex">
 		<div class="container">
-			<div class="navbar" id="navbar-spy-sections">
+			<div class="navbar p-0" id="navbar-spy-sections">
 				<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>
+					<li id="ch-ggs-web-suite-nav-item-01" class="nav-item"><a href="#ch-ggs-web-suite-section-01" class="nav-link py-3 px-3 ml-n3">Überblick <i class="ifc ifc-chevron_down"></i></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 py-3 px-3">Die <span class="upper">Hazmat</span> Suite <i class="ifc ifc-chevron_down"></i></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 py-3 px-3">Die Tools <i class="ifc ifc-chevron_down"></i></a></li>
 				</ul>
 			</div>
 		</div>
@@ -35,18 +37,30 @@
 	</section>
 	<section id="ch-ggs-web-suite-section-02" class="ch-ggs-web-suite-landing-section ch-ggs-web-suite-landing-section-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>
+			<h2 class="ch-ggs-web-suite-landing-section-title ch-ggs-web-suite-landing-section-title-image">
+				<img src="assets/img/logo-hazmat-suite.png" alt="Logo HazmatSuite" width="297" height="60" class="img-fluid">
+				<span class="sr-only">Hazmat Suite</span>
+			</h2>
 			<?php include('_inc/_sectionArticleNew.php') ?>
 			<?php include('_inc/_sectionArticleNew.php') ?>
 			<?php include('_inc/_sectionArticleNewText.php') ?>
+			<a class="ch-ggs-web-suite-cta-box">
+				<h2>Jetzt Startguthaben sichern. Eine Suite, alle Tools.</h2>
+				<p>
+					Während andere noch überlegen, haben wir das Problem schon gelöst. Sie glauben uns nicht? Testen Sie die HazmatSuite und das Potential unserer Gefahrstoff- und Gefahrgut-Essentials.
+				</p>
+				<div class="row">
+					<div class="col-md-6 col-lg-5">
+						<div class="btn btn-lg btn-block btn-white">start now</div>
+					</div>
+				</div>
+			</a>
 		</div>
 	</section>
 	<section id="ch-ggs-web-suite-section-03" class="ch-ggs-web-suite-landing-section">
 		<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> SmartIdentify</h2>
-			<?php include('_inc/_sectionArticleNew.php') ?>
-			<h2 class="ch-ggs-web-suite-landing-section-title"><i class="ch-ggs-web-suite-landing-section-title-icon ifc ifc-frontal-truck"></i> SmartLabel</h2>
-			<?php include('_inc/_sectionArticleNew.php') ?>
+			<?php include('_inc/_sectionArticleNewTextIcon.php') ?>
+			<?php include('_inc/_sectionArticleNewTextIcon.php') ?>
 		</div>
 	</section>
 </div>

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.