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


body {
height:100%;
}

#bodyWrapper {
margin:0 auto;
}

.wrapper {
box-sizing: border-box;
margin:0 auto;
width:1200px;
}

.flexBox {
display: flex;
flex-wrap: wrap;
gap: 20px 80px;
}

.flexBox.zusatzInfo {
flex-wrap: nowrap;
gap: 20px 40px;
}

.flexBox.zusatzInfo div:first-of-type {
flex:2;
}

.flexBox.zusatzInfo aside {
flex:1;
}

.flexBox.zusatzInfo aside section {
box-sizing: border-box;
padding: 20px;
background-color: var(--farbe4);
}

.flexBox.zusatzInfo aside section h4 {
color: var(--farbe3);
padding: 5px;
background-color: var(--farbe2);
}

header {
box-sizing: border-box;
position:fixed;
top:0;
width:100%;
height:280px;
background-image:url('../img/banner2.jpg');
background-color:var(--farbe3);
background-repeat: no-repeat;
background-position-x: center;
z-index: 100;
}

header .wrapper {
}

#logo {
text-align:right;
height:50px;
padding:20px 0px 80px 0px;
}

#slogan  {
height:75px;
padding:0px 0px 15px 200px;
}

header #slogan h2 {
color:var(--farbe1);
font-size: 2.4em;
margin:0px 0px 0px 0px;
}

header #slogan h2:first-of-type {
font-style:italic;
}

header #slogan h2:last-of-type {
font-family:"SourceSansPro";
color:var(--farbe3);
}

nav {
box-sizing: border-box;
font-family: "SourceSansPro";
}

main {
box-sizing: border-box;
height:100%;
width:100%;
padding: 240px 0px 20px 0px;
}

section {
margin:40px 0px 60px 0px
}

section .flexBox > div {
flex:1;
}

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

section.ablauf div.flexBox h3,
section.einsatz div.flexBox h3 {
box-sizing:border-box;
font-family: "SourceSansPro semibold";
font-size: 1.5em;
color:var(--farbe3);
text-align: center;
min-height:40px;
padding:5px 5px 8px 5px;
background-color: var(--farbe1);
margin:-40px 0px 20px 0px;
position:relative;
z-index:5;
}

section.ablauf .flexBox > div div p,
section.einsatz .flexBox > div div p {
line-height:0;
margin:0;
background-color: var(--farbe4);
}

section.ablauf img,
section.vorteile img,
section.einsatz img {
width:100%;
/*border: 1px solid var(--farbe1);*/
background-repeat: no-repeat;
background-position: center 20%;
background-size: 70%;
}

section.ablauf .flexBox > div:first-of-type img {
background-image: url('../img/pictogramme/briefe_schreiben.svg');
}

section.ablauf .flexBox > div:nth-of-type(2) img {
background-image: url('../img/pictogramme/briefe_herstellen.svg');
}

section.ablauf .flexBox > div:nth-of-type(3) img {
background-image: url('../img/pictogramme/briefe_versenden.svg');
}

section.ablauf .flexBox > div:last-of-type img {
background-image: url('../img/pictogramme/briefeversand_auswerten.svg');
}

section.vorteile table td {
vertical-align:text-top;
border:none;
}

section.vorteile table td.hervorheben {
text-align:right;
font-size:2.5em;
color:var(--farbe1);
}

section.vorteile ul {
font-family: SourceSansPro semibold;
font-size:1.2em;
color:var(--farbe2);
padding: 5px 10px 10px 10px;
min-width: 300px;
background-color:var(--farbe4);
}

section.vorteile div.vergleich h3 {
font-size: 1.5em;
padding: 2px 0px;
background-color: var(--farbe4);
}

section.vorteile div.vergleich {
margin: 40px 0px;
}

section.vorteile div.vergleich h3 span:first-of-type {
background-color: var(--farbe1);
color: var(--farbe3);
padding: 0px 5px;
margin: 0px 10px 0px 0px;
}

section.vorteile div.vergleich h3 span:last-of-type {
/*background-color: var(--farbe4);*/
color: var(--farbe2);
padding: 0px 5px;
}

section.vorteile div.vergleich .flexBox {
gap:20px;
}

section.vorteile div.vergleich .flexBox div {
flex:unset;
}

section.vorteile div.vergleich p:first-of-type {
width:80px;
line-height:0;
margin:0;border: 1px solid var(--farbe1);
background-color: var(--farbe3);
}

section.vorteile div.vergleich img {
background-position: center;
}

section.vorteile div.heute1 div:first-of-type img {
background-image: url('../img/pictogramme/heute_papier.svg');
}

section.vorteile div.heute1 div:nth-of-type(2) img {
background-image: url('../img/pictogramme/heute_toner.svg');
}

section.vorteile div.heute1 div:nth-of-type(3) img {
background-image: url('../img/pictogramme/heute_umschlaege.svg');
}

section.vorteile div.heute2 div:first-of-type img {
background-image: url('../img/pictogramme/heute_drucken.svg');
}

section.vorteile div.heute2 div:nth-of-type(2) img {
background-image: url('../img/pictogramme/heute_falzen.svg');
}

section.vorteile div.heute2 div:nth-of-type(3) img {
background-image: url('../img/pictogramme/heute_kuvertieren.svg');
}

section.vorteile div.heute2 div:nth-of-type(4) img {
background-image: url('../img/pictogramme/heute_frankieren.svg');
}

section.vorteile div.morgen div:first-of-type img {
background-image: url('../img/pictogramme/morgen_mausklick.svg');
}

section.vorteile div.morgen div:nth-of-type(2) img {
background-image: url('../img/pictogramme/morgen_postbox.svg');
}

section.vorteile div.weiterhin p:first-of-type img {
background-image: url('../img/pictogramme/briefe_versenden.svg');
}

section.einsatz .flexBox > div:first-of-type img {
background-image: url('../img/pictogramme/vorteil_internetmarken.svg');
}

section.einsatz .flexBox > div:nth-of-type(2) img {
background-image: url('../img/pictogramme/vorteil_paketversand.svg');
}

section.einsatz .flexBox > div:nth-of-type(3) img {
background-image: url('../img/pictogramme/vorteil_datenschutz.svg');
}

section.einsatz .flexBox > div:last-of-type img {
background-image: url('../img/pictogramme/vorteil_einsatzoptionen.svg');
}

section.kontakt p,
section.register p {
line-height:2em;
}

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

section.kontakt .anfahrt,
section.register .anfahrt{
border:none;
height:250px;
width:100%;
}

section.angebot {
text-align: center;
}

section.angebot img {
width: 100%;
}
section.register .finalButton {
border-top: 1px solid var(--farbe4);
margin: 20px 0px 0px 0px;
padding: 5px 0px 0px 0px;
}

/*--- toggle---*/

.toggle {
cursor: pointer;
margin-bottom:5px;
}

.panel {
height: 0;
margin-bottom: 20px;
overflow: hidden;
transition: height 0.5s ease-out;
}

footer {
box-sizing: border-box;
position:fixed;
bottom:0;
height.30px;
width:100%;
border-top: 4px solid var(--farbe3);
background-color: var(--farbe4);
z-index: 100;
}