/* -------------------------------------------------------------------------------------------------------------- */ /* GLOBAL */ /* -------------------------------------------------------------------------------------------------------------- */ html { overflow: auto; height: auto; scroll-behavior: smooth; } body { overflow: auto; height: auto; margin: 0; } *, p, div, span, a, td, th, option { font-family: 'Lato-Light', sans-serif; font-size: 20px; } h1, h2, h3, h4, h5, h6 { font-weight: 600; font-family: 'Raleway', sans-serif; } /* -------------------------------------------------------------------------------------------------------------- */ /* DEVICE SIZES */ /* -------------------------------------------------------------------------------------------------------------- */ /* small: 0..768px, medium: 769..1199px, large: 1200px.. */ .show-small { display: none; } .show-medium { display: none; } .show-large { display: none; } .hide-small { display: none; } .hide-medium { display: none; } .hide-large { display: none; } /*small */ @media only screen and (max-width: 768px) { .show-small { display: block; } .hide-small { display: none !important; } } /*medium */ @media only screen and (min-width: 769px) and (max-width: 1199px) { .show-medium { display: block; } .hide-medium { display: none !important; } } /*large */ @media only screen and (min-width: 1200px) { .show-large { display: block; } .hide-large { display: none !important; } } /* -------------------------------------------------------------------------------------------------------------- */ /* TOP MENU BAR */ /* -------------------------------------------------------------------------------------------------------------- */ .top-menu { z-index: 100; position: fixed; top: 0px; right: 0px; left: 0px; height: 100px !important; overflow: hidden !important; white-space: nowrap; } .top-menu-scrolled { box-shadow: 0px 0px 20px 2px #c0c0c0; } @media only screen and (min-width: 1200px) { body.menu-open .top-menu-scrolled { box-shadow: initial; } } .top-menu > .top-menu-burger { position: absolute; top: 0px; right: 0px; min-height: 100%; padding: 10px; box-sizing: border-box; } .top-menu > .top-menu-login { position: absolute; top: 0px; right: 120px; margin-top: 20px; min-height: 100%; padding: 10px; box-sizing: border-box; display: none; } .top-menu > .top-menu-contact { position: absolute; top: 0px; right: 200px; margin-top: 20px; min-height: 100%; padding: 10px; box-sizing: border-box; display: none; } .top-menu > .top-menu-home { display:none; position: absolute; top: 0px; right: 280px; margin-top: 20px; min-height: 100%; padding: 10px; box-sizing: border-box; display: none; } /* Home-Button immer nur beim geöffneten Menü anzeigen */ body.menu-open .top-menu > .top-menu-home { display: block !important; } /* Login-Button nur auf großen Bildschirmen immer anzeigen */ @media only screen and (max-width: 1199px) { body.menu-open .top-menu-login { display: block !important; } body.menu-open .top-menu-contact { display: block !important; } } @media only screen and (min-width: 1199px) { .top-menu-login { display: block !important; } .top-menu-contact { display: block !important; } } /* -------------------------------------------------------------------------------------------------------------- */ /* MENU */ /* -------------------------------------------------------------------------------------------------------------- */ /* Menü für größere Geräte */ @media only screen and (min-width: 1200px) { /* Wenn die menu-open Klasse hat, dann das Menü anzeigen */ body.menu-open #menu { display: block !important; box-shadow: 0 2px 2px -2px rgba(0,0,0,.2); } /* Hintergrund der Titelzeile bei geöffnetem Menü */ body.menu-open #top-menu { background-color: white !important; background-image: initial !important; background-position: initial !important; background-size: initial !important; } /* Allgemeines Layout des Menüs */ #menu { display: none; position: fixed; z-index: 99; overflow-x: auto; overflow-y: hidden; top: 100px; left: 0px; right: 0px; height: auto; background-color: white; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; } /* Überschriften */ #menu > ul { white-space: nowrap; text-align: center; /* UL default Verhalten überschreiben */ padding-left: 0px !important; list-style-type: none; margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; } #menu > ul > li { display: inline-block; vertical-align: top; margin-right: 20px; padding: 0px; } /* Link Überschriften */ #menu > ul > li > a { display: block; text-decoration: none; padding: 0px; padding: 2px; cursor: pointer; color: white; background-color: black; } #menu > ul > li > a:hover { color: white; background-color: #333333; } /* Überschriften ohne Link */ #menu > ul > li > span { display: block; text-decoration: none; padding: 0px; padding: 2px; cursor: default; color: black; background-color: white; box-shadow:0px 0px 0px 2px black inset; } /* Unterpunkte */ #menu > ul > li > ul { display: block; text-align: left; /* UL default Verhalten überschreiben */ padding-left: 0px !important; list-style-type: none; margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; } #menu > ul > li > ul > li { display: block; } /* Links Unterpunkte */ #menu > ul > li > ul > li > a { display: block; text-decoration: none; padding: 0px; padding: 2px; cursor: pointer; color: black; background-color: inherit; } #menu > ul > li > ul > li > a:hover { color: #333333; } } /* Menü für kleinere Geräte */ @media only screen and (max-width: 1199px) { /* Wenn die menu-open Klasse hat, dann das Menü vollflächig anzeigen */ body.menu-open #menu { display: block !important; } body.menu-open #content { display: none !important; } body.menu-open #footer { display: none !important; } body.menu-open #top-menu-title-image { display: none; } /* Hintergrund der Titelzeile bei geöffnetem Menü */ body.menu-open #top-menu { background-color: white !important; background-image: initial !important; background-position: initial !important; background-size: initial !important; } /* Allgemeines Layout des Menüs */ #menu { display: none; position: absolute; z-index: 99; overflow-x: hidden; overflow-y: auto; word-wrap: break-word; word-break: break-word; hyphens: auto; top: 100px; left: 0px; height: auto; width: 100%; background-color: white; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } /* Überschriften */ #menu > ul { /* UL default Verhalten überschreiben */ padding-left: 0px !important; list-style-type: none; margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; } #menu > ul > li { display: block; margin-left: auto; margin-right: auto; vertical-align: top; padding: 0px; text-align: center; } /* Link Überschriften */ #menu > ul > li > a { display: block; text-decoration: none; padding: 0px; padding: 2px; cursor: pointer; color: white; background-color: black; font-size: 30px; } #menu > ul > li > a * { font-size: 30px; } #menu > ul > li > a:hover { color: white; background-color: #333333; } /* Überschriften ohne Link */ #menu > ul > li > span { display: block; text-decoration: none; padding: 0px; padding: 2px; color: black; background-color: white; border: 2px solid black; font-size: 30px; } #menu > ul > li > span * { font-size: 30px; } /* Unterpunkte */ #menu > ul > li > ul { display: block; text-align: left; /* UL default Verhalten überschreiben */ padding-left: 0px !important; list-style-type: none; margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; } #menu > ul > li > ul > li { display: block; margin-left: auto; margin-right: auto; text-align: center; border-bottom: 1px solid silver; } #menu > ul > li > ul > li:last-child { border-bottom: none !important; margin-bottom: 40px; } #menu > ul > li > ul > li:first-child { } /* Links Unterpunkte */ #menu > ul > li > ul > li > a { display: block; text-decoration: none; padding-top: 10px; padding-bottom: 10px; cursor: pointer; color: black; background-color: inherit; font-size: 30px; margin-top: 5px; margin-bottom: 5px; } #menu > ul > li > ul > li > a * { font-size: 30px; } #menu > ul > li > ul > li > a:hover { color: #333333; } } #top-menu-title-image { height: 100px; /* Größer, wenn Seite oben */ margin-left: 20px; margin-top: 0px; transition: height 0.3s ease, margin-left 0.3s ease, margin-top 0.3s ease; } .top-menu-scrolled #top-menu-title-image { height: 80px; margin-left: 20px; margin-top: 10px; } /* -------------------------------------------------------------------------------------------------------------- */ /* HAMBURGER MENU */ /* -------------------------------------------------------------------------------------------------------------- */ #nav-icon3 { width: 60px; height: 45px; position: relative; margin-top: 18px; margin-right: 15px; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; } #nav-icon3 span { display: block; position: absolute; height: 6px; width: 100%; background: black; border-radius: 3px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; } #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 18px; } #nav-icon3 span:nth-child(4) { top: 36px; } body.menu-open #nav-icon3 span:nth-child(1) { top: 18px; width: 0%; left: 50%; } body.menu-open #nav-icon3 span:nth-child(2) { transform: rotate(45deg); } body.menu-open #nav-icon3 span:nth-child(3) { transform: rotate(-45deg); } body.menu-open #nav-icon3 span:nth-child(4) { top: 18px; width: 0%; left: 50%; } /* -------------------------------------------------------------------------------------------------------------- */ /* PRELOADER */ /* -------------------------------------------------------------------------------------------------------------- */ /* Preloader Container */ #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(200,200,200,1) 90%); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Logo Spinner */ .logo-spinner { width: auto; height: 100px; animation: pulse 1.5s infinite ease-in-out; margin-bottom: 15px; /* Abstand zum Text */ } /* Pulsierende Animation */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* -------------------------------------------------------------------------------------------------------------- */ /* HEAD IMAGE/COLOR */ /* -------------------------------------------------------------------------------------------------------------- */ #head { position: sticky; top: 0; left: 0; width: 100%; height: 70vh; min-height: 200px; z-index: 0; background-color: #f0f0f0; text-align: center; } .h1-as-headline { position: absolute; /* top wird via Script gesetzt */ left: 50%; transform: translateX(-50%); /* Nur horizontal zentrieren */ background: white; color: black; padding: 20px 40px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); border-radius: 8px; z-index: 10; text-align: center; width: 100%; max-width: 1200px; box-sizing: border-box; } .h1-as-headline:before { content: "" !important; } @media only screen and (max-width: 1199px) { .h1-as-headline { width: calc(100% - 30px) !important; } } /* -------------------------------------------------------------------------------------------------------------- */ /* CONTENT */ /* -------------------------------------------------------------------------------------------------------------- */ #content { overflow: auto; } /* Sections */ .section { max-width: 1200px; margin-left: auto; margin-right: auto; display: block; } .section-full { margin-top: 20px; margin-bottom: 20px; } /* Headings */ h1 { font-size: 30px; } h1:before { content: '// ' } h2 { font-size: 30px; } h2:before { content: '// ' } h3 { font-size: 20px; font-weight: bold; } h4 { font-size: 20px; font-weight: bold; } /* Margin und Padding */ .m-0 { margin: 0px !important; } .m-5 { margin: 5px !important; } .m-10 { margin: 10px !important; } .m-20 { margin: 20px !important; } .m-40 { margin: 40px !important; } .mt-5 { margin-top: 5px !important; } .mt-0 { margin-top: 0px !important; } .mt-10 { margin-top: 10px !important; } .mt-20 { margin-top: 20px !important; } .mt-40 { margin-top: 40px !important; } .mt-80 { margin-top: 80px !important; } .mb-0 { margin-bottom: 0px !important; } .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-80 { margin-bottom: 80px !important; } .p-5 { padding: 5px !important; } .p-10 { padding: 10px !important; } .p-20 { padding: 20px !important; } .p-40 { padding: 40px !important; } .pt-5 { padding-top: 5px !important; } .pt-10 { padding-top: 10px !important; } .pt-20 { padding-top: 20px !important; } .pt-40 { padding-top: 40px !important; } .pb-5 { padding-bottom: 5px !important; } .pb-10 { padding-bottom: 10px !important; } .pb-20 { padding-bottom: 20px !important; } .pb-40 { padding-bottom: 40px !important; } /* Anchor-Links */ .section a:not(.button) { text-decoration: none; color: #000000; background-image: linear-gradient(transparent calc(90% - 5px), #D0D0D0 5px); background-size: 100%; background-repeat: no-repeat; display: inline; padding-left: 5px; padding-right: 5px; } .section a:not(.button):hover { background-image: linear-gradient(transparent calc(90% - 5px), #FFAAAA 5px); } .underlined { background-image: url(/images-netzmal/underlined.svg); background-position: 50% 100%; background-size: 100%; background-repeat: no-repeat; } /* Link Button */ .section a.button { border: 2px solid black; border-radius: 3px; padding:10px; text-decoration: none; color:black; font-weight: bold; } .section a.button:hover { border: 2px solid black; background-color: black; border-radius: 3px; padding:10px; text-decoration: none; color:white; font-weight: bold; } /* Externe Links */ .ext_link:after { content: "\f08e"; font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: none; padding-left: 3px; } /* Badges */ .badge { display: inline-block;; padding: 5px; background-color: #303030; color: white; } /* Font Awesome Extras */ .fae-hover:hover { animation: fa-bounce 2s infinite linear; }