/* Tagesschau XL ab 1900px, L ab 1010px, M ab 768px, S ab 480px, XS ab 320px, darunter Querscrollen */

/* gelb: #ffdd00 rgb(255,221,0)*/
/* grün: #9cc649 rgb(156,198,73) */
/* hgrau #cac6c3 rgb(202,198,195) */
/* dgrau: #47443d rgb(71,68,61)*/

html {
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: fff;
    overflow-x: hidden;
    background-color: #47443d;
    background-position: left top;
    background-size: 100vw;
    background-repeat: no-repeat;
}
img {
    border: none;
}
a {
    text-decoration: none;
}
#page {
    position: relative;
    width: 100vw;
}
#head {
    width: 100vw;
    height: 10.6vw;
    background: #9cc649;
    z-index: 98;
}
#head img {
    margin: 3.1vw 0 0 3.9vw; /* 32px 0 0 40px */
    width: 31.6vw; /* 324px */
}
#kopfbild {
    position: absolute;
    top: 0.1vw;
    left: 0;
    width: 75vw;
    height: 12.7vw;
    background-position: left top;
    background-size: 100vw;
    background-repeat: no-repeat;
    pointer-events: none;
}
nav#haupt {
    display: block;
    width: 31.6vw; /* 324px */
    margin: 0;
    padding: 0;
    position: absolute;
    top: 12.2vw;
    left: 3.9vw;
    z-index: 99;
}
nav#haupt #menu {
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    justify-content: space-between;
}
nav a {
    display: inline-flex;
    margin: 0;
    padding: 0 1.1vw 0 1.1vw; /* 0 11px 0 11px */
    line-height: 2.1vw; /* 21px */
    font-size: 1.4vw; /* 14px */
    text-transform: uppercase;
    background: #9cc649;
    color: #fff;
}
nav#haupt a.active {
    background: #fff;
    color: #9cc649;
}
nav#haupt a#toggle, nav#haupt a#flag, nav#haupt img#logo_mini, nav#haupt a[href$="home.html"], nav#haupt a[href$="impressum.html"], nav#haupt a[href$="datenschutz.html"] {
    display: none;
}
nav#neben {
    margin: -0.5vw 0 0 0;
    padding: 0;
    display: block;
    width: 110vw;
}
nav#neben.ref {
    background: #6b6766;
}
nav#neben a {
    font-size: 1.1vw; /* 11px */
    text-transform: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
}
nav#neben a#navfill {
    background: #9cc649;
    width: 72.5vw;
}
nav#neben a[href$="impressum.html"]{
    width: 6.8vw;
    padding: 0 1.1vw 0 1.1vw;
    text-align: right;
}
nav#neben a[href$="datenschutz.html"]{
    width: 16.9vw;
    padding-left: 1.1vw;
    margin: 0 0 0 0.5vw;
}
nav#neben a.active {
    color: #47443d;
}
#content.home {
    margin: 31.4vw 8.8vw 5vw 10.7vw; /* 322px 90px 51px 110px */
}
#content.agentur, #content.impressum, #content.datenschutz {
    margin: 28.5vw 5.5vw 5vw 4.8vw; /* 292px 56px 51px 49px */
}
#content.referenzen {
    margin: 28.5vw 5vw 5vw 9.6vw; /* 292px 90px 51px 98px */
    column-count: 2;
    column-gap: 5vw;
}
#content.referenzen.sub {
    column-count: auto;
    margin: 5vw 5.8vw 0 3.9vw;
    position: relative;
}
#content.kontakt {
    margin: 25.1vw 0 5vw 52.4vw; /* 257px 0 51px 537px */
}
h1 {
    color: #ffdd00;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 3.2vw; /* 33px */
    line-height: 3.2vw;
    margin: 0;
}
h2 {
    color: #ffdd00;
    font-weight: normal;
    font-size: 2.3vw;
    line-height: 2.3vw;
    margin: 1.2vw 0 0 0;
}
h3 {
    color: #ffdd00;
    font-size: 1.4vw; /* 33px */
    line-height: 2.2vw;
    margin: 1.2vw 0 0 0;
}
a:hover, #content a:hover, #content.kontakt a:hover {
    color: #ffdd00;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    color: #fff;
    line-height: 3.2vw; /* 33px */
    font-size: 1.7vw; /* 17px */
    padding: 0 0 0 1.6vw;
    background-image: url('grafik/square.svg');
    background-size: 0.9vw;
    background-repeat: no-repeat;
    background-position: left 1.2vw;
}
p, #content.datenschutz li {
    color: #fff;
    margin: 1.2vw 0 0 0;
    font-size: 1.4vw;
    line-height: 2.2vw; /* 23px */
    background-position: left 0.7vw;
}
#content a {
    color: #9cc649;
}
#content.kontakt a {
    color: #fff;
}
#content.agentur h1, #content.impressum h1, #content.datenschutz h1, #content.impressum h2, #content.datenschutz h2,  #content.impressum h3, #content.datenschutz h3, #content.agentur p, #content.impressum p, #content.datenschutz p, #content.datenschutz ul {
    padding: 0 4.8vw 0 3.2vw; /* 0 49px 0 33px */
    border-left: solid 1px transparent;
}
#content.agentur p.randL {
    padding-bottom: 1.2vw;
    border-left: solid 1px #9cc649;
}
#content.agentur p.randLU {
    margin: 0;
    padding: 0 3.8vw 2.2vw 3.2vw; /* 0 49px 23px 33px */
    border-left: solid 1px #9cc649;
    border-bottom: solid 1px #9cc649;
    text-align: right;
    background-image: url('grafik/square.svg');
    background-repeat: no-repeat;
    background-size: 1.1vw;
    background-position: right bottom;
}
#content.agentur p.randLU a {
    display: inline-block;
    margin-left: 3.9vw; /* 40px */
}
#content.referenzen.sub img {
    /* box-shadow: h-offset v-offset blur spread color */
    box-shadow: 0.6vw 0.6vw 1.6vw 0.6vw #47443d;
    margin: 0 0 3.9vw 0;
    display: inline-block;
    vertical-align: top;
}
#content.referenzen.sub img.ref1 {
    width: 31.6vw;
    display: block;
    float: left;
}
#content.referenzen.sub.mzf img.ref1 {
    width: 24vw;
}
#content.referenzen.sub.honerkamp img.ref1, #content.referenzen.sub.marx img.ref1, #content.referenzen.sub.riedel img.ref1 {
    width: 49.6vw;
}
#content.referenzen.sub.bfb img.ref2, #content.referenzen.sub.bfb img.ref4, #content.referenzen.sub.bfb img.ref5 {
    width: 17.6vw;
    margin-left: 2vw;
}
#content.referenzen.sub.bfb img.ref3 {
    width: 35.2vw;
    margin-left: 2vw;
}
#content.referenzen.sub.kefb img.ref2, #content.referenzen.sub.kefb img.ref3, #content.referenzen.sub.kefb img.ref4 {
    height: 20vw;
    margin-left: 2vw;
}
#content.referenzen.sub.lanuv img.ref2 {
    width: 35.9vw;
    margin-left: 3vw;
}
#content.referenzen.sub.mzf img.ref2, #content.referenzen.sub.mzf img.ref3, #content.referenzen.sub.mzf img.ref4, #content.referenzen.sub.mzf img.ref5, #content.referenzen.sub.mzf img.ref6, #content.referenzen.sub.mzf img.ref7 {
    height: 14.3vw;
    margin-left: 2vw;
}
#content.referenzen.sub.mzf img.ref8 {
    height: 10vw;
    margin-left: 2vw;
    margin-bottom: 1.5vw;
}
#content.referenzen.sub.riedel img.ref2 {
    width: 37.4vw;
    margin-left: 3vw;
}
#content.referenzen.sub.oberhausen img.ref2, #content.referenzen.sub.oberhausen img.ref3, #content.referenzen.sub.oberhausen img.ref4, #content.referenzen.sub.oberhausen img.ref5 {
    width: 11vw;
    margin-left: 2vw;
}
#content.referenzen.sub.oberhausen img.ref6, #content.referenzen.sub.oberhausen img.ref7, #content.referenzen.sub.oberhausen img.ref8 {
    width: 15.6vw;
    margin-left: 2vw;
}
#content.referenzen.sub.seelsorge img.ref2 {
    width: 24vw;
    margin-left: 2vw;
}
#content.referenzen.sub.seelsorge img.ref3 {
    width: 17vw;
    margin-left: 2vw;
}
#content.referenzen.sub.visuelle img.ref2, #content.referenzen.sub.visuelle img.ref3, #content.referenzen.sub.visuelle img.ref5 {
    width: 10.3vw;
    margin-left: 2vw;
}
#content.referenzen.sub.visuelle img.ref4 {
    width: 30.5vw;
    margin-left: 2vw;
}
#content.referenzen.sub.visuelle img.ref5 {
    position: relative;
    top: -6.8vw;
    left: -45.3vw;
}
#content.referenzen.sub #reftext {
    height: 44.7vw;
    position: absolute;
    left: 31.6vw;
    top: 0;
}
#content.referenzen.sub.honerkamp #reftext {
    height: 52vw;
    left: 49.6vw;
}
#content.referenzen.sub.marx #reftext {
    height: 53vw;
    left: 49.6vw;
}
#content.referenzen.sub.mzf #reftext {
    left: 24vw;
}
#content.referenzen.sub.riedel #reftext {
    height: 35.2vw;
    left: 49.6vw;
}
#content.referenzen.sub.seelsorge #reftext {
    height: 31.6vw;
    left: 31.6vw;
}
#content.referenzen.sub p.randUR {
    margin: 0;
    font-size: 1.1vw;
    line-height: 1.8vw;
    width: 33.7vw; /* 345px */
    padding: 0 3.5vw 2.1vw 3vw; /* 0 36px 22px 26px */
    border-bottom: solid 1px #9cc649;
    border-right: solid 1px #9cc649;
    background-image: url('grafik/square.svg');
    background-repeat: no-repeat;
    background-size: 1.1vw;
    background-position: right top;
    position: absolute;
    bottom: 0;
    left: 0;
}
#content.referenzen.sub #morerefs {
    text-align: right;
}
#content.referenzen.sub.lanuv #morerefs, #content.referenzen.sub.mzf #morerefs {
    text-align: left;
}
#content.referenzen.sub #clear1 {
    height: 51px;
    clear: both;
    display: none;
}
#content.referenzen.sub #clear2 {
    height: 5vw;
    clear: both;
}
#content.kontakt p {
    width: 16.3vw; /* 167px */
}
#content.kontakt p.randL {
    padding: 4.1vw 4.8vw 1.2vw 5.3vw; /* 42px 49px 12px 54px */
    border-left: solid 1px #9cc649;
}
#content.kontakt p.randLUR {
    margin: 0;
    padding: 0 4.8vw 4.1vw 5.3vw; /* 0 49px 42px 54px */
    border-left: solid 1px #9cc649;
    border-bottom: solid 1px #9cc649;
    border-right: solid 1px #9cc649;
    background-image: url('grafik/square.svg');
    background-repeat: no-repeat;
    background-size: 1.1vw;
    background-position: right top;
}
@media only screen and (max-width: 1023px) {
    body {
        background-position: calc(50vw - 512px) top;
        background-size: 1024px 1024px;
    }
    #head {
        width: 100%;
        height: 108px;
    }
    #head img {
        margin: 32px 0 0 40px;
        width: 324px;
    }
    #kopfbild {
        top: 0;
        left: calc(50vw - 512px);
        width: 880px;
        height: 124px;
        background-size: 1024px;
    }
    nav#haupt {
        width: 324px;
        top: 124px;
        left: 40px;
    }
    nav a {
        padding: 0 11px 0 11px;
        line-height: 21px;
        font-size: 14px;
    }
    nav#neben {
        margin: -5px 0 0 0;
    }
    nav#neben a {
        font-size: 11px;
    }
    nav#neben a#navfill {
        width: calc(100vw - 281px);
    }
    body#referenzen.sub nav#neben a#navfill {
        width: calc(100vw - 251px);
    }
    nav#neben a[href$="impressum.html"]{
        width: 70px;
        padding: 0 11px 0 11px;
    }
    nav#neben a[href$="datenschutz.html"]{
        width: 173px;
        padding-left: 11px;
        margin: 0 0 0 5px;
    }
    body#referenzen.sub nav#neben a[href$="datenschutz.html"]{
        width: 143px;
    }
    #content.home {
        margin-top: 323px;
    }
    #content.agentur, #content.referenzen, #content.impressum, #content.datenschutz {
        margin-top: 293px;
    }
    #content.referenzen {
        column-count: auto;
        column-gap: normal;
    }    
    #content.referenzen.sub {
        margin: 51px 59px 51px 40px;
    }
    #content.kontakt {
        margin-top: 257px;
        margin-left: calc(50vw + 25px);
    }
    h1 {
        font-size: 33px;
        line-height: 33px;
    }
    h2 {
        font-size: 24px;
        line-height: 24px;
        margin: 12px 0 0 0;
    }
    h3 {
        font-size: 14px;
        line-height: 23px;
        margin: 12px 0 0 0;
    }
    li {
        line-height: 33px;
        font-size: 17px;
        padding: 0 0 0 16px;
        background-size: 9px;
        background-position: left 12px;
    }
    p, #content.datenschutz li {
        margin: 12px 0 0 0;
        font-size: 14px;
        line-height: 23px;
        background-position: left 7px;
    }
    #content.agentur p.randL {
        padding-bottom: 12px;
    }
    #content.agentur p.randLU {
        padding-bottom: 23px;
        background-size: 11px;
    }    
    #content.referenzen.sub img {
        /* box-shadow: h-offset v-offset blur spread color */
        box-shadow: 6px 6px 16px 6px #47443d;
        margin: 0 0 40px 0;
    }
    #content.referenzen.sub img.ref1 {
        width: 324px;
    }
    #content.referenzen.sub.mzf img.ref1 {
        width: 246px;
        float: none;
    }
    #content.referenzen.sub.honerkamp img.ref1, #content.referenzen.sub.marx img.ref1, #content.referenzen.sub.riedel img.ref1 {
        width: 80vw;
        max-width: 508px;
        float: none;
    }
    #content.referenzen.sub.bfb img.ref2, #content.referenzen.sub.bfb img.ref4, #content.referenzen.sub.bfb img.ref5 {
        width: 180px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.bfb img.ref3 {
        width: 360px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.kefb img.ref2, #content.referenzen.sub.kefb img.ref3, #content.referenzen.sub.kefb img.ref4 {
        height: 205px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.lanuv img.ref2 {
        width: 368px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.mzf img.ref2, #content.referenzen.sub.mzf img.ref3, #content.referenzen.sub.mzf img.ref4, #content.referenzen.sub.mzf img.ref5, #content.referenzen.sub.mzf img.ref6, #content.referenzen.sub.mzf img.ref7, #content.referenzen.sub.mzf img.ref8 {
        height: 102px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.riedel img.ref2 {
        width: 383px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.oberhausen img.ref2, #content.referenzen.sub.oberhausen img.ref3, #content.referenzen.sub.oberhausen img.ref4, #content.referenzen.sub.oberhausen img.ref5 {
        width: 113px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.oberhausen img.ref6, #content.referenzen.sub.oberhausen img.ref7, #content.referenzen.sub.oberhausen img.ref8 {
        width: 160px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.seelsorge img.ref2 {
        width: 246px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.seelsorge img.ref3 {
        width: 174px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.visuelle img.ref2, #content.referenzen.sub.visuelle img.ref3, #content.referenzen.sub.visuelle img.ref5 {
        width: 105px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.visuelle img.ref4 {
        width: 312px;
        margin-left: 0;
        margin-right: 20px;
    }
    #content.referenzen.sub.visuelle img.ref5 {
        position: static;
    }
    #content.referenzen.sub #reftext {
        height: 458px;
        left: 324px;
        top: 0;
    }
    #content.referenzen.sub.mzf #reftext {
        left: 246px;
        top: 0;
    }
    #content.referenzen.sub.honerkamp #reftext, #content.referenzen.sub.marx #reftext, #content.referenzen.sub.riedel #reftext {
        position: static;
        height: auto;
    }
    #content.referenzen.sub.seelsorge #reftext {
        height: 324px;
        left: 324px;
    }
    #content.referenzen.sub p.randUR {
        margin: 0;
        font-size: 11px;
        line-height: 18px;
        width: 345px;
        padding: 0 36px 22px 30px;
        background-size: 11px;
        background-position: right top;
    }
    #content.referenzen.sub.honerkamp p.randUR, #content.referenzen.sub.marx p.randUR, #content.referenzen.sub.riedel p.randUR {
        margin: 26px 0 51px 0;
        padding: 0 36px 22px 26px;
        position: static;
    }
    #content.referenzen.sub #morerefs {
        text-align: left;
        position: static;
        clear: both;
    }
    #content.kontakt p {
        width: 167px;
    }
    #content.kontakt p.randL {
        padding-bottom: 12px;
    }
    #content.kontakt p.randLUR {
        background-size: 11px;
    }
}
@media only screen and (max-width: 879px) {
    body {
        background-position: calc(50vw - 440px) 26px;
        background-size: 880px 880px;
    }
    body#referenzen.sub {
        background-position: calc(50vw - 440px) 17px;
    }
    #head {
        height: 124px;
    }
    #kopfbild {
        top: 26px;
        left: calc(50vw - 440px);
        width: 700px;
        height: 98px;
        background-size: 880px;
    }
    body#referenzen.sub #kopfbild {
        top: 17px;
        left: calc(50vw - 440px);
        width: 700px;
        height: 107px;
        background-size: 880px;
    }
    nav#haupt #menu {
        display: block;
        width: auto;
        position: relative;
    }
    nav#haupt a {
        display: block;
        line-height: 36px;
        width: 230px;
    }
    nav#haupt a#toggle, nav#haupt a#flag, nav#haupt a[href$="home.html"], nav#haupt a[href$="impressum.html"], nav#haupt a[href$="datenschutz.html"] {
        display: block;
    }
    body#home nav#haupt a#flag, body#impressum nav#haupt a#flag, body#datenschutz nav#haupt a#flag {
        display: none;
    }
    nav#haupt a#toggle {
        float: left;
        width: 30px;
        background-image: url('grafik/hamburger_close.svg');
        background-position: center top;
        background-size: 30px 30px;
        background-repeat: no-repeat;
        margin: 0 20px 0 0;
    }
    nav#haupt img#logo_mini {
        width: 13px;
        height: 13px;
        position: fixed;
        left: 51px;
        top: 25px;
        pointer-events: none;
    }
    nav#haupt a#toggle img {
        margin: 0;
        width: 30px;
        height: 30px;
        background: #9cc649;
        vertical-align: top;
    }
    nav#haupt a#flag, nav#haupt#menu {
        margin: 0 0 0 72px;
        cursor: pointer;
    }
    nav#haupt a#flag:hover {
        color: #fff;
    }
    nav#haupt #menu {
        display: none;
    }
    nav#neben {
        display: none;
    }
    #content.home {
        margin-top: 290px;
    }
    #content.agentur, #content.referenzen, #content.impressum, #content.datenschutz {
        margin-top: 260px;
    }
    #content.kontakt {
        margin-top: 230px;
        margin-left: calc(50vw + 21px);
    }
}
@media only screen and (max-width: 799px) {
    #content.referenzen.sub img.ref1 {
        float: none;
    }
    #content.referenzen.sub #reftext, #content.referenzen.sub.mzf #reftext, #content.referenzen.sub.seelsorge #reftext {
        position: static;
        height: auto;
    }
    #content.referenzen.sub p.randUR,  #content.referenzen.sub.riedel p.randUR {
        margin: 26px 0 51px 0;
        width: auto;
        padding: 0 36px 22px 26px;
        position: static;
    }
}
@media only screen and (max-width: 479px) {
    body {
        background-position: calc(50vw - 440px) top;
    }
    body#referenzen.sub {
        background-position: calc(50vw - 440px) -26px;
    }
    #head {
        height: 98px;
    }
    #head img {
        margin: 22px 0 0 26px; /* 32px 0 0 40px */
        width: 217px;
    }
    #kopfbild {
        top: 0;
    }
    body#referenzen.sub #kopfbild {
        top: -9px;
    }
    nav#haupt {
        top: 98px;
        left: 26px;
        width: 294px;
    }
    nav#haupt a {
        width: 200px;
    }
    nav#haupt img#logo_mini {
        left: 37px;
    }    
    #content.referenzen.sub {
        margin-left: 26px;
    }
    #content.referenzen.sub img.ref1, #content.referenzen.sub.riedel img.ref1 {
        width: 294px;
    }
    #content.agentur p.randLU {
        width: 199px;        
        padding-left: calc(84.9vw - 200px);
    }
    #content.kontakt {
        margin-left: 10.7vw;
        margin-top: 260px;
    }
    #content.kontakt p.randL {
        padding-top: 0;
        border-left: solid 1px transparent;
    }
    #content.kontakt p.randLUR {
        border-right: none;
        background-position: right bottom;
    }
}
@media only screen and (max-width: 319px) {
    body {
        overflow-x: scroll;
        background-position: -280px top;
    }
    #page {
        width: 320px;
    }
    #kopfbild {
        top: 0;
        left: -280px;
    }
}