@font-face {
    font-family: 'MySimpel';
    src: local('Simpel'), local('Simpel Medium'), local('Simpel-Medium'), local('SimpelMedium'),
         url('simpel-medium.woff2') format('woff2'),
         url('simpel-medium.woff') format('woff'),
         url('simpel-medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

* {
		margin: 0;
		padding: 0;
		border: none;
}

html {
        font-size: 100%;
		color: rgba(0,0,0,0.9);
        text-decoration: none;
        scroll-behavior: smooth;
}

body {
        box-sizing: border-box;
		width: 100%;
		background-color: rgb(25,30,75);
        overflow-x: hidden;
        overflow-y: scroll;
		font-family: 'MySimpel', 'Open Sans', Arial, Helvetia, sans-serif;
}

div.wrapper {
        box-sizing: border-box;
		width: 100%;
        padding: 0 0.5rem;
		background-color: white;
}



/* --- HEADER --- --- --- --- --- --- --- --- --- */

header {
        box-sizing: border-box;
        min-width: 300px;
		max-width: 1000px;
        margin: 0 auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
		text-align: center;
}

header img {
		width: auto;
		height: 3rem;
		min-height: 40px;		
		max-height: 85px;
        vertical-align: bottom;
}

header a {
		color: rgb(25,30,75);
		text-decoration: none;
}

header a:link, 
header a:visited,
header a:active,
header a:focus {
}

header a:hover {
		color: rgb(125,150,45);
}




/* --- NAVIGATION --- --- --- --- --- --- --- --- --- */

nav {
        box-sizing: border-box;
        min-width: 300px;
		max-width: 1000px;
        margin: 0 auto;
        padding-top: 0.5rem;
        padding-bottom: 0.4rem;
		text-align: center;
        font-size: 1.2rem;
        font-weight: 400; /* 400 = normal, 700 = bold */
        letter-spacing: 0.1em;
        text-transform: uppercase;
        background-color: rgb(25,30,75);
}

nav ul {
		list-style: none;
}

nav li {
		display: inline-block;
		list-style: none;
}

nav a {
        display: inline-block;
        padding: 0.5rem 0.75rem;
	    color: white;
		text-decoration: none;
}

nav a:link, 
nav a:visited,
nav a:active,
nav a:focus {
}

nav a:hover {
		color: rgb(125,150,45);
}





/* --- CONTENT (Section) --- --- --- --- --- --- --- --- --- */

section { 
        box-sizing: border-box;
		min-width: 300px;
		max-width: 1000px;
        margin: 0 auto;
}

section h1		{
		padding-top: 1rem;
		padding-bottom: 1rem;
		font-size: 1.2rem;
        font-weight: 600; /* 400 = normal, 700 = bold */
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-align: center;
        line-height: 150%;
}

section h2		{
        padding-top: 1rem;		
        padding-bottom: 1rem;
		font-size: 1.2rem;
        font-weight: 400; /* 400 = normal, 700 = bold */

}

section h3		{
        padding: 1rem;
        background-color: rgba(125,150,45, 0.8);
        position: absolute;
        left: 2rem;
        bottom: 2rem;
        font-size: 1.2rem;
        font-weight: 400; /* 400 = normal, 700 = bold */
        color: white;
}

section hr {
        width: 25%;
        min-width: 120px;
        margin: 0 auto;
        border-top: 0.15rem solid rgb(125,150,45);        
        border-bottom: 1.5rem solid rgba(225, 225, 225, 0);
}

section p {
		padding-bottom: 1rem;
}

section address {
		padding-bottom: 1rem;
        font-style: normal;
}

section a {
		color: rgb(25,30,75);
        text-decoration-line: underline;
        text-decoration-style: dotted;
        text-decoration-color: rgb(25,30,75);
}

section a:link, 
section a:visited,
section a:active,
section a:focus {
}

section a:hover {
		color: rgb(125,150,45);
}

section ul {
		padding-bottom: 1rem;
}


section li {
		font-size: 1rem;
}


section div.menulink {
        padding-top: 1rem;
		text-align: center;
}

section div.menulink a {
        font-size: 1.5rem;
        text-decoration: none;
}



section div.image {
        box-sizing: border-box;
		width: 100%;
        background-position: center top;
        background-repeat: no-repeat;
}


section#sec-banner div.image {
        height: 20rem;
        margin-bottom: 3rem;
        background-image: url('/images/gears2-sw-1000-660.jpg');
        background-attachment: fixed;
        position: relative;
}

section#sec-banner span {
        white-space: nowrap;
}

section#sec-leistungen div.image {
        height: 0;
/*
        height: 15rem;
        margin-bottom: 3rem;
        background-image: url('...');
*/
}

section#sec-technikgebiete div.image {
        height: 15rem;
        margin-bottom: 3rem;
        background-image: url('/images/electronics-sw-1000-320.jpg');
}

section#sec-ueber-mich div.image {
        height: 0;
/*
        height: 15rem;
        margin-bottom: 3rem;
        background-image: url('...');
*/
}

section#sec-kontakt div.image {
        height: 0;
/*
        height: 15rem;
        margin-bottom: 3rem;
        background-image: url('...');
*/
}

section#sec-links div.image {
        height: 15rem;
        margin-bottom: 3rem;
        background-image: url('/images/keyboard-sw-1000-320.jpg');
}

section#sec-impressum div.image {
        height: 15rem;
        margin-bottom: 3rem;
        background-image: url('/images/keyboard-sw-1000-320.jpg');
}

section#sec-datenschutz div.image {
        height: 15rem;
        margin-bottom: 3rem;
        background-image: url('/images/network-cables-sw-1000-660.jpg');
}



section div.content {
        box-sizing: border-box;
        width: 100%;
        padding-bottom: 3rem;
        line-height: 150%;
}



section div.box-container {
        margin: 0 -0.5rem;
        padding-bottom: 1rem;
    	text-align: center;
}

section#sec-technikgebiete div.box-container ul {
		padding-bottom: 0;
		list-style: none;
}

section#sec-technikgebiete div.box-container li {      /* tag cloud */
        box-sizing: border-box;
		display: inline-block;
		list-style: none;
        padding: 1rem;
        background-color: rgba(225, 225, 225, 0.8);
        background-clip: padding-box;
        border: 0.5rem solid rgba(225, 225, 225, 0);
}



section div.box-leistungen-1,
section div.box-leistungen-2 {
        box-sizing: border-box;
		display: inline-block;
        width: calc(100% / 2);
		min-width: 300px;
        min-height: 27rem;
        padding: 1rem;
        background-color: rgba(225, 225, 225, 0.8);
        background-clip: padding-box;
        border: 0.5rem solid rgba(225, 225, 225, 0);
    	text-align: left;
        vertical-align: top;
        line-height: 175%
}


section div.box-leistungen-3,
section div.box-leistungen-4 {
        box-sizing: border-box;
		display: inline-block;
        width: calc(100% / 2);
		min-width: 300px;
        min-height: 13rem;
        padding: 1rem;
        background-color: rgba(225, 225, 225, 0.8);
        background-clip: padding-box;
        border: 0.5rem solid rgba(225, 225, 225, 0);
    	text-align: left;
        vertical-align: top;
        line-height: 175%
}



section div.box-ueber-mich {
        box-sizing: border-box;
		display: inline-block;
        width: calc(100% / 2);
        max-width: 500px;
		min-width: 300px;
        min-height: 20rem;
        padding: 1rem;
        background-color: rgba(225, 225, 225, 0.8);
        background-clip: padding-box;
        border: 0.5rem solid rgba(225, 225, 225, 0);
    	text-align: left;
        vertical-align: top;
}

section div.box-ueber-mich img {
        box-sizing: border-box;
        width: calc(100% + 2rem);
        margin-top: -1rem;
        margin-left: -1rem;
}


section div.box-kontakt {
        box-sizing: border-box;
		display: inline-block;
        width: calc(100% / 2);
        max-width: 500px;
		min-width: 300px;
        min-height: 20rem;
        padding: 1rem;
        background-color: rgba(225, 225, 225, 0.8);
        background-clip: padding-box;
        border: 0.5rem solid rgba(225, 225, 225, 0);
    	text-align: left;
        vertical-align: top;
        line-height: 175%
}

section#sec-leistungen ul,
section#sec-ueber-mich ul,
section#sec-links ul,
section#sec-datenschutz ul {
		margin: 0 1rem;
		list-style: none;		
}

section#sec-leistungen li::before,
section#sec-ueber-mich li::before,
section#sec-links li::before,
section#sec-datenschutz li::before {
		display: inline-block;
		width: 1em;
		margin-left: -1em;
		content: "\2022";
		color: #7d962d;
}






/* --- FOOTER --- --- --- --- --- --- --- --- --- */

footer {
		width: 100%;
        padding-top: 0.5em;
        padding-bottom: 5em;
		text-align: center;
}

footer ul {
		list-style: none;
}

footer li {
		display: inline-block;
		list-style: none;

}

footer a {
		display: inline-block;
        padding: 0.5em;
		color: white;
		text-decoration: none;
}

footer a:link, 
footer a:visited,
footer a:active,
footer a:focus {
}

footer a:hover {
		color: rgb(125,150,45);
}

footer p {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
		color: white;
}










/*

blau = #191e4b = rgb(25,30,75)
grün = #7d962d = rgb(125,150,45)

     background-clip: padding-box;
        border-top: 1rem solid rgba(225, 225, 225, 0);
        border-bottom: 1rem solid rgba(225, 225, 225, 0);

word-spacing: 1.2em;
letter-spacing: 0;
min-height: 72vh;
background-color: rgba(225, 225, 225, 0.0);
background-color: rgba(225, 225, 225, 0.25);
background-color: #191e4b;

filter: grayscale(100%) brightness(150%);

none            Kein Filtereffekt
blur (px)       Weichzeichnen
brightness (%)  Helligkeit, heller mit Werten > 100%, dunkler mit Werten < 100%.
contrast (%)    Kontrast, höherer Kontrast mit Werten > 100%, weniger Kontrast mit Werten < 100%.
grayscale(%)    Graustufen
saturate(%)     Sättigung
sepia(%)        Sepia
hue-rotate(deg) Farbverschiebung
invert(%)       Umkehren, Negativ
opacity(%)      Deckkraft

*/