@charset "utf-8";
/*
Theme Name: LEO4
Description: Mobile Responsivity
Author: Erik Martin
Author URI: http://www.delta.leonis.de
*/

body {
font-size:13px;
}

/*---------------LAYOUT-----------*/

.wrapper {
width:100%;
padding: 0px 20px;
}

header {
position:absolute;
height:260px;
background-position-x:-800px;
background-size: 3200px;
}

/* --- mit js-----*/
header.sticky {
position: fixed;
top: -160px;
}

header #logo {
padding: 10px 0px 150px 0px;
}

header #logo img {
height: 40px;
}

header #slogan {
text-align:right;
height: 40px;
background-color: rgba(255,255,255,0.65);
margin: 0px -20px 0px -20px;
padding: 0px 75px 0px 20px;
}

header #slogan h2:last-of-type {
color: var(--farbe2);
text-align: left;
margin-top: 9px;
padding: 0px 0px 15px 10px;
background-color: var(--farbe3);
display: none;
}

header nav {
position: fixed;
top: 10px;
}

header nav.sticky {
top: 50px;
}

main {
padding: 260px 0px 20px 0px;
}

.flexBox {
gap: 20px 40px;
}

.flexBox.zusatzInfo {
flex-wrap: wrap;
gap: 0;
}

.flexBox.zusatzInfo div:first-of-type,
aside {
flex:unset;
}

section.bild {
width: calc(100% - 40px);
}

section.ablauf::before {
content: "Starten Sie jetzt mit uns den digitalen Briefversand";
position: relative;
top: -20px;
font-family: "SourceSansPro semibold";
font-size: 2.4em;
line-height: 1.2em;
color: var(--farbe1);
}

section.ablauf > h3 {
display: none;
}

section.ablauf .flexBox > div div,
section.ablauf .flexBox > div p,
section.einsatz .flexBox > div div,
section.einsatz .flexBox > div p {
width:220px;
}

section.kontakt .flexBox form,
section.register .flexBox form {
width:90vw;
padding-right:20px;
}

section.kontakt .flexBox > div:last-of-type,
section.register .flexBox > div:last-of-type {
padding: 0px 0px 0px 0px;
}

footer {
}

/*---------------FORMULAR---------*/



input {
}

textarea {
}

input[type="submit"] {
}

input[type="submit"]:hover {
}

/*---------------NAVI------------*/

.mobileNav {
display:block;
}

.desktopNav {
display:none;
}

#navigation1 li {
box-sizing: border-box;
list-style: none;
width:40px;
height:40px;
}

#navigation1 > ul {
height:40px;
margin:0;
}

#navigation1 > ul > li {
padding:5px;
margin:0;
background-color: var(--farbe1);
}

#navigation1 > ul > li img {
height:30px;
}

#navigation1 > ul > li > ul.navLevel1 {
position: fixed;
top: 0;
transition: all 0.5s ease-out;
right: -660px;
opacity:0;
visibility:hidden;
width: 100vw;
border-bottom:1px solid var(--farbe1);
background-color: var(--farbe3);
}

#navigation1 > ul > li:hover > ul.navLevel1 {
right: 0px;
visibility:visible;
opacity:1;
}

#navigation1 > ul > li > ul.navLevel1 li {
width:100%;
margin:0;
border-bottom:1px solid var(--farbe1);
}

#navigation1 > ul > li > ul.navLevel1 li a {
box-sizing: border-box;
display: block;
font-size:1.3em;
width:100%;
height:100%;
padding:5px 0px 0px 20px;
}

#navigation1 > ul > li > ul.navLevel1 li:hover,
#navigation1 > ul > li > ul.navLevel1 li.active {
background-color: var(--farbe1);
}

#navigation1 > ul > li > ul.navLevel1 li:hover a,
#navigation1 > ul > li > ul.navLevel1 li.active a {
color: var(--farbe3);
text-decoration: none;
}

/*---Navi level2 ----*/

#navigation1 ul.navLevel1 li.info {
box-sizing: border-box;
font-size:1.3em;
width:100%;
padding:5px 0px 0px 20px;

}

#navigation1 ul.navLevel1 li.info:hover {
background-color: var(--farbe3);
}

#navigation1 ul.navLevel2 {
position: relative;
top: 6px;
transition: all 0.5s ease-out;
right: -660px;
opacity:0;
visibility:hidden;
width: 100vw;
border-bottom:1px solid var(--farbe1);
background-color: var(--farbe3);
}

#navigation1  ul.navLevel1 > li:hover > ul.navLevel2 {
right: 10px;
visibility:visible;
opacity:1;
}

#navigation1 ul.navLevel2 li {
width:100%;
margin:0;
border-bottom:1px solid var(--farbe1);
}

#navigation1 ul.navLevel2 li a {
box-sizing: border-box;
display: block;
font-size:1em !important;
color: var(--farbe1)!important;
width:100%;
height:100%;
padding:5px 0px 0px 20px;
}

#navigation1 ul.navLevel2 li:hover,
#navigation1 ul.navLevel2 li.active {
background-color: var(--farbe1);
}

#navigation1 ul.navLevel2 li:hover a,
#navigation1 ul.navLevel2 li.active a {
color: var(--farbe3)!important;
text-decoration: none;
}
/*-----------------TINY------------------*/

@media (max-width: 530px) {
section.ablauf .flexBox > div, section.einsatz .flexBox > div {display:flex;gap:20px;flex: none;width:100%;}
section.ablauf .flexBox > div div, section.einsatz .flexBox > div div {width:120px;}
section.ablauf .flexBox > div p, section.einsatz .flexBox > div p {width:auto;}
section.ablauf .flexBox > div div p, section.einsatz .flexBox > div div p {width:120px;}
section.ablauf .flexBox > div div h3, section.einsatz .flexBox > div div h3 {font-size:1em;min-height:30px;margin-top:-30px;}
}

@media (max-width: 440px) {
header #logo img {height: 30px;}
header nav {top:50px;right:25px;}
}