/* Nordkreatur-inspirierte Kopf- und Footeroptik. */

#header,
.site-header {
    position: relative;
    z-index: 100;
    background: #fbfaf2;
}

#header1,
.header-top {
    color: #ffffff;
    background: #5a422b;
    font-size: 14px;
}

.header-top__inner {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.header-top__contact,
.header-top__social {
    line-height: 28px;
}

.header-top__contact a,
.header-top__contact span,
.header-top__social a {
    display: inline-block;
    margin-right: 24px;
    color: #ffffff;
    text-decoration: none;
    transition: color var(--greenlab-hover-duration) ease, background-color var(--greenlab-hover-duration) ease, border-color var(--greenlab-hover-duration) ease;
}

.header-top__social {
    text-align: right;
}

.header-top__social a {
    margin-right: 0;
    margin-left: 8px;
}

.social-button {
    width: 28px;
    height: 28px;
    background: #6b4f32;
    text-align: center;
    transition: background-color var(--greenlab-hover-duration) ease, border-color var(--greenlab-hover-duration) ease, color var(--greenlab-hover-duration) ease;
}

.social-button .icon {
    margin-right: 0;
    vertical-align: -4px;
}

#header1 .icon {
    color: #ffffff;
}

#header1 a:hover {
    color: #dce9b8;
}

#logofull {
    padding-top: 42px;
    padding-bottom: 38px;
    text-align: center;
    background: #fbfaf2;
}

.logo {
    display: inline-block;
    color: #314139;
    text-align: left;
    text-decoration: none;
}

.logo__mark {
    display: inline-block;
    width: 62px;
    height: 62px;
    margin-right: 14px;
    color: #5f7f45;
    vertical-align: middle;
}

.logo__leaf {
    display: block;
    width: 34px;
    height: 34px;
    margin-top: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.logo > span:last-child {
    display: inline-block;
    vertical-align: middle;
}

.logo strong,
.logo small {
    display: block;
}

.logo strong {
    font-size: 38px;
    line-height: 1.05;
    font-weight: 700;
}

.logo small {
    color: #6b4f32;
    font-size: 15px;
}

#header2 {
    position: relative;
    z-index: 1000;
    background: #f4f0e3;
    border-top: 1px solid #d7cfb9;
    border-bottom: 1px solid #d7cfb9;
}

#logoAndMenuContainer {
    position: relative;
    z-index: 1000;
    background: #f4f0e3;
}

#mainmenuContainer,
.main-nav {
    text-align: center;
}

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

.main-nav li {
    display: inline-block;
}

.main-nav a {
    position: relative;
    display: block;
    padding: 18px 16px;
    color: #314139;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--greenlab-hover-duration) ease, background-color var(--greenlab-hover-duration) ease, border-color var(--greenlab-hover-duration) ease;
}

.main-nav .nav-icon {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 7px;
    vertical-align: -3px;
}

.main-nav a:hover {
    color: #ffffff;
    background: #5f7f45;
}

.main-nav a[aria-current="page"],
.main-nav .active a {
    color: #5f7f45;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* Hover ersetzt externe Iconfarbe. */
.main-nav a[aria-current="page"]:hover,
.main-nav .active a:hover {
    color: #ffffff;
    background: #5f7f45;
}

.main-nav a:hover .icon-external--default,
.main-nav .active a:hover .icon-external--default,
.main-nav a[aria-current="page"]:hover .icon-external--default {
    visibility: hidden;
}

.main-nav a:hover .icon-external--hover,
.main-nav .active a:hover .icon-external--hover,
.main-nav a[aria-current="page"]:hover .icon-external--hover {
    visibility: visible;
}

.site-footer {
    color: #ffffff;
    background: #4d3a25;
}

#footer {
    padding: 54px 0 38px;
}

.site-footer h2,
.site-footer h3,
.site-footer p,
.site-footer a {
    color: #ffffff;
}

.site-footer p {
    color: #eadfc7;
}

.footer-icon-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-icon-list li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 28px;
    color: #eadfc7;
}

.footer-icon-list .icon {
    position: absolute;
    top: 3px;
    left: 0;
    color: #ffffff;
}

.footer-text-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.footer-text-list li {
    margin-bottom: 12px;
    color: #eadfc7;
}

#copyright {
    padding: 10px 0;
    color: #ffffff;
    background: #3a2c1d;
    font-size: 13px;
}

#copyright p {
    margin-bottom: 0;
    color: #ffffff;
}

@media (max-width: 60rem) {
    .header-top__inner {
        display: block;
    }

    .header-top__contact a,
    .header-top__contact span {
        display: block;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 6px;
    }

    .header-top__social {
        text-align: left;
    }

    .header-top__social a {
        display: inline-block;
        margin-right: 8px;
        margin-left: 0;
    }

    .main-nav li {
        display: block;
        border-top: 1px solid #d7cfb9;
    }

    .main-nav a {
        padding: 14px 12px;
    }

    #copyright .nkFlexBox {
        display: block;
    }
}