:root {
 	--col-grey01: #f4f4f4;
	--col-grey02: #d7dde2;
	--col-grey03: #b3bdc9;
	--col-grey04: #6e7682;
	--col-blue01: #333b47;
	--col-blue02: #20252d;
	
	--col-green: #82e27d;
	--col-cyan: #4ac4c0;
	--col-red: #d56a6a;
	--col-blue: #4781d8;
	--col-yellow: #e4d259;
	--col-purple: #a34e8e;
	
	--grad-blue: linear-gradient(to bottom right, var(--col-blue01), var(--col-blue02));
	
	--shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
	
	--gap01: 48px;	--gap02: 24px;
	--spacer: 72px;

}








/* work-sans-300 - 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: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/work-sans-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/work-sans-v19-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* work-sans-300italic - 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: 'Work Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/work-sans-v19-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/work-sans-v19-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* work-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: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/work-sans-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/work-sans-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* work-sans-italic - 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: 'Work Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/work-sans-v19-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/work-sans-v19-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* work-sans-600 - 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: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/work-sans-v19-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/work-sans-v19-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* work-sans-600italic - 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: 'Work Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/work-sans-v19-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/work-sans-v19-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* work-sans-700 - 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: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/work-sans-v19-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/work-sans-v19-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* work-sans-700italic - 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: 'Work Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/work-sans-v19-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/work-sans-v19-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}







/* Allgemeine Stile */

html {
  scroll-behavior: smooth;
}

body {
    font-family: Segoe UI, Helvetica, Arial, sans-serif;
    background: var(--col-grey02);
    color: var(--col-blue01);
    margin: 0;
    padding: 0;
	hyphens: auto;
	 -webkit-hyphens: auto;
}

p, h1, h2, h3, h4, ul, li {max-width: 768px;}

.container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
.container img {max-width: 100%;}
p, ul {
	font-size: 1.1em;
	line-height: 1.5em;
}

h1, h2, h3 {
    font-family: 'Work Sans', sans-serif;
    color: var(--col-blue01);
	font-weight: 400;
	line-height: 1.2em;
	
}
h1{
	font-size: 48px;
	letter-spacing:-.02em;
	line-height: 1em;
	text-transform: uppercase;

}
h2 {margin: 1em 0;}

h3{
		text-transform: uppercase;
	font-weight: 700;

}
.wall-top:before{
	content: url("../img/icon_wall_top.png") ;
	margin-bottom: -13px;
	display: block;
}
.wall-bottom:after{
	content: url("../img/icon_wall_bottom.png") ;
	margin-top: -37px;
	display: block;
}
h3.wall-top:before{
	margin-bottom: -7px;
}
h3.wall-bottom:after{
	margin-top: -12px;
}


a {
	color:inherit;
}
figcaption{
	margin-top: 1em;
	text-align: center;
}
.btn{
	 font-family: 'Work Sans', sans-serif;
    color: var(--col-grey03);
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--col-blue02);
	border: none;
	box-shadow: var(--shadow);
	padding: 1em;
	margin: 1em 0.5em;
	border-radius: 3px;
}

.btn:hover{
	background: var(--col-blue02);
	color: var(--col-grey03);
}
.col-blue{background: var(--col-blue);color: var(--col-blue02);}
.col-purple{background: var(--col-purple);color: var(--col-blue02);}
.col-green{background: var(--col-green);color: var(--col-blue02);}
.col-yellow{background: var(--col-yellow);color: var(--col-blue02);}
.col-cyan{background: var(--col-cyan);color: var(--col-blue02);}

/* Header & Navigation */
.header {
    background: var(--col-grey01);
    position: sticky;
    top: 0;
    width: 100%;
    box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
	box-shadow: var(--shadow);
    padding:  0;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
	vertical-align: bottom;
}
.logo{
	margin: 18px auto 12px 0;
}
.language{
	margin-left:  16px;

}
.language a {text-decoration: none;}

.nav {
background-image: url("../img/stripes_01.png");
	background-repeat: repeat-x;
	background-position: bottom;
	height: 60px;
}
.nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.nav ul li:hover {
	background-color: var(--col-grey02);
}
.has-submenu ul {
    display: none;
}

.nav ul li {
    position: relative;
	background-color: var(--col-grey01);
}

.nav ul li a {
    text-decoration: none;
    color: var(--col-blue01);
    padding: 10px 15px;
    display: block;
}

/* Submenu */
.submenu {
    display: none;
    position: absolute;
    background: var(--col-grey01);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 200px;
}

.has-submenu:hover .submenu {
    display: block;
}


.submenu li a {
    padding: 10px 15px;
    display: block;
    white-space: nowrap;
}

/* Hamburger Menü */
.menu-icon {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

#menu-toggle {
    display: none;
}

/* Grafik*/

.tool-icon{
	width: 150px;
	margin-top:200px;
}

.pie {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(var(--col-blue01) 64%, var(--col-grey03) 64%, var(--col-grey03) 81%, white 81%);
  border-radius: 50%;
	  margin-top: 72px;
}



/* Rows */
.row {
    padding: 0;
	scroll-margin-top: 80px;
	
}


	


.dark {
    background: var(--grad-blue);
    color: #b3bdc9;
}

.dark h1, .dark h2, .dark h3 {
    color: #b3bdc9;
}

.light {
    background: var(--col-grey02);
}

.bgimg {
	height:590px;
	background-size: 100% auto;
	background-position: center;
	 background-repeat:no-repeat;
}

/* Spaltenaufteilung */
.split-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--gap01);
}
.split-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gap01);
}

.split-1-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap01);
}
.spacer{
	height:var(--spacer);
	
}
.stripes{
	background-image: url("../img/stripes_01.png");
	background-repeat: repeat-x;
	background-position: bottom;
	
	
}
.dark .stripes{

	background-image: url("../img/stripes_02.png");
	
}



/* Footer */
.footer {
    background: var(--col-grey01);
    padding: 20px 0;
	text-align: left;
}

.footer ul {
    list-style: none;
    display: flex;
    justify-content: left;
    padding: 0;
    margin: 0;
}

.footer ul li a {
    text-decoration: none;
    color: #333b47;
    padding: 10px 15px;
    display: block;
}
@media (max-width: 1200px) {

	.bgimg {
		height:450px;
	}
		.tool-icon{
	width: 120px;
	margin-top:120px;
}

}

@media (max-width: 992px) {
	.split-1-2 , .split-2-1  {
		grid-template-columns: 1fr;
		 gap: var(--gap02);
	}
	
	.bgimg {
		height:360px;
	}
	
	.tool-icon{
	width: 100px;
	margin-top:120px;
}
}


@media (max-width: 768px) {
	
	h1{
	font-size: 36px;
	}
	.split-1-1-1 {
		grid-template-columns: 1fr;
		gap: var(--gap02);
	}
	.bgimg {
	height:240px;
	}
	.wall-top:before{
	content: url("../img/icon_wall_top.png") ;
	margin-bottom: -10px;
	display: block;
	}
	.wall-bottom:after{
	content: url("../img/icon_wall_bottom.png") ;
	margin-top: -26px;
	display: block;
	}
    .menu-icon {
        display: block;
    }
    .nav {
        display: none;
        flex-direction: column;
        position: absolute;
        background: white;
        width: 100%;
        left: 0;
        top: 60px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    #menu-toggle:checked + .menu-icon + .nav {
        display: flex;
    }
    .nav ul {
        flex-direction: column;
    }
    .has-submenu .submenu {
        position: static;
        box-shadow: none;
    }
	
		.tool-icon{
	width: 50px;
	margin-top:75px;
}
}

@media (max-width: 600px) {

	.bgimg {
		height:200px;
	}
		
}