body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}

/*
    Google Font: Roboto
    
    https://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,500,700
    
    
    
    Icon-Font: Quota
    
    http://app.fontastic.me/#publish/font/6whQZNdEKV6QBM3VMH7tYA
*/





/* * * * * * * * * * Font * * * * * * * * * */

/* @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700); */





/* * * * * * * * * * Symbole * * * * * * * * * */

@charset "UTF-8";

@font-face {
  font-family: "quota";
  src:url("/files/themes/quota/fonts/quota.eot");
  src:url("/files/themes/quota/fonts/quota.eot?#iefix") format("embedded-opentype"),
    url("/files/themes/quota/fonts/quota.woff") format("woff"),
    url("/files/themes/quota/fonts/quota.ttf") format("truetype"),
    url("/files/themes/quota/fonts/quota.svg#quota") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "quota" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "quota" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bing:before {
  content: "\34";
}
.icon-google:before {
  content: "\33";
}
.icon-kundenfokus:before {
  content: "\42";
}
.icon-linkedin:before {
  content: "\32";
}
.icon-logistik:before {
  content: "\41";
}
.icon-mail:before {
  content: "\61";
}
.icon-pdf:before {
  content: "\62";
}
.icon-support:before {
  content: "\44";
}
.icon-werkzeuge:before {
  content: "\43";
}
.icon-xing:before {
  content: "\31";
}

/* * * * * * * * * * Symbole * * * * * * * * * */


/*
    Schriftart:         Roboto
    
    Basisschriftgrösse: 16px
    
    grau:               rgb(80, 80, 80)
    grau (Formular):    rgb(196, 196, 196)
    grau (mittel):      rgb(220, 220, 220)
    grau (hell):        rgb(246, 246, 246)
    
    rot:                rgb(170, 30, 31)
    rot (dunkel):       rgb(130, 24, 19)
    rot (transparent):  rgba(170, 30, 31, 0.8)
    
    weiss               rgb(255, 255, 255)
*/





/* * * * * * * * * * Grundeinstellungen: Struktur, Farben und Schrift * * * * * * * * * */

html {
    overflow-y:         scroll;
}

html, body {
    background-color:   rgb(255, 255, 255); /* weiss */
    color:              rgb(80, 80, 80); /* grau */
    font-family:        'Roboto', sans-serif;
    font-size:          16px;
    font-style:         normal;
    font-weight:        normal;
}

header:after {

    /* Floating nach dem Header auflösen */

    clear:              both;
    content:            ".";
    display:            block;
    height:             0;
    visibility:         hidden;
}

header #logo {
    margin:             0 auto;
    margin-bottom:      20px;
    margin-top:         30px;
    width:              213px;
}

header #logo img {
    width:              100%;
    display:            block;
}

#wrapper {
    padding-left:       10px;
    padding-right:      10px;
}

div.clear {
    clear:              both;
}

a {
    color:              rgb(170, 30, 31); /* rot */
    text-decoration:    none;
}

a:active,
a:hover {
    text-decoration:    underline;
}

h1, h2, p, li {
    margin:     0;
    padding:    0;
    font-weight: normal;
}

h1 {
    color:              rgb(170, 30, 31); /* rot */
    font-size:          20px;
    margin-top:         2em;
}

h2 {
    color:              rgb(130, 24, 19); /* rot (dunkel) */
    font-size:          20px;
    margin-top:         2em;
}

p {
    line-height:        1.5;
    margin-top:         2em;
}

ul {
    margin-left:        1em;
    margin-top:         2em;
    padding-left:       1.5em;
}

p + ul {
    margin-top:         0;
}

li {
    line-height:        1.5;
    list-style-type:    circle;
}

div.bild > img {
    max-width:          none;
    width:              100%;
}

figure {
    margin-top:         2rem;
    padding:            0;
}

figure.float_right {
    margin-bottom:       2rem;
    margin-left:         2rem;
}

div#googlemap > iframe {
    border:             0;
    height:             260px;
    width:              100%;
}

@media screen and (min-width: 800px)
{
    #wrapper,
    #wrapper-header,
    #wrapper-footer,
    div#quota-header .ce_text,
    nav#hauptnavigation {
        margin:             0 auto;
        width:              760px;
    }

    #wrapper {
        margin-top:         20px;
    }

    header #logo {
        float:              left;
        margin-bottom:      30px;
        margin-left:        0;
        margin-top:         30px;
    }

    div#googlemap > iframe {
        height:             423px;
    }
}

@media screen and (min-width: 1000px)
{
    #wrapper,
    #wrapper-header,
    #wrapper-footer,
    div#quota-header .ce_text,
    nav#hauptnavigation {
        width:              960px;
    }

    div#googlemap > iframe {
        height:             534px;
    }
}

@media screen and (min-width: 1200px)
{
    #wrapper,
    #wrapper-header,
    #wrapper-footer,
    div#quota-header .ce_text,
    nav#hauptnavigation {
        width:              1160px;
    }

    div#googlemap > iframe {
        height:             645px;
    }
}

/* * * * * * * * * * Grundeinstellungen: Struktur, Farben und Schrift * * * * * * * * * */





/* * * * * * * * * * Header: Social Media Icons * * * * * * * * * */

header div#social_media {
    margin:             0 auto;
    margin-bottom:      20px;
    width:              260px;
}

header div#social_media ul {
    list-style-type:    none;
    margin:             0;
    padding:            0;
}

header div#social_media li {
    color:              rgb(170, 30, 31); /* rot */
    display:            block;
    float:              left;
    font-size:          25px;
    margin-left:        10px;
    margin-right:       10px;
    padding:            0;
    text-align:         left;
}

header div#social_media ul:after {
    clear:              both;
    content:            ".";
    display:            block;
    height:             0;
    visibility:         hidden;
}

header div#social_media a,
header div#social_media span {
    display:            block;
    line-height:        1;
    text-decoration:    none;
}

header div#social_media a:focus,
header div#social_media a:hover {
    color:              rgb(80, 80, 80); /* grau */
}

@media screen and (min-width: 800px)
{
    header div#social_media {
        margin:             0;
        margin-top:         33px;
        width:              auto;
    }

    header div#social_media {
        float:              right;
    }

    header div#social_media li {
        margin:             0;
        margin-right:       20px;
    }

    header div#social_media li:last-child {
        margin-right:       0;
    }
}

/* * * * * * * * * * Header: Social Media Icons * * * * * * * * * */





/* * * * * * * * * * Layoutbereich: Quota Header * * * * * * * * * */

div#quota-header .block {
    overflow:           visible;
}

div#quota-header img {
    display:            block;
    max-width:          none;
    width:              100%;
}

div#quota-header div.slide {
    background-position:    center center;
    background-repeat:      no-repeat;
    background-size:        cover;
    height:                 400px;
}

div#quota-header div.slide > div.slide-wrapper {
    background-color: lime;
    margin-left:        auto;
    margin-right:       auto;
    position:           relative;
    width:              100%;
}

div#quota-header div.slide div.slide-wrapper > div.text-box {
    background-color:   rgba(255, 255, 255, .9);
    padding:            20px;
    position:           absolute;
    top:                60px;
    right:              0;
    width:              400px;
}

div#quota-header div.slide div.slide-wrapper p.zitat {
    margin-top:         0;
}

div#quota-header div.slide div.slide-wrapper p.kunde {
    margin-top:         1em;
    text-transform:     uppercase;
}

@media screen and (max-width: 799px)
{
    div#quota-header {
        display:            none;
    }
}

@media screen and (min-width: 800px)
{
    div#quota-header div.slide > div.slide-wrapper {
        padding:            0;
        width:              760px;
    }
}

@media screen and (min-width: 1000px)
{
    div#quota-header div.slide > div.slide-wrapper {
        width:              960px;
    }
}

@media screen and (min-width: 1200px)
{
    div#quota-header div.slide > div.slide-wrapper {
        width:              1160px;
    }
}

/* * * * * * * * * * Layoutbereich: Quota Header * * * * * * * * * */





/* * * * * * * * * * Layoutbereich: Quota Homepage Attribute * * * * * * * * * */

div#quota-attribute {
    background-color:   rgb(246, 246, 246); /* grau (hell) */
    border-top:         1px solid rgb(170, 30, 31); /* rot */
    margin-bottom:      -80px;
    margin-top:         80px;
    padding-bottom:     40px;
}

div#quota-attribute h2 {
    margin-top:         10px;
    text-align:         center;
}

div#quota-attribute p {
    margin-bottom:      0;
    margin-top:         20px;
    text-align:         center;
}

div#quota-attribute div.symbol {
    color:              rgb(170, 30, 31); /* rot */
    font-size:          70px;
    margin-top:         40px;
    text-align:         center;
}

div#quota-attribute div.attribut {
    box-sizing:         border-box;
    margin:             10px;
}

@media screen and (min-width: 800px)
{
    div#quota-attribute div#attribute {
        margin-left:        auto;
        margin-right:       auto;
        width:              780px;
    }

    div#quota-attribute div.attribut {
        float:              left;
        height:             280px;
        margin:             10px;
        padding:            10px;
        width:              370px; /* (780 - 40) / 2 */
    }
}

@media screen and (min-width: 1000px)
{
    div#quota-attribute div#attribute {
        width:              980px;
    }

    div#quota-attribute div.attribut {
        height:             260px;
        width:              470px; /* (980 - 40) / 2 */
    }
}

@media screen and (min-width: 1200px)
{
    div#quota-attribute div#attribute {
        width:              1180px;
    }

    div#quota-attribute div.attribut {
        height:             280px;
        width:              275px; /* (1180 - 80) / 4 */
    }
}

/* * * * * * * * * * Layoutbereich: Quota Homepage Attribute * * * * * * * * * */





/* * * * * * * * * * Layoutbereich: Footer * * * * * * * * * */

#footer {
    background-color:   rgb(220, 220, 220); /* grau (mittel) */
    border-top:         10px solid rgb(170, 30, 31); /* rot */
    margin-top:         80px;
}

div#quota-referenzen-logos + #footer {
    margin-top:         0;
}

#wrapper-footer {
    padding-bottom:     100px;
    padding-left:       10px;
    padding-right:      10px;
    padding-top:        60px;
}

#footer h2 {
    color:              rgb(170, 30, 31); /* rot */
    font-size:          18px;
    margin-bottom:      0.5em;
    margin-top:         0.5em;
}

footer ul {
    margin:             0;
    padding:            0;
}

footer li {
    border-bottom:      1px dotted rgb(80, 80, 80); /* grau */
    list-style:         none;
}

#footer p,
#footer li {
    font-size:          14px;
    margin-bottom:      0.5em;
    margin-top:         0.5em;
}

footer a {
    color:              rgb(80, 80, 80); /* grau */
}

footer a:active,
footer a:hover {
    color:              rgb(170, 30, 31); /* rot */
    text-decoration:    none;
}

#footer div.clear {
    clear:              both;
}

@media screen and (max-width: 799px)
{
    #footer h2 {
        margin-top:         2em;
    }

    footer h2.leer {
        display:            none;
    }
}

@media screen and (min-width: 800px)
{
    #footer div.infobox {
        float:              left;
        width:              190px;
    }

    #footer h2 {
        font-size:          14px;
    }

    footer ul {
        width:              80%;
    }

    #footer p,
    #footer li {
        font-size:          10px;
    }
}

@media screen and (min-width: 1000px)
{
    #footer div.infobox {
        width:              240px;
    }

    #footer h2 {
        font-size:          16px;
    }

    #footer p,
    #footer li {
        font-size:          12px;
    }
}

@media screen and (min-width: 1200px)
{
    #footer div.infobox {
        width:              290px;
    }

    #footer h2 {
        font-size:          18px;
    }

    #footer p,
    #footer li {
        font-size:          14px;
    }
}

/* * * * * * * * * * Layoutbereich: Footer * * * * * * * * * */





/* * * * * * * * * * Referenzen * * * * * * * * * */

div.mod_quota_referenzen {
    margin-top:         40px;
}

div.mod_quota_referenzen div.referenz {
    margin-bottom:      40px;
}

div.mod_quota_referenzen div.referenz h2 {
    margin-top:         20px;
}

div.mod_quota_referenzen div.referenz span.zitat_quelle {
    font-size:          12px;
}

div.mod_quota_referenzen div.logo {
    margin-top:         40px;
    text-align:         center;
}

div.mod_quota_referenzen div.logo img {
    width:              200px;
}

@media screen and (min-width: 800px)
{
    div.mod_quota_referenzen {
        margin-left:        -10px;
        margin-right:       -10px;
    }

    div.mod_quota_referenzen div.referenz {
        float:              left;
        margin-left:        10px;
        margin-right:       10px;
        width:              370px; /* (760 - 20) / 2 */
    }
}

@media screen and (min-width: 1000px)
{
    div.mod_quota_referenzen div.referenz {
        width:              470px; /* (960 - 20) / 2 */
    }
}

@media screen and (min-width: 1200px)
{
    div.mod_quota_referenzen {
        margin-left:        -30px;
        margin-right:       -30px;
    }

    div.mod_quota_referenzen div.referenz {
        margin-left:        30px;
        margin-right:       30px;
        width:              550px; /* (1160 - 60) / 2 */
    }
}

/* * * * * * * * * * Referenzen * * * * * * * * * */





/* * * * * * * * * * Layoutbereich: Quota Referenzen Statements * * * * * * * * * */

div#quota-referenzen-statements {
    background-color:   rgb(246, 246, 246); /* grau (hell) */
    border-top:         1px solid rgb(170, 30, 31); /* rot */
    margin-top:         20px;
    padding-bottom:     60px;
    padding-top:        60px;
}

div#quota-referenzen-statements > div {
    box-sizing:         border-box;
    margin-left:        10px;
    margin-right:       10px;
}

div#quota-referenzen-statements > div > h2 {
    margin-top:         0;
    margin-bottom:      2em;
    text-align:         center;
}

div#quota-referenzen-statements div.ce_quota_referenzen_statement {
    background-color:   rgb(255, 255, 255);
    border-radius:      5px;
    box-sizing:         border-box;
    margin-bottom:      20px;
    margin-top:         20px;
    padding:            10px;
}

div#quota-referenzen-statements div.ce_quota_referenzen_statement p.zitat {
    margin-top:         0;
}

div#quota-referenzen-statements div.ce_quota_referenzen_statement p.quelle {
    font-size:          12px;
    margin-top:         0.5em;
}

@media screen and (min-width: 800px)
{
    div#quota-referenzen-statements > div {
        margin-left:        auto;
        margin-right:       auto;
        width:              780px;
    }

    div#quota-referenzen-statements div.ce_quota_referenzen_statement {
        float:              left;
        height:             170px;
        margin:             10px;
        width:              370px; /* (780 - 40) / 2 */
    }
}

@media screen and (min-width: 1000px)
{
    div#quota-referenzen-statements > div {
        width:              980px;
    }

    div#quota-referenzen-statements div.ce_quota_referenzen_statement {
        height:             150px;
        width:              470px; /* (980 - 40) / 2 */
    }
}

@media screen and (min-width: 1200px)
{
    div#quota-referenzen-statements > div {
        width:              1180px;
    }

    div#quota-referenzen-statements div.ce_quota_referenzen_statement {
        height:             170px;
        width:              373.333333px; /* (1180 - 60) / 3 */
    }
}

/* * * * * * * * * * Layoutbereich: Quota Referenzen Statements * * * * * * * * * */





/* * * * * * * * * * Layoutbereich: Quota Referenzen Logos * * * * * * * * * */

div#quota-referenzen-logos {
    border-top:         1px solid rgb(170, 30, 31); /* rot */
    padding-bottom:     60px;
    padding-top:        60px;
}

div#quota-referenzen-logos > div {
    box-sizing:         border-box;
    margin-left:        10px;
    margin-right:       10px;
}

@media screen and (min-width: 800px)
{
    div#quota-referenzen-logos > div {
        margin-left:        auto;
        margin-right:       auto;
        width:              760px;
    }
}

@media screen and (min-width: 1000px)
{
    div#quota-referenzen-logos > div {
        width:              960px;
    }
}

@media screen and (min-width: 1200px)
{
    div#quota-referenzen-logos > div {
        width:              1160px;
    }
}

/* * * * * * * * * * Layoutbereich: Quota Referenzen Logos * * * * * * * * * */





/* * * * * * * * * * Kontaktformular * * * * * * * * * */

div.ce_form {
    margin-top:         2em;
}

div.ce_form div.widget {
    margin-bottom:      20px;
    padding:            3px;
}

div.ce_form fieldset {
    border:             none;
    padding:            0;
    padding-top:        5px;
}

div.ce_form fieldset > span {
    margin-right:       20px;
}

div.ce_form div.widget-text label,
div.ce_form div.widget-textarea label {
    display:            block;
}

div.ce_form input[type=email],
div.ce_form input[type=tel],
div.ce_form input[type=text],
div.ce_form textarea {
    background-color:   rgb(246, 246, 246); /* grau (hell) */
    border:             1px solid rgb(220, 220, 220); /* grau (mittel) */
    box-sizing:         border-box;
    color:              rgb(80, 80, 80); /* grau */
    font-family:        'Roboto', sans-serif; /* Ohne diese Angabe zeigt Firefox in der Textarea eine falsche Schrift an. */
    padding:            5px;
    width:              100%;
}

div.ce_form input[type=submit] {
    background-color:   rgb(170, 30, 31); /* rot */
    border:             none;
    color:              rgb(255, 255, 255);
    cursor:             pointer;
    padding:            10px 20px;
}

div.ce_form input[type=submit]:hover {
    background-color:   rgba(170, 30, 31, 0.8); /* rot transparent */
}

div.ce_form p.error {
    color:              rgb(170, 30, 31); /* rot */
    display:            inline;
    font-size:          14px;
}

@media screen and (min-width: 1000px)
{
    div.ce_form div.widget-text {
        float:              left;
        width:              273.5px; /* 579 Gesamtbreite - 4 x 3px Rahmenabstand - 20px Abstand */
    }

    div.ce_form div.widget-text.links {
        clear:              both;
        margin-right:       20px;
    }

    div.ce_form div.widget-textarea {
        clear:              both;
    }
}

@media screen and (min-width: 1200px)
{
    div.ce_form div.widget-text {
        width:              328.5px; /* 689 Gesamtbreite - 4 x 3px Rahmenabstand - 20px Abstand */
    }
}

/* * * * * * * * * * Kontaktformular * * * * * * * * * */





/* * * * * * * * * * Templates für Download(s) * * * * * * * * * */

div.ce_downloads ul {
    margin-left:        0;
    padding:            0;
}

div.ce_downloads ul li {
    list-style-type:    none;
    margin-bottom:      5px;
    margin-top:         5px;
}

div.ce_download a:hover,
div.ce_downloads a:hover {
    text-decoration:    none;
}

div.ce_download a.pdf span.icon-pdf,
div.ce_downloads a.pdf span.icon-pdf {
    display:            block;
    float:              left;
    font-size:          25px;
}

div.ce_download a.pdf span.datei,
div.ce_downloads a.pdf span.datei {
    display:            block;
    float:              left;
    margin-top:         4px;
    margin-left:        10px;
}

/* * * * * * * * * * Templates für Download(s) * * * * * * * * * */





/* * * * * * * * * * Templates für Nachrichten * * * * * * * * * */

div.layout_latest,
div.layout_short {
    margin-top:         20px;
}

div.layout_full > p.info,
div.layout_latest > p.info,
div.layout_short > p.info {
    border-bottom:      1px dotted rgb(170, 30, 31); /* rot */
}

div.layout_short > p.info {
    text-align:         right;
}

div.layout_full > h1,
div.layout_latest > h2,
div.layout_short > h2 {
    margin-top:         1em;
}

div.layout_latest > p.more,
div.layout_short > p.more {
    margin-top:         0.5em;
}

div.ce_comments {
    margin-top:         40px;
}

div.ce_comments > div.form {
    margin-top:         80px;
}

div.ce_comments div.widget {
    margin-bottom:      20px;
    padding:            3px;
}

div.ce_comments > div.comment_default {
    background-color:   rgb(246, 246, 246); /* grau (hell) */
    border-radius:      5px;
    box-sizing:         border-box;
    margin-bottom:      20px;
    margin-top:         20px;
    padding:            10px;
}

div.ce_comments > div.comment_default > p.info {
    margin-top:         0;
}

div.ce_comments label {
    display:            block;
}

div.ce_comments p.error {
    color:              rgb(170, 30, 31); /* rot */
    font-size:          14px;
    margin-top:         0;
}

div.ce_comments input[type=email],
div.ce_comments input[type=text],
div.ce_comments input[type=url],
div.ce_comments textarea {
    background-color:   rgb(246, 246, 246); /* grau (hell) */
    border:             1px solid rgb(220, 220, 220); /* grau (mittel) */
    box-sizing:         border-box;
    color:              rgb(80, 80, 80); /* grau */
    font-family:        'Roboto', sans-serif; /* Ohne diese Angabe zeigt Firefox in der Textarea eine falsche Schrift an. */
    padding:            5px;
    width:              100%;
}

div.ce_comments input[type=submit] {
    background-color:   rgb(170, 30, 31); /* rot */
    border:             none;
    color:              rgb(255, 255, 255);
    cursor:             pointer;
    padding:            10px 20px;
}

div.ce_comments input[type=submit]:hover {
    background-color:   rgba(170, 30, 31, 0.8); /* rot transparent */
}

@media screen and (min-width: 800px)
{
    div.ce_comments input[type=email],
    div.ce_comments input[type=text],
    div.ce_comments input[type=url] {
        width:              500px;
    }
}

/* * * * * * * * * * Templates für Nachrichten * * * * * * * * * */


/* * * * * * * * * * Navigation: Hauptnavigation * * * * * * * * * */

nav ul {
    list-style-type:    none;
    margin:             0;
    padding:            0;
}

nav li {
    display:            block;
    margin:             0;
    padding:            0;
    text-align:         left;
}

div#quota-hauptnavigation {
    background-color:   rgb(170, 30, 31); /* rot */
}

#hauptnavigation a,
#hauptnavigation strong {
    display:            block;
    padding-bottom:     0.3em;
    padding-top:        0.5em;
    text-decoration:    none;
}

#hauptnavigation ul.level_1 > li {
    border-top:         1px solid rgb(255, 255, 255); /* weiss */
    font-size:          16px;
    text-align:         center;
    text-transform:     uppercase;
    width:              100%;
}

#hauptnavigation ul.level_1 > li:last-of-type {
    border-bottom:      1px solid rgb(255, 255, 255); /* weiss */
}

#hauptnavigation ul.level_1 > li > a,
#hauptnavigation ul.level_1 > li > strong {
    color:              rgb(255, 255, 255); /* weiss */
}

@media screen and (max-width: 799px)
{
    #hauptnavigation ul.level_1 > li > a:focus,
    #hauptnavigation ul.level_1 > li > a:hover,
    #hauptnavigation ul.level_1 > li > a.trail,
    #hauptnavigation ul.level_1 > li > strong.active,
    #hauptnavigation ul.level_1 > li > strong.forward {
        background-color:   rgb(80, 80, 80); /* grau */
    }
}

@media screen and (min-width: 800px)
{
    div#quota-hauptnavigation {
        background-color:   rgba(170, 30, 31, 0.8); /* rot transparent */
    }
    
    #hauptnavigation {
        padding-bottom: 20px;
        padding-top:    28px;
    }
    
    #hauptnavigation a,
    #hauptnavigation strong {
        border-bottom:      2px solid rgba(255, 255, 255, 0.0); /* unsichtbar, um eine Höhenänderung der Navigation beim Hover-Efeekt zu vermeiden */
        padding-bottom:     1px;
        padding-top:        3px;
    }
    
    #hauptnavigation ul.level_1 {
        float: right;
    }
    
    #hauptnavigation ul.level_1 > li {
        border:             0;
        float:              left;
        font-size:          14px;
        margin-right:       2.5em;
        width:              auto;
    }
    
    #hauptnavigation ul.level_1 > li:last-of-type {
        border:         0;
        margin-right:   0;
    }
    
    #hauptnavigation ul.level_1 > li > a:focus,
    #hauptnavigation ul.level_1 > li > a:hover,
    #hauptnavigation ul.level_1 > li > a.trail,
    #hauptnavigation ul.level_1 > li > strong.active,
    #hauptnavigation ul.level_1 > li > strong.forward {
        border-bottom:      2px solid rgb(255, 255, 255); /* weiss */
    }
}

@media screen and (min-width: 1000px)
{
    #hauptnavigation ul.level_1 > li {
        font-size:          16px;
    }
    
    #hauptnavigation ul.level_1 > li:last-of-type {
        margin-right:   0;
    }
}

@media screen and (min-width: 1200px)
{
    #hauptnavigation ul.level_1 > li {
        font-size:          18px;
    }
    
    #hauptnavigation ul.level_1 > li:last-of-type {
        margin-right:   0;
    }
}

/* * * * * * * * * * Navigation: Hauptnavigation * * * * * * * * * */