/* ============================================================
   1. CUSTOM PROPERTIES
   ============================================================ */
:root {
    /* --- Farben: Basis --- */
    --color-white: #ffffff;
    --color-black: #333333;
    --color-base: #333333;
    --color-gray: #eaeaea;

    /* --- Farben: Grün (VERWALTUNG) --- */
    --color-01: #6EAB3E;
    /* Primär-Grün / Apfelgrün */
    --color-02: #94C356;
    /* Hellgrün / Lindgrün */
    --color-02-20: rgba(148, 195, 86, 0.2);
    --color-03: #107527;
    /* Mittelgrün / Grasgrün */
    --color-04: #04340C;
    /* Dunkelgrün / Tannengrün */

    /* --- Farben: Blau (POLITIK) --- */
    --color-05: #008ECF;
    /* Azurblau */
    --color-06: #005095;
    /* Blau */
    --color-07: #1E2864;
    /* Navy-Blau */
    --color-08: #001437;
    /* Nachtblau */

    /* --- Farben: Rot (AKTUELLES) --- */
    --color-09: #E94F35;
    /* Rot-Orange */
    --color-10: #CD1719;
    /* Rot */
    --color-11: #9E1510;
    /* Dunkelrot */
    --color-12: #6D1001;
    /* Bordeaux-Rot */

    /* --- Farben: Gelb/Ocker (UNSER KREIS / KARRIERE) --- */
    --color-13: #FFF265;
    /* Zitronengelb */
    --color-14: #FFDD00;
    /* Sonnengelb */
    --color-15: #F7A823;
    /* Orange */
    --color-16: #CB6C00;
    /* Ocker */

    /* --- Schriftgrößen --- */
    --size-text: 14px;
    --size-text-big: 18px;
    --size-navi: 14px;
    --size-navi-small: 14px;
    --size-subnavi: 14px;
    --size-h1: 50px;
    --size-h2: 40px;
    --size-h3: 18px;

    /* --- Abstände (Raster) --- */
    --raster-5: 5px;
    --raster-15: 15px;
    --raster-30: 30px;
    --raster-45: 45px;
    --raster-60: 60px;
    --raster-75: 75px;
    --raster-120: 120px;
}

/* ============================================================
   2. FONTS
   ============================================================ */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('../webfonts/lato-v23-latin-regular.woff2') format('woff2'),
        url('../webfonts/lato-v23-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local(''),
        url('../webfonts/lato-v23-latin-700.woff2') format('woff2'),
        url('../webfonts/lato-v23-latin-700.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: local(''),
        url('../webfonts/lato-v23-latin-900.woff2') format('woff2'),
        url('../webfonts/lato-v23-latin-900.woff') format('woff');
}

@font-face {
    font-family: 'K2D';
    font-style: normal;
    font-weight: 700;
    src: local(''),
        url('../webfonts/k2d-v9-latin-700.woff2') format('woff2'),
        url('../webfonts/k2d-v9-latin-700.woff') format('woff');
}

.font400 {
    font-family: 'Lato';
    font-weight: 400;
}

.font700 {
    font-family: 'Lato';
    font-weight: 700;
}

.font900 {
    font-family: 'Lato';
    font-weight: 900;
}

/* ============================================================
   3. UTILITIES / HELPERS
   ============================================================ */
.defaultShadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.defaultTextShadow {
    text-shadow: 1px 1px 2px #fff, 0 0 1em #fff, 0 0 0.2em #000;
}

.invisible {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.transition-all {
    transition: all .5s;
}

.imgWithBorder {
    border: 1px solid var(--color-black);
    padding: var(--raster-5);
}

.moreLink {
    transition: all .5s;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: var(--raster-15);
    color: var(--color-01);
    text-align: center;
    text-transform: uppercase;
}

.moreLink:hover {
    font-family: 'Lato';
    font-weight: 900;
    color: var(--color-01);
    text-decoration: none;
}

/* ============================================================
   4. BASE / ELEMENTE
   ============================================================ */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato';
    font-weight: 400;
}

a {
    color: var(--color-04);
    font-weight: bold;
    text-decoration: underline;
}

figcaption {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'K2D';
    font-weight: 700;
}

h2 {
    font-family: 'Lato';
    font-weight: 400;
    margin-bottom: var(--raster-60);
}

img {
    width: 100%;
    height: auto;
}

/* ============================================================
   5. CONTENT-ELEMENTE (Contao)
   ============================================================ */
.ce_hyperlink a,
.content-hyperlink a {
    font-family: 'Lato';
    font-weight: 700;
    transition: all .5s;
    background: var(--color-white);
    border: 1px solid var(--color-01);
    color: var(--color-01);
    padding: var(--raster-5) var(--raster-15);
    text-transform: uppercase;
}

.ce_hyperlink a:hover,
.content-hyperlink a:hover {
    background: var(--color-01);
    color: var(--color-white);
    text-decoration: none;
}

.ce_download,
.ce_downloads,
.content-download,
.content-downloads {
    padding-bottom: var(--raster-15);

    & a {
        transition: all .5s;
        background: var(--color-04);
        color: var(--color-white);
        display: block;
        line-height: var(--raster-45);
        padding: var(--raster-5) var(--raster-15);

        & i {
            margin-right: var(--raster-15);
        }

        &:hover {
            background: var(--color-02);
            text-decoration: none;
        }

        & .right-icon {
            position: absolute;
            right: var(--raster-15);
        }
    }
}

.modal-content {

    & h1,
    & h2,
    & h3,
    & h4,
    & h5 {
        font-family: 'K2D';
        font-weight: 700;
        margin: 0;
    }

    & .btn.btn-secondary {
        background: var(--color-base);
        font-size: var(--size-text);
        text-transform: uppercase;
    }
}

.page-content .ce_image img {
    border: 1px solid var(--color-black);
    padding: var(--raster-5);
}

/* ============================================================
   6. STARTSEITE
   ============================================================ */

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(0deg);
    }

    85% {
        transform: rotate(30deg);
    }

    95% {
        transform: rotate(-30deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

body.start {
    & div.headerStart {
        background-size: cover;
        box-sizing: border-box;
        height: 100%;
        margin: auto;
    }

    .headerStart-bg img {
        display: block;
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }

    .scrolldown {
        animation: wiggle 2s infinite;
    }

    & .scrolldown,
    & .copyright {
        font-family: 'Lato';
        font-weight: 900;
        position: absolute;
        bottom: var(--raster-60);
        left: 50%;
        width: var(--raster-45);
        /* background: var(--color-01); */
        color: var(--color-white);
        cursor: pointer;
        line-height: var(--raster-45);
        text-align: center;
    }

    & .copyright {
        font-weight: 400;
        background: rgba(255, 255, 255, 0.6);
        bottom: 0;
        left: 0;
        width: auto;
        padding: 0 var(--raster-15);
        color: var(--color-black);
    }

    & .page-content-start {
        margin-bottom: var(--raster-60);

        & h1 {
            margin-top: var(--raster-60);
        }
    }

    & .start-navigation {
        position: absolute;
        top: var(--raster-30);
        width: 100%;
        text-align: center;
        z-index: 20;

        & ul {
            list-style: none;
            margin: 0;
            padding: 0;

            & li {
                transition: all .5s;
                background: var(--color-white);
                display: inline-block;
                margin-right: var(--raster-5);

                & a {
                    display: block;
                    width: auto;
                    line-height: var(--raster-60);
                    padding: 0 var(--raster-30) 0 var(--raster-75);
                    color: var(--color-black);
                    text-transform: uppercase;
                    text-decoration: none;

                    &.rot {
                        background: url("../images/icon_kreis_heinsberg_aktuelles_grey.png") no-repeat var(--color-white);
                    }

                    &.gelb {
                        background: url("../images/icon_kreis_heinsberg_unserkreis_grey.png") no-repeat var(--color-white);
                    }

                    &.gruen {
                        background: url("../images/icon_kreis_heinsberg_verwaltung_grey.png") no-repeat var(--color-white);
                    }

                    &.blau {
                        background: url("../images/icon_kreis_heinsberg_politik_grey.png") no-repeat var(--color-white);
                    }

                    &.ocker {
                        background: url("../images/icon_kreis_heinsberg_karriere_grey.png") no-repeat var(--color-white);
                    }
                }

                &:hover {
                    background: var(--color-black);

                    & a {
                        color: var(--color-white);
                        text-decoration: none;

                        &.rot {
                            background: url("../images/icon_kreis_heinsberg_aktuelles_white.png") no-repeat var(--color-11);
                        }

                        &.gelb {
                            background: url("../images/icon_kreis_heinsberg_unserkreis_grey.png") no-repeat var(--color-14);
                            color: var(--color-black);
                        }

                        &.gruen {
                            background: url("../images/icon_kreis_heinsberg_verwaltung_white.png") no-repeat var(--color-01);
                        }

                        &.blau {
                            background: url("../images/icon_kreis_heinsberg_politik_white.png") no-repeat var(--color-06);
                        }

                        &.ocker {
                            background: url("../images/icon_kreis_heinsberg_karriere_white.png") no-repeat var(--color-16);
                        }
                    }
                }
            }
        }
    }

    & .start-logo {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30%;
        max-width: 380px;
        padding: var(--raster-45) var(--raster-45) var(--raster-45) 0;
        background: var(--color-white);
        z-index: 40;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 235px;
            height: 100%;
            background-color: #fff;
            background-image: linear-gradient(120deg, #fff, #fff);
            opacity: 1;
            transform: skew(-45deg) translateX(-50%);
            z-index: 10;
        }

        & img {
            position: relative;
            z-index: 40;
        }
    }

    .teaser-balken .headline {
        background: var(--color-01);
        color: var(--color-white);
        padding: var(--raster-30) 0;
        font-family: 'K2D';
        font-weight: 700;
        font-size: 30px;
    }

    & .page-footer-start {
        position: relative;
        width: 100%;
    }
}

/* ============================================================
   7. NAVIGATION
   ============================================================ */
.navigation-overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 70;
}

body {

    /* --- Standard-Header (Grün / Dunkelgrün) --- */
    & header {
        background: var(--color-04);
        position: fixed;
        top: 0;
        width: 100%;
        margin-bottom: var(--raster-45);

        & .mod_navigation ul li {

            & strong,
            & a {
                color: var(--color-white);
                text-decoration: none;

                &.active,
                &:hover,
                &.trail {
                    color: var(--color-white);
                }
            }

            & ul.level_2 {
                background: var(--color-04);

                & li a,
                & li strong {
                    color: var(--color-white);
                }
            }
        }
    }

    /* --- Kategorie: rot / gruen / blau / ocker (Standard rot) --- */
    &.rot header,
    &.gruen header,
    &.blau header,
    &.ocker header {
        background: var(--color-11);

        & .mod_navigation ul li {

            & strong,
            & a {
                color: var(--color-white);

                &.active,
                &:hover,
                &.trail {
                    color: var(--color-white);
                }
            }

            & ul.level_2 {
                background: var(--color-11);

                & li a,
                & li strong {
                    color: var(--color-white);
                }
            }
        }
    }

    /* --- Kategorie: gelb --- */
    &.gelb header {
        background: var(--color-14);

        & .mod_navigation ul li {

            & strong,
            & a {
                color: var(--color-black);

                &.active,
                &:hover,
                &.trail {
                    color: var(--color-black);

                    &::after {
                        border-bottom: solid 4px var(--color-black);
                    }
                }
            }

            & ul.level_2 {
                background: var(--color-14);

                & li a,
                & li strong {
                    color: var(--color-black);
                }
            }
        }

        & .sidenav-button a {
            color: var(--color-black);
        }
    }

    /* --- Kategorie: gruen (Header-Farbe überschreibt rot) --- */
    &.gruen header {
        background: var(--color-01);

        & .mod_navigation ul li ul.level_2 {
            background: var(--color-01);
        }
    }

    /* --- Kategorie: blau --- */
    &.blau header {
        background: var(--color-06);

        & .mod_navigation ul li ul.level_2 {
            background: var(--color-06);
        }
    }

    /* --- Kategorie: ocker --- */
    &.ocker header {
        background: var(--color-16);

        & .mod_navigation ul li ul.level_2 {
            background: var(--color-16);
        }
    }

    /* --- Header-Grundlayout --- */
    & header {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        position: relative;
        top: 0;
        width: 100%;
        padding: var(--raster-30) 0;
        z-index: 80;

        & .logo {
            margin-top: -30px;
            padding-left: 0;

            & a {
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                position: absolute;
                top: 0;
                /* left: 0; */
                display: block;
                padding: var(--raster-30);
                background: var(--color-white);
            }

            & img {
                position: relative;
                width: 200px;
                min-width: 200px;
                z-index: 100000;
            }
        }

        & .sidenav-button {
            margin-top: 40px;

            & a {
                color: var(--color-base);
                text-transform: uppercase;
            }

            & .menu-button {
                display: block;
                width: 30px;
                height: 4px;
                background-color: var(--color-base);
                border-radius: 2px;
                cursor: pointer;
                transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);

                &::before,
                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 30px;
                    height: 4px;
                    background-color: var(--color-base);
                    border-radius: 2px;
                    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
                }

                &::before {
                    margin-top: -8px;
                }

                &::after {
                    margin-top: 8px;
                }
            }

            & #menu-toggle:checked + .menu-button-container .menu-button::before {
                margin-top: 0;
                transform: rotate(405deg);
            }
        }

        & .mod_navigation ul {
            list-style: none;
            margin: 0;

            & li {
                transition: all .5s;
                display: inline-block;
                padding: var(--raster-15);
                text-transform: uppercase;

                &.trail,
                &.active,
                &:hover {
                    transition: all .5s;

                    &::after {
                        width: 100%;
                    }
                }

                & strong,
                & a {
                    padding-bottom: var(--raster-30);
                    font-size: var(--size-navi);

                    &::after {
                        content: '';
                        display: block;
                        position: relative;
                        bottom: -5px;
                        border-bottom: solid 4px var(--color-white);
                        transform: scaleX(0);
                        transform-origin: 100% 50%;
                        transition: transform 250ms ease-in-out;
                    }

                    &.active,
                    &:hover,
                    &.trail {
                        text-decoration: none;

                        &::after {
                            transform: scaleX(1);
                            transform-origin: 0 50%;
                        }
                    }

                    @media (max-width: 1200px) {
                        font-size: var(--size-navi-small);
                    }
                }

                /* --- Subnavigation (Desktop) --- */
                @media (min-width: 992px) {
                    & ul.level_2 {
                        display: none;
                        position: absolute;
                        top: var(--raster-60);
                        margin-left: -20px;
                        padding: 0 0 var(--raster-15) 0;
                        text-align: left;
                        z-index: 1000;

                        & li {
                            display: block;
                            list-style: none;
                            padding: 5px 0;
                            text-transform: none;

                            & a,
                            & strong {
                                display: block;
                                padding: 0 20px;
                                color: var(--color-black);
                                font-size: var(--size-subnavi);
                                letter-spacing: 1px;

                                &.active,
                                &:hover {
                                    color: var(--color-01);

                                    &::after {
                                        transform: scaleX(0);
                                    }
                                }
                            }
                        }
                    }

                    &:hover ul.level_2 {
                        display: block;
                    }
                }
            }
        }

        /* --- Mobile Navigation --- */
        @media (max-width: 992px) {
            height: 100px;

            & .navigation {
                transition: all .5s;
                position: fixed;
                top: 0;
                bottom: 0;
                left: -800px;
                width: 250px;
                background-color: var(--color-white);
                border-right: 1px solid var(--color-base);
                overflow-y: scroll;
                z-index: 200000;

                &::-webkit-scrollbar {
                    display: none;
                }

                &.show {
                    left: 0;
                }

                & nav.mod_navigation ul.level_1 {
                    padding-top: 40px;
                    text-align: left;

                    & li {
                        display: block;
                        width: 100%;
                        line-height: var(--raster-30);

                        & a,
                        & strong {
                            line-height: normal;
                            font-size: var(--size-navi);

                            &::after {
                                display: none;
                            }

                            &.active,
                            &:hover {
                                &::after {
                                    display: none;
                                    transform: scaleX(0);
                                    transform-origin: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ============================================================
   8. HEAD IMAGE
   ============================================================ */
.head-image {
    margin-top: 110px;
    min-height: var(--raster-60);

    & .containertext {
        position: absolute;
        bottom: 25%;
        width: 100%;
        text-align: center;

        & .teasertext1,
        & .teasertext2,
        & .teasertext3 {
            text-shadow: 1px 1px 2px #fff, 0 0 1em #fff, 0 0 0.2em #000;
            color: var(--color-white);
            font-size: var(--raster-75);
            line-height: normal;
        }

        & .teasertext2,
        & .teasertext3 {
            font-size: var(--raster-45);
        }
    }

    & .mod_article {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   9. BREADCRUMB
   ============================================================ */
.breadcrumb {
    background: none;
    border-bottom: 1px solid var(--color-black);
    border-radius: 0;
    margin-bottom: var(--raster-30);

    & .row {
        width: 100%;
    }

    & ul {
        list-style: none;
        margin: 0;
        padding: 0;

        & li {
            display: inline-block;
            margin-right: 10px;
            padding-right: var(--raster-15);
            border-right: 1px solid var(--color-black);

            &:last-child {
                border: none;
            }

            & a {
                color: var(--color-base);
            }
        }
    }
}

/* ============================================================
   10. CONTENT
   ============================================================ */
.link_button,
.link_button_left,
.mod_subscribe .widget-submit,
.mod_unsubscribe .widget-submit {
    display: flex;
    justify-content: center;
    margin-bottom: var(--raster-15);
    padding: 0;

    & a,
    & button {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        padding: var(--raster-15);
        background-color: var(--color-01);
        border-radius: 10px;
        color: var(--color-white) !important;
        font-size: 20px;
        text-align: center;
        text-decoration: none;

        &:hover {
            background-color: var(--color-04);
            border-color: var(--color-04);
            color: var(--color-white) !important;
        }

        @media (max-width: 992px) {
            width: 100%;
        }
    }
}

.link_button_left {
    justify-content: left;
}

.mod_subscribe .widget-submit,
.mod_unsubscribe .widget-submit,
.mod_subscribe .widget-captcha,
.mod_unsubscribe .widget-captcha {
    margin-bottom: var(--raster-15);
    padding: var(--raster-15);
}

.mod_subscribe .widget-text input,
.mod_unsubscribe .widget-text input {
    width: stretch;
}

.mod_subscribe .error,
.mod_unsubscribe .error {
    color: var(--color-11);
}

.mod_subscribe .confirm,
.mod_unsubscribe .confirm {
    color: var(--color-04);
    font-weight: 700;
    font-size: var(--size-text-big);
}


.box-icon {
    margin-bottom: var(--raster-45);

    & .inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: var(--raster-15);
        position: relative;
        background: var(--color-white);
        border: 1px solid var(--color-black);
        text-align: center;

        & h3 {
            font-family: 'Lato';
            font-weight: 900;
            font-size: var(--size-text-big);
        }

        & p {
            font-family: 'Lato';
            font-weight: 400;
            margin-bottom: var(--raster-15);
        }

        & .link_button {
            margin-top: auto;

            & a {
                height: 100%;
            }
        }

        & .more a {
            transition: all .5s;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding-bottom: var(--raster-15);
            color: var(--color-01);
            text-align: center;
            text-transform: uppercase;

            &:hover {
                font-family: 'Lato';
                font-weight: 900;
                color: var(--color-01);
                text-decoration: none;
            }
        }
    }
}

/* ============================================================
   11. NEWS
   ============================================================ */
.container-fluid.changing {
    background: var(--color-white);

    &:nth-child(odd) {
        background: var(--color-gray);
    }
}

.pagination {
    width: 100%;
    padding: var(--raster-15) 0;

    & ul {
        list-style: none;
        margin: 0 auto;
        padding: 0;

        & li {
            display: inline-block;
            margin-right: var(--raster-30);
            padding: 0 var(--raster-30) 0 0;

            & .fa-caret-left,
            & .fa-caret-right {
                position: relative;
                top: 2px;
                font-size: 18px;
            }

            & strong {
                padding: var(--raster-5);
                color: var(--color-black);
                border: var(--color-black) 2px solid;
            }

            & a {
                color: var(--color-black);

                &:hover {
                    color: var(--color-01);
                    text-decoration: none;
                }
            }
        }
    }
}

.layout_latest_start,
.layout_latest {
    margin-bottom: var(--raster-45);

    & .inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: var(--raster-15);
        position: relative;
        background: var(--color-white);
        border: 1px solid var(--color-black);
        text-align: center;
    }

    & h3 a {
        color: var(--color-black);
    }
}

.layout_latest {
    margin-bottom: 0;
    padding: var(--raster-60) 0;

    & .image_container {
        margin: 0;

        & img {
            border: 1px solid var(--color-black);
            padding: var(--raster-5);
        }
    }
}

.layout_full {
    margin-bottom: var(--raster-60);

    & img {
        border: 1px solid var(--color-black);
        padding: var(--raster-5);
    }

    & h2 {
        margin-bottom: var(--raster-15);
    }

    & .col-12 .col-12 {
        padding: 0;
    }
}

.back {
    display: none;
}

.back-link {
    transition: all .5s;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: var(--raster-15);
    padding-bottom: var(--raster-15);
    color: var(--color-01);
    text-align: left;
    text-transform: uppercase;

    &:hover {
        font-family: 'Lato';
        font-weight: 900;
        color: var(--color-01);
        text-decoration: none;
    }
}

/* ============================================================
   12. GALLERY
   ============================================================ */
.ce_gallery ul,
.content-gallery ul {
    list-style: none;
    margin: var(--raster-45) 0 0 0;
    padding: 0;

    & li {
        padding-bottom: var(--raster-15);
    }
}

/* ============================================================
   13. ACCORDION (Bootstrap Card)
   ============================================================ */
.card {
    background: none;
    border: none;
    border-radius: 0;

    & .card-header {
        background: none;
        border: 1px solid var(--color-01);

        & div[role="button"]::before {
            content: '\f0fe';
            position: absolute;
            left: 16px;
            font-family: 'Font Awesome 5 Pro';
            font-weight: 900;
        }

        & button {
            width: 100%;
            padding-left: var(--raster-30);
            background: none;
            color: var(--color-01);
            text-align: left;
            text-decoration: none;
            text-transform: uppercase;

            &.btn:focus {
                box-shadow: none;
            }

            &::before {
                content: '\f146';
                position: absolute;
                top: 20px;
                left: 16px;
                font-family: 'Font Awesome 5 Pro';
                font-weight: 900;
            }

            &.collapsed::before {
                content: '\f0fe';
            }
        }
    }
}

/* ============================================================
   14. ACCORDION (Twig / handorgel)
   ============================================================ */
.content-accordion {
    position: relative;

    &.datenschutzhinweise ul {
        margin: 0;
        padding: 0;

        & li {
            list-style: none;
            padding-bottom: var(--raster-15);
        }
    }

    & .handorgel__header {
        margin: var(--raster-15) 0;
        font-size: 18px;
    }

    & button {
        width: 100%;
        padding: var(--raster-30);
        background-color: var(--color-02-20);
        border: none;
        border-radius: 10px;
        text-align: left;
    }

    & .accordion_pfeil {
        display: inline-block;
        position: absolute;
        right: var(--raster-30);
        color: var(--color-01) !important;

        &:hover {
            border-color: var(--color-04);
            color: var(--color-white) !important;

            & i.fa-circle {
                color: var(--color-04);
            }
        }
    }

    & .handorgel__header--open {
        margin-bottom: 0;

        & .accordion_pfeil {
            transform: rotate(180deg);
        }
    }

    & .handorgel__content__inner {
        & .content-element-group {
            padding: 0;
        }

        & > * > .content-text {
            margin: var(--raster-15);
            border-radius: 10px;
        }
    }
}

/* ============================================================
   15. FORMULARE & SUCHE
   ============================================================ */
.mod_search,
.ce_form {

    & input.text,
    & textarea,
    & select {
        min-width: 200px;
        height: var(--raster-60);
        margin-bottom: var(--raster-30);
        padding-left: var(--raster-15);
        background: var(--color-white);
        border: 1px solid var(--color-base);
        color: var(--color-black);
        line-height: var(--raster-60);
    }

    & select {
        height: 30px;
    }

    & input.text,
    & textarea {
        width: 100%;
    }

    & textarea {
        height: auto;
        line-height: 1.5;
    }

    & button {
        border: 1px solid var(--color-base);
    }
}

/* ============================================================
   16. BACKGROUNDS / ARTIKEL
   ============================================================ */
.page-content .mod_article {
    padding: var(--raster-60) 0;

    & .content-image div.parallax-picture {
        display: block;
        min-height: 400px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    &.article-no-spacing {
        padding: 0;
    }

    &:first-child {
        padding-top: var(--raster-45);
    }

    &:last-child {
        padding-bottom: var(--raster-45);
    }

    &.bg01 {
        background: var(--color-gray);

        & .box-icon .inner {
            background: var(--color-white);
        }
    }
}

/* ============================================================
   17. FOOTER
   ============================================================ */
footer {
    position: relative;
    margin-top: 0;
    padding: var(--raster-5) 0 0 0;
    background: var(--color-black);
    color: var(--color-white);

    & h3,
    & h4,
    & h5 {
        color: var(--color-01);
        text-align: center;
    }

    & h3 {
        font-size: var(--size-h1);
    }

    & h4 {
        font-family: 'Lato';
        font-weight: 400;
        color: var(--color-white);
    }

    & h5 {
        margin-bottom: var(--raster-30);
        text-align: left;
    }

    & .footer-title {
        color: var(--color-01);
        font-family: 'K2D';
        font-weight: 700;
        font-size: var(--size-h1);
        text-align: center;
    }

    & .footer-subtitle {
        color: var(--color-white);
        font-family: 'K2D';
        font-weight: 700;
        font-size: 1.5rem;
        text-align: center;
    }

    & .footer-subsubtitle {
        margin-bottom: var(--raster-30);
        color: var(--color-01);
        font-family: 'K2D';
        font-weight: 700;
        font-size: 20px;
        text-align: left;
    }

    & a {
        transition: all .5s;
        color: var(--color-white);

        &:hover {
            color: var(--color-01);
            text-decoration: none;
        }
    }

    &.page-footer-copyright {
        padding: 0;
        background: var(--color-base);
        color: var(--color-white);

        & .container {
            padding: var(--raster-5) 0;
            border-top: 1px solid var(--color-white);
        }

        & .row {
            padding: var(--raster-5) 0;
        }

        & a {
            color: var(--color-white);
        }
    }

    & .row {
        padding: var(--raster-30) 0;
        border-bottom: 1px solid var(--color-white);

        &:last-child {
            padding-bottom: var(--raster-15);
            border-bottom: none;
        }
    }

    /* Hyperlink "Fernwartung" */
    & .ce_hyperlink,
    & .content-hyperlink {
        background: none;

        & a {
            background: none;
            border: 2px solid var(--color-01);
            color: var(--color-white);

            &:hover {
                background: none;
                border: 2px solid var(--color-02);
                color: var(--color-02);
            }
        }
    }

    & i {
        min-width: var(--raster-30);
    }

    & .social-icons {
        margin-bottom: var(--raster-30);

        & i {
            margin-bottom: var(--raster-30);
            margin-right: var(--raster-15);
            font-size: var(--raster-30);

            &.fa-facebook-f {
                margin-right: var(--raster-5);
            }
        }

        & .google {
            display: block;

            & i {
                margin: var(--raster-5) var(--raster-5) 0 0;
            }
        }
    }

    & .small50 img {
        width: 50%;
    }

    & ul {
        list-style: none;
        margin: 0;
        padding: 0;

        & li {
            display: inline-block;
            padding-right: var(--raster-15);
            text-transform: uppercase;
        }
    }
}

/* ============================================================
   18. IMPRESSUM
   ============================================================ */
.impressum h2 {
    margin: var(--raster-15) 0;
}

/* ============================================================
   19. HISTORY
   ============================================================ */
.video_container {
    border: 5px solid var(--color-01);
}

.position-fixed {
    position: fixed;
    top: 100px;
    right: 0;
    padding: var(--raster-15);
    background: var(--color-01);
    z-index: 20;

    & ul {
        list-style: none;
        margin: 0;
        padding: 0;

        & li {
            border-bottom: 1px solid var(--color-white);

            & a {
                color: var(--color-white);

                &.active {
                    color: var(--color-black);
                }

                &:hover {
                    text-decoration: none;
                }
            }
        }
    }
}

.h4space {
    display: block;
    height: var(--raster-120);
}

h4.bg-white {
    margin: var(--raster-60) 0 var(--raster-30) 0;
    padding: var(--raster-5) 0;
    background: var(--color-white);
    color: var(--color-01);
    font-size: var(--size-h1);
}

.history {
    background: url('/files/layout/images/history.png') center top repeat-y;

    & .ce_gallery,
    & .content-gallery {
        margin-bottom: var(--raster-30);
    }

    & h2,
    & h3 {
        text-align: center;
    }

    & h5 {
        margin-top: 20px;
    }

    & .bg-history-empty {
        padding-bottom: var(--raster-45);

        & img {
            margin-top: 35px;
        }
    }

    & .imagearea {
        margin-top: 35px;
    }

    & .history-item {
        padding-bottom: var(--raster-45);

        & img {
            max-width: 100%;
        }

        &.item-left {
            text-align: right;

            @media (max-width: 768px) {
                &.col-12 .information {
                    width: 70% !important;
                    text-align: left;
                }
            }
        }

        &.item-right {
            @media (max-width: 768px) {
                &.col-12 .information {
                    width: 70% !important;
                    text-align: left;
                }
            }
        }
    }

    & .bg-history-left {
        background: url('/files/layout/images/history-left.png') center top no-repeat;
    }

    & .bg-history-right {
        background: url('/files/layout/images/history-right.png') center top no-repeat;
    }

    @media (max-width: 992px) {
        background: none;
    }
}

h3.headline-centered {
    text-align: center;
}

/* ============================================================
   20. COOKIE BAR
   ============================================================ */
.contao-cookiebar {
    z-index: 20000;

    & p {
        color: var(--color-black) !important;
        line-height: unset;
    }

    & .cc-inner {
        width: 50%;
        color: var(--color-black) !important;

        @media (max-width: 768px) {
            width: 70%;
        }

        & .cc-info {

            & p,
            & a {
                color: var(--color-black) !important;
            }
        }

        & .cc-detail-btn {
            color: var(--color-black) !important;
        }

        & .cc-btn {
            @media (max-width: 768px) {
                padding: 5px;
            }

            &.success {
                background: var(--color-base);
                border: none;
            }
        }
    }
}

/* ============================================================
   21. RESPONSIVE (<= 992px)
   ============================================================ */
@media (max-width: 992px) {
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* --- Navigation --- */
    .navigation-overlay {
        display: none;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        padding-top: 0;
        background: rgba(255, 255, 255, 0.7);
        z-index: 2000;
    }

    header {
        & .navigation {
            @media (min-width: 500px) {
                width: 450px;
            }

            & ul {
                padding: 0;

                & li {
                    padding: 5px;

                    & a,
                    & strong {
                        color: #000000 !important;
                        font-size: 18px !important;
                    }

                    & ul {
                        background: #dadada !important;

                        & li a,
                        & li strong {
                            font-size: 14px !important;
                        }
                    }
                }
            }
        }

        & .sidenav-button {
            margin-top: 0;

            & a {
                color: #fff;
                font-size: 45px;
            }
        }
    }

    /* --- Head-Image --- */
    .head-image {
        margin-top: 100px;

        &.container-fluid {
            padding: 0;
        }
    }

    /* --- Footer --- */
    .page-footer-start,
    .page-footer {
        & .social-icons {
            margin-bottom: 0;
        }

        & .ce_row .ce_column {
            margin-bottom: 30px;

            &:last-child {
                margin-bottom: 0;
            }

            @media (max-width: 768px) {
                margin-top: 15px;
                margin-bottom: 15px;
            }
        }

        & .ce_hyperlink {
            margin-bottom: 15px;

            &.suchen,
            &.service {
                margin-top: 10px;
            }
        }
    }

    /* --- Start --- */
    body.start {
        & .start-navigation {
            right: 0;
            width: 60%;

            & ul li {
                display: block;
                margin-bottom: 15px;
            }
        }

        & .start-logo {
            width: 50%;
        }

        & .teaser-service-portal .ce_hyperlink a {
            font-size: 30px;
        }
    }
}