/*
Theme Name: FGR Basic Theme
Theme URI: http://fgrepublik.com/
Description: Das FGR Basic-Theme wurde eigens für FGR Kunden entwickelt. Es bedarf keinerlei zusätzliche Lizenz, jedoch darf die Gestaltung die durch die FGR vorgegeben wurde nicht verändert werden - es erlischt umgehend das Nutzungsrecht. Inhaltliche Änderungen dürfen selbstverständlich getätigt werden. Im Zweifelsfall steht die <a href="http://fgrepublik.com/">Freie Gestalterische Republik</a> jederzeit bereit, um Fragen zu beantworten.
Author: der Freien Gestalterischen Republik
Author URI: http://fgrepublik.com/
Version: 1.3.4
License: Keine Nutzung ohne vorherige Absprache erlaubt.
License URI: license.txt
Tags: FGR, basic, Widgetfähig, Menü, Responsive
*/

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

/* ###############################################################
##################################################################

CSS Struktur in der style.css
1.1 Eingebundene WebFonts
1.2 Global: Basis CSS
1.3 Contentelemente h1/h2/h3, p, a, Buttons, Textarea, ul, li usw.
1.4 Header Definition inkl. Navigation
1.5 Sektionen mit Contentelementen 
1.6 Labels & Tabellen 
1.7 Globale Footerangaben, Footer Navigation 
1.8 Plugins - Contact Form 7 & Datenschutz Banner

##################################################################
############################################################### /*

/* 1.1 Eingebundene WebFonts 
##################################################### 


    Adobe Suite im Header

/* 1.2 Global: Basic Vars
##################################################### */

body {
    /*colors*/
    --primaryColor: #5c1bdb;
    --secondaryColor: #35E6E3;
    --tertiaryColor: #ffff47;
    --lightColor: #fff;
    --middleColor: #efefef;
    --darkColor: #000;
    /*Font-Sizes*/
    --primaryHead: 6.25rem !important;
    --secondaryHead: 4.125rem !important;
    --tertiaryHead: 2rem !important;
    --quartenaryHead: 1.625rem !important;
    --quinaryHead: 1rem !important;
    --senaryHead: 1.325rem !important;
    --paragraphs: 1.25rem !important;
    --ctaPrimaryFS: 1.125rem !important;
    --ctaSecondaryFS: 1.25rem !important;
    --listFS: 0.75rem !important;
    --smallFS: 0.75rem !important;
    --normalFS: 1rem !important;
    /*Measure-Units*/
    --noMargin: 0px;
    --innerMargin: 30px;
    --outerMargin: 60px;
    --noPadding: 0px;
    --home-hero-padding: 100px;
    --innerPadding: 0 60px;
    --innerPadding_small: 60px;
    --buttonPadding: 15px 35px;
    --sectionPadding: 90px;
    --sectionPadding_small: 60px;
    --sectionPadding_ultrasmall: 30px;
    --marginParagraphs: 30px 0;
    /*Fade Transitions*/
    --colortransition: background-color 1.5s, color 1.5s, filter 1.5s, border-color 1.5s !important;
}

@media screen and (max-width: 1399px) {
    body {
        --innerPadding: 30px 60px;
    }
}

@media screen and (max-width: 1199px) {
    body {
        /*Font-Sizes*/
        --primaryHead: 4.125rem !important;
        --secondaryHead: 3rem !important;
        --tertiaryHead: 1.85rem !important;
        --quartenaryHead: 1.5rem !important;
        --senaryHead: 1.25rem !important;
        --paragraphs: 1rem !important;
        --ctaPrimaryFS: 1rem !important;
        --ctaSecondaryFS: 1.125rem !important;
        --listFS: 0.625rem !important;
        --smallFS: 0.625rem !important;
    }
}

@media screen and (max-width: 767px) {
    body {
        /*Font-Sizes*/
        --primaryHead: 3.125rem !important;
        --secondaryHead: 1.75rem !important;
        --tertiaryHead: 1.325rem !important;
        --quartenaryHead: 1.125rem !important;
        --senaryHead: 1.0625rem !important;
        --paragraphs: 0.875rem !important;
        --ctaPrimaryFS: 0.875rem !important;
        --ctaSecondaryFS: 0.875rem !important;
        --listFS: 0.5rem !important;
        --smallFS: 0.5rem !important;
        --normalFS: 0.75rem !important;
        /*Measure-Units*/
        --sectionPadding: 60px;
        --sectionPadding_small: 30px;
        --sectionPadding_ultrasmall: 15px;
        --buttonPadding: 12.5px 20px;
        --marginParagraphs: 15px 0;
    }
}

/* 1.3 Global: Basic CSS
##################################################### */

html {
    padding: env(safe-area-inset);
}

html, body {
    margin: var(--noMargin);
    padding: var(--noPadding);
    font-size: 100%;
}

body, body.page-anfrage-bestaetigt {
    background-color: var(--primaryColor) !important;
    transition: var(--colortransition);
}

body.darkBG, body.lightBG {
    transition: var(--colortransition);
}

body.blog {
    background-color: var(--lightColor) !important;
    transition: var(--colortransition);
}

body.blog * {
    color: var(--darkColor) !important;
    transition: var(--colortransition);
}

body.no-scroll {
    overflow: hidden;
}

/*Basic-Fonts*/

h1 {
    font: normal 800 var(--primaryHead) aktiv-grotesk, sans-serif !important;
    line-height: 100% !important;
    color: var(--secondaryColor) !important;
}

h2, .single-post h1 {
    font: normal 800 var(--secondaryHead) aktiv-grotesk, sans-serif !important;
    transition: 1.5s all;
    line-height: 100% !important;
    margin-bottom: var(--innerMargin) !important;
    color: var(--lightColor) !important;
}

.single-post h1 {
    color: var(--darkColor) !important;
}

.post-wrapper h1 span.marker, h2 span.marker {
    display: table;
    font: normal 600 var(--normalFS) aktiv-grotesk, sans-serif !important;
    background-color: var(--secondaryColor) !important;
    padding: 5px 10px;
    color: var(--lightColor) !important;
    margin-bottom: 15px;
    line-height: initial;
}

* .marker a, body.lightBG #content-wrapper .marker a {
    color: var(--lightColor) !important;
}

body #content-wrapper p a, .error-page p a {
    /*border-bottom: 3px solid var(--darkColor);*/
    transition: 0.5s all !important;
    padding: 4px;
    overflow: hidden;
    position: relative;
    display: inline-flex;
}

body #content-wrapper p a:hover, .error-page p a:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

#content-wrapper p a:after, .error-page p a:after {
    position: absolute;
    display: block;
    bottom: -6px;
    left: -4px;
    font-weight: 300;
    letter-spacing: 2px;
    content: ".........................................................................................................................................................................................................................................................................";
}

h3, .single-post #content-wrapper h2 {
    font: normal 700 var(--tertiaryHead) aktiv-grotesk, sans-serif !important;
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

.single-post #content-wrapper h2 {
    font: normal 700 var(--tertiaryHead) aktiv-grotesk, sans-serif !important;
    color: var(--darkColor) !important;
    transition: var(--colortransition);
}

h4 {
    font: normal 700 var(--quartenaryHead) aktiv-grotesk, sans-serif !important;
    transition: var(--colortransition);
}

.privacy-policy h4 {
    font: normal 700 var(--quartenaryHead) aktiv-grotesk, sans-serif !important;
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

h5 {
    font: normal 400 var(--quinaryHead) aktiv-grotesk, sans-serif !important;
    transition: var(--colortransition);
}

p {
    font: normal 300 var(--paragraphs) aktiv-grotesk, sans-serif !important;
    line-height: 190% !important;
    margin: var(--marginParagraphs) !important;
    transition: var(--colortransition);
    color: var(--lightColor) !important;
}

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

/*Globale Elemente*/

ul {
    padding-left: 0px;
    list-style-type: none;
}

ul.two-col li {
    margin-left: 20px;
    text-indent: -20px;
}

a, a:hover {
    text-decoration: none !important;
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

strong {
    font-weight: 600 !important;
    transition: var(--colortransition);
    color: var(--lightColor) !important;
}

/*Globale Klassen*/

.color-light {
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

.bg-tertiary {
    background-color: var(--tertiaryColor) !important;
    transition: var(--colortransition);
}

.color-tertiary {
    color: var(--secondaryColor) !important;
    transition: var(--colortransition);
}

.no-padding {
    padding: var(--noPadding) !important;
}

@media screen and (max-width: 767px) {
    .mobile-no-padding {
        padding: var(--noPadding) !important;
    }
}

.ainner-padding {
    padding: var(--innerPadding) !important;
}

.lightBG {
    background-color: var(--lightColor) !important;
    transition: var(--colortransition);
}

.lightBG h2, .lightBG h3, .lightBG h4, .lightBG p, .lightBG strong, .lightBG #content-wrapper a {
    color: var(--darkColor) !important;
    transition: var(--colortransition);
}

.lightBG h1 span {
    color: var(--primaryColor) !important;
}

.lightBG .phone_link:before, .lightBG .mail_link:before, .lightBG .fax_link:before, .lightBG .key_link:before {
    filter: invert(0) !important;
    transition: var(--colortransition);
}

.darkBG {
    background-color: var(--darkColor) !important;
    transition: var(--colortransition);
}

.darkBG h2, .darkBG h3, .darkBG p, .darkBG strong, .darkBG a, .darkBG #contact a, .darkBG #contact p, .darkBG #content-wrapper a {
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

.darkBG.post-type-archive-projekte #contact a.active, .darkBG.single-projekte #contact a.active {
    color: var(--tertiaryColor) !important;
}

.middleBG {
    background-color: var(--middleColor) !important;
}

.two-col {
    column-count: 2;
    column-gap: 20px;
    max-width: 767px;
}

.two-col li a {
    break-inside: avoid-column;
    -webkit-column-break-after: avoid-column;
}

.text-center {
    text-align: center;
}

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

.text-center {
    text-align: right;
}

ul.link-list {
    margin-bottom: 30px;
}

.page-leistungen ul.link-list {
    margin-bottom: 60px;
}

@media screen and (max-width:767px) {
    .page-leistungen footer .container, .page-agentur footer .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

.invisible-anchor {
    position: absolute;
    left: 0;
    top: -100px;
    visibility: hidden;
}

ul.link-list li {
    margin-bottom: 15px;
}

ul.link-list li:last-of-type {
    margin-bottom: 0px;
}

.sectionPadding_small {
    padding: var(--sectionPadding_small) 0 !important;
}

.sectionPadding_ultrasmall {
    padding: var(--sectionPadding_ultrasmall) 0 !important;
}

.sectionPadding {
    padding: var(--sectionPadding) 0 var(--sectionPadding) 0 !important;
}

.cta-blog-window {
    width: 100%;
    background-color: var(--primaryColor) !important;
    padding: 120px 40px 40px 40px !important;
    color: var(--tertiaryColor) !important;
    font-weight: bold;
}

.cta-blog-window a {
    font-weight: bold !important;
    font-size: 380% !important;
    line-height: 120% !important;
    color: white !important;
}

.cta-blog-window::after {
    content: " " !important;
}


.cta-primary {
    border-right: 3px solid var(--primaryColor);
    border-top: 3px solid var(--primaryColor);
    color: var(--primaryColor) !important;
    font: 800 normal var(--ctaPrimaryFS) aktiv-grotesk, sans-serif !important;
    font-style: normal;
    display: table;
    margin-top: var(--outerMargin);
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    transition: border-color 0.125s linear;
}

.cta-primary span {
    color: var(--primaryColor) !important;
}

.cta-primary:before {
    content: "";
    display: block;
    height: 0px;
    background: var(--primaryColor);
    width: 3px;
    transition: height 0.125s linear;
    position: absolute;
    left: 0;
    top: 0;
}

.cta-primary:hover:before {
    height: 100%;
    transition: height 0.125s linear;
}

.cta-primary:after {
    content: "";
    display: block;
    height: 3px;
    background: var(--primaryColor);
    width: 0;
    transition: width 0.125s linear;
    position: absolute;
    right: -3px;
    bottom: 0;
}

.cta-primary:hover:after {
    width: 100%;
    transition: width 0.125s linear;
}

.cta-primary:hover {
    border-color: transparent !important;
    transition: border-color 0.25s linear !important;
}

.cta-primary:hover span {
    color: var(--primaryColor) !important
}

.cta-primary:active {
    background: var(--primaryColor) !important;
}

.cta-primary:active span {
    color: var(--lightColor) !important;
}

.cta-primary span {
    margin: 15px 35px !important;
    display: inline-block !important;
}

.cta-primary-reverse {
    border-right-color: var(--lightColor) !important;
    border-top-color: var(--lightColor) !important;
    color: var(--lightColor) !important;
}

.cta-primary-reverse span, .cta-primary-reverse:hover span {
    color: var(--lightColor) !important;
}

.cta-primary-reverse:before, .cta-primary-reverse:after {
    background-color: var(--lightColor) !important;
}

.cta-primary-reverse:active {
    background: var(--lightColor) !important;
}

.cta-primary-reverse:active span {
    color: var(--darkColor) !important;
}

.cta-secondary {
    color: var(--darkColor) !important;
    font: 800 normal var(--ctaSecondaryFS) aktiv-grotesk, sans-serif !important;
    font-style: normal;
    position: relative;
    z-index: 11 !important;
    transition: all 0.15s ease;
    padding: 2px 5px 2px 5px;
    transition: 0s all !important;
}

.lightBG #content-wrapper .cta-secondary:hover {
    box-shadow: 5px 5px #333333;
    transform: translateY(-5px) translateX(-5px);
    background-color: var(--primaryColor) !important;
    color: var(--lightColor) !important;
}

.cta-secondary:before {
    content: "■ ";
}

.cta-tabs {
    padding: 5px 10px;
    border-right: 3px solid var(--darkColor);
    border-top: 3px solid var(--darkColor);
    color: var(--darkColor) !important;
    font: 800 normal var(--ctaPrimaryFS) aktiv-grotesk, sans-serif !important;
    font-style: normal;
    display: table;
    text-align: center;
    transition: var(--colortransition);
    position: relative;
   
}

.darkBG .cta-tabs {
    color: var(--lightColor) !important;
    border-right: 3px solid var(--lightColor);
    border-top: 3px solid var(--lightColor);
    
}

.cta-tabs.active, .lightBG .cta-tabs.active {
    border-right: 3px solid var(--primaryColor);
    border-top: 3px solid var(--primaryColor);
    /*background-color: var(--secondaryColor);*/
    color: var(--primaryColor) !important;
    transition: var(--colortransition);
}

body.darkBG #contact .cta-tabs.active, #contact.darkBG .cta-tabs.active {
    color: var(--tertiaryColor) !important;
    border-right: 3px solid var(--tertiaryColor);
    border-top: 3px solid var(--tertiaryColor);
    /*background-color: var(--secondaryColor);*/
    transition: var(--colortransition);
}

.cta-contact, body.darkBG .cta-contact {
    background-color: var(--tertiaryColor);
    color: var(--darkColor) !important;
    padding: 7.5px 10px !important;
    position: relative;
    float: right;
    margin-top: 35px;
    text-transform: uppercase;
    z-index: 1111;
    font: normal 800 var(--listFS) aktiv-grotesk, sans-serif !important;
    pointer-events: initial;
    cursor: pointer;
}

.cta-contact:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 12.5px solid var(--tertiaryColor);
    border-right: 12.5px solid transparent;
}

.cta-contact:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    color: var(--darkColor) !important;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@media screen and (max-width: 767px) {
    .two-col {
        columns: 1;
    }
    .cta-tabs {
        padding: 5px 8px;
    }
}

#faker {
    background-color: transparent;
    height: 100px;
    position: fixed;
    z-index: 1111;
    pointer-events: none;
    top: 0px;
}

/*Overrides*/

.sticky-top {
    top: 100px !important
}

.home .row {
    margin: 0px !important
}

@media screen and (min-width: 1400px) {
    .container {
        max-width: 2200px !important;
        padding-left: 75px !important;
        padding-right: 75px !important;
    }
}

@media screen and (max-width: 1399px) {
    .container {
        max-width: initial !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
}

@media screen and (max-width: 1199px) {
    .container {
        max-width: initial !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

@media screen and (max-width: 991px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media screen and (max-width: 576px) {
    .container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

/*Tabs*/

.nav-tabs {
    border-width: 0px !important;
}

.nav-tabs li {
    margin-right: 7px;
}

body .nav-tabs a {
    /*font: normal 300 var(--tertiaryhead) aktiv-grotesk, sans-serif !important;*/
    font: normal 600 var(--normalFS) aktiv-grotesk, sans-serif !important;
     text-decoration: none !important;
}

@media screen and (max-width: 767px) {
    .tab-container {
        margin-top: var(--outerMargin);
    }
}

/*PAges*/

/*Sektionen*/

.repeater-item {
    border-bottom: 3px solid var(--darkColor);
    position: relative;
}

.repeater-item:first-of-type {
    border-top: 3px solid var(--darkColor);
}

.repeater-item p {
    margin-top: 10px !important;
    margin-bottom: 0px !important;
}

.number {
    height: 100px;
    padding: 0 15px;
    width: 100px;
    border-radius: 50%;
    margin-right: 15px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, var(--primaryColor) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.75s;
    font: normal 800 var(--secondaryHead) aktiv-grotesk, sans-serif !important;
    color: var(--lightColor);
    display: inline;
}

.number:hover {
    background-position: left bottom;
}

#partner img {
    padding: 0px 30px 0 30px !important;
    transition: 1.5s all;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-height: 75px;
    min-height: 75px;
    object-fit: contain;
}

#partner small {
    margin-top: -15px;
    display: block;
}

#partner .partner-item {
    width: 16.66667% !important;
    float: left;
    margin-top: 30px;
    text-align: center;
}

#partner {
    padding-bottom: 0px !important;
}

.darkBG #partner img {
    filter: invert(1);
}

@media screen and (max-width:1199px) {
    #partner img {
        padding: 0px 30px 0 30px !important;
    }
}

@media screen and (max-width:991px) {
    #partner .partner-item {
        width: 33% !important;
    }
    #partner .partner-item:nth-of-type(1), #partner .partner-item:nth-of-type(2), #partner .partner-item:nth-of-type(3) {
        margin-bottom: 45px;
    }
}

@media screen and (max-width:767px) {
    #partner .partner-item {
        width: 50% !important;
    }
    #partner .partner-item:nth-of-type(1), #partner .partner-item:nth-of-type(2), #partner .partner-item:nth-of-type(3), #partner .partner-item:nth-of-type(4) {
        margin-bottom: 45px;
    }
}

/*Home Hero*/

#home-hero {
    min-height: calc(100vh - 0px);
    padding: var(--home-hero-padding) 0 0 0!important;
    display: flex !important;
}

#home-hero .row .home-hero-inner-wrap {
    display: flex !important;
    flex-wrap: wrap;
}

#home-hero .inner-padding:not(.sm-bar) {
    flex: 0 0 100%;
    max-width: 100%;
    align-self: flex-end;
}

#home-hero h1 {
    color: var(--secondaryColor) !important;
    margin-top: var(--outerMargin);
}

#home-hero .row {
    position: relative;
}

#home-hero-slide {
    width: calc(50% - 50px);
    padding-bottom: calc(50% - 50px);
    height: 0px;
    position: absolute;
    transform: translateY(calc(-50% - 50px));
    top: calc(50% + 0px);
    right: 15px;
}

#home-hero h1 span {
    color: var(--lightColor) !important;
}

#home-hero .sm-bar {
    align-self: flex-end;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 40px;
    margin-top: 40px;
}

/*Home about*/

#home-about {
    position: relative;
    background: url("_img/fgr-team.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 66vh;
    display: table;
}

#home-about .container {
    display: table-cell;
    vertical-align: middle;
}

#home-about .outerMargin {
    margin: var(--outerMargin);
}

/*video {
    object-fit: cover !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    filter: grayscale(100%);
    opacity: 0.15;
}*/

/*Home Projekte*/

#projekte {
    padding: 0px !important;
}

#projekte .container {
    padding-right: 0px !important;
}

#projekte .container .sectionPadding {
    padding-left: 15px !important;
    padding-right: 30px !important;
}

@media Screen and (max-width:767px) {
    #projekte .container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    /* #projekte .container .sectionPadding {
        padding-left: 35px !important;
    }*/
    #projekte .container .col-12:not(.sectionPadding) {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    #projekte .container .sectionPadding {
        padding-right: 30px !important;
    }
}

.home-projekte img:hover, a .post:hover img, a.postfeed-thumb:hover img, a.postfeed-thumb.hover img {
    box-shadow: 20px 20px #333333;
    transform: translateY(-20px) translateX(-20px);
}

.home-projekte:after {
    background-color: #333333;
    content: "";
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 100%;
}

a .post img, a.postfeed-thumb img {
    transition: all 0.15s ease;
}

.home-projekte img {
    transition: all 0.15s ease;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

.home-projekte {
    position: relative;
    height: 0px;
    padding-bottom: 100%;
    width: 100%;
    display: flex;
}

.home-projekte h2 {
    transition: all 0.15s ease;
    display: none;
    position: absolute;
    z-index: 11;
}

.home-projekte:hover h2 {
    display: inline;
}

@media Screen and (max-width:767px) and (min-width:320px) {
    .home-projekte {
        width: 50%;
        padding-bottom: 50%;
        float: left;
        display: block;
    }
    .home-projekte img:hover {
        box-shadow: 0px 0px;
        transform: translateY(0px) translateX(0px);
    }
    /*#projekte .no-padding a:first-of-type h2 {
        display: inline;
    }*/
    #projekte .no-padding a:last-of-type h2 {
        display: none !important;
    }
    .home-projekte:hover h2 {
        display: none;
    }
}

/*Home intr0*/

#clients_logobar {
    margin-bottom: 100px !important;
}

#clients img {
    padding: 0px 40px 0 40px !important;
    transition: var(--colortransition);
    position: relative;
    top: 50%;
    max-height: 70px;
    min-height: 70px;
    object-fit: contain;
    max-width: 320px;
}

#clients .randomitem {
    width: 100% !important;
    float: left;
}

#clients {
    padding-bottom: 0px !important;
}

#clients .row {
    /*min-height: 250px;*/
    min-height: 150px;
}

.darkBG #clients img {
    filter: invert(1);
    transition: var(--colortransition);
}

.rotator-list {
    width: 20%;
    position: relative;
    margin-top: 30px;
}

.rotator-image {
    position: absolute;
    top: 0;
    width: 100%;
    display: none;
}

.rotator-list .rotator-image:first-of-type {
    display: block;
}

.rotator-list .rotator-image:not(.active) {
    display: none !important;
}

.rotator-list .rotator-image.active {
    display: block !important;
}

@media screen and (max-width:1199px) {
    #clients img {
        padding: 0px 20px 0 20px !important;
    }
    #clients .row {
        min-height: 100px;
    }
}

@media screen and (max-width:767px) {
    #clients .rotator-list {
        width: 50% !important;
        margin-top: 20px;
    }
    #clients .rotator-list:nth-last-of-type(5) {
        display: none !important;
    }
    #clients_logobar {
        margin-bottom: 50px !important;
    }
    #clients .row {
        /*min-height: 250px;*/
        min-height: 185px;
        margin-top: -75px;
    }
}

/*Home contact*/

.home #contact, .page-leistungen #contact, .page-agentur #contact {
    transition: var(--colortransition);
    background-color: var(--lightColor);
}

#contact.darkBG {
    position: relative;
}

#contact.darkBG * {
    color: var(--lightColor);
    transition: var(--colortransition);
}

#contact p a {
    display: inline-block;
    color: var(--darkColor) !important;
    transition: var(--colortransition);
      text-decoration: none !important;
}

#contact .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#contact.darkBG p a {
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

#contact.darkBG p a:before, .darkBG #contact p a:before {
    filter: invert(1) !important;
    transition: var(--colortransition);
}

#contact p a:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

@media screen and (min-width:768px) {
    #contact p {
        margin-top: 0px !important;
    }
}

#contact p {
    transition: var(--colortransition);
}

#contact p strong {
    margin-bottom: 15px;
    display: block;
    transition: var(--colortransition);
}

#contact h2 {
    margin-bottom: var(--outerMargin) !important;
}

@media screen and (max-width:767px) {
    #contact h2 {
        margin-bottom: -10px !important;
    }
}

/*menu*/

#logo svg {
    width: 140px;
}

@media screen and (min-width: 2399px) {
    #logo {
        margin-left: 15px;
    }
}

#navbar {
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    transition: all 0.35s;
    background-color: var(--primaryColor) !important;
    z-index: 1021 !important;
    height: 100px;
    line-height: 100px;
}

/* Admin-Leiste (eingeloggt): fixe Elemente nicht unter der Adminleiste verschwinden lassen */
body.admin-bar #navbar,
body.admin-bar #faker,
body.admin-bar .navbtn {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #navbar,
    body.admin-bar #faker,
    body.admin-bar .navbtn {
        top: 46px;
    }
}

.scrollUp {
    transform: translateY(-100px)
}

nav li {
    display: inline-flex;
    margin: 0 5px;
}

nav {
    float: right;
}

.menu-hauptnavigation-container {
    display: inline-block;
    margin-right: 85px;
}

.menu-hauptnavigation-container #menu li:first-child, .menu-hauptnavigation-container #menu li:last-child, #burger {
    display: none;
}

@media screen and (max-width: 576px) {
    #home-hero-slide {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    #navbar .menu-hauptnavigation-container #menu {
        display: none;
    }
    .menu-hauptnavigation-container #menu li:first-child, .menu-hauptnavigation-container #menu li:last-child, #burger {
        display: inherit !important;
    }
    /*.menu-hauptnavigation-container {
        margin-right: 75px !important;
    }*/
}

nav a {
    color: var(--lightColor) !important;
    font: normal 800 var(--listFS) aktiv-grotesk, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 10px;
    transition: 0.25s all !important;
}

nav a:hover, nav .current-menu-item a {
    color: var(--secondaryColor) !important;
}

/*Blog*/

body.blog, body.single-post {
    background-color: var(--lightColor) !important;
    transition: var(--colortransition);
}

body.blog #overall-wrapper {
    overflow: hidden;
}

body.blog #navbar, body.single-post #navbar {
    background-color: var(--lightColor) !important;
}

.blog #contact .row {
    margin: 0 -15px !important;
}

.blog #contact .row [class*="col-"] {
    padding-left: 30px !important;
}

.blog #content-wrapper .intro-section h2 a:hover {
    color: var(--darkColor) !important;
}

body.single-post.darkBG, body.blog.darkBG {
    background-color: var(--darkColor) !important;
    transition: var(--colortransition);
}

body.blog #navbar a:not(.cta-contact), body.single-post #navbar a:not(.cta-contact) {
    color: var(--darkColor) !important;
}

body.post-type-archive-projekte #navbar a:not(.cta-contact), body.single-projekte #navbar a:not(.cta-contact) {
    color: var(--darkColor) !important;
}

body.post-type-archive-projekte #navbar .current-menu-item a, body.single-projekte #navbar .current-menu-item a, body.post-type-archive-projekte #navbar a:not(.cta-contact):hover, body.single-projekte #navbar a:not(.cta-contact):hover, body.blog #navbar .current-menu-item a, body.single-post #navbar .current-menu-item a, body.blog #navbar a:not(.cta-contact):hover, body.single-post #navbar a:not(.cta-contact):hover {
    color: var(--primaryColor) !important;
}

body.single-post #gallery-1 img {
    border: 0px;
}

body.single-post #gallery-1 .gallery-item {
    margin: 0;
}

body.single-post svg, body.blog svg {
    transition: var(--colortransition);
}

body.single-post svg .st0, body.blog svg .st0{
    fill: var(--darkColor) !important;
}

body.single-projekte svg, body.post-type-archive-projekte svg { 
    transition: var(--colortransition);
}

body.single-projekte svg .st0, body.post-type-archive-projekte svg .st0{
    fill: var(--darkColor) !important;
}

.single-projekte-element {
    padding: var(--sectionPadding_ultrasmall) 15px;
}

.single-projekte .bilder-grid .row {
    margin: 0 !important;
}

.single-projekte .single-projekte-element ul {
    list-style-type: initial !important;
    padding-left: 22.5px !important;
}

@media screen and (max-width:767px) {
    .single-projekte .single-projekte-element ul {
        padding-left: 15px !important;
    }
}

.single-projekte .single-projekte-element ul li {
    font: normal 300 var(--paragraphs) aktiv-grotesk, sans-serif !important;
    line-height: 190% !important;
}

.postfeed a, .postfeed li {
    display: inline-block;
    color: black !important;
}

blockquote {
    padding: 20px 60px 20px 60px;
}

blockquote p {
    background: #4cfdec;
    padding: .3em .4em .2em .4em;
    display: inline;
    line-height: 160%;
    box-shadow: 7px 0px 0px #4cfdec, -7px 0px 0px #4cfdec;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

 /* Nummerierte Listen – passend zu ul gestaltet */                                                                                                                   
  ol {                                                                                                                                                                 
      padding-left: 20px;                                   
  }                                                                                                                                                                    
   
  ol li {                                                                                                                                                              
      font: normal 300 var(--paragraphs) aktiv-grotesk, sans-serif !important;
      line-height: 190% !important;
      margin-bottom: 8px;
      color: black !important;                                                                                                                       
  }
                                                                                                                                                                       
  /* Links in Blogbeiträgen – kein Wackeln, kein dotted */                                                                                                             
  .inner-padding a {
      text-decoration: underline !important;                                                                                                                           
      text-decoration-style: solid !important;              
      text-underline-offset: 3px !important;
      text-decoration-thickness: 1px !important;
  }                                                                                                                                                                    
   
  .inner-padding a:hover {                                                                                                                                             
      text-decoration: underline !important;                
      text-decoration-style: solid !important;
  }

.post-categories {
    display: inline-block;
    margin-bottom: -4px;
}

.post-categories li {
    float: left;
    margin-right: 5px;
}

.post-categories li:after {
    content: ", ";
    display: inline-block;
    color: var(--lightColor);
}

.post-categories li:last-of-type {
    margin-right: 0px;
}

.post-categories li:last-of-type:after {
    display: none;
}

.postfeed-thumb {
    position: relative;
    width: 100%;
    padding-top: 100%;
    display: block !important;
    /* 16:9 Aspect Ratio */
}

.postfeed-thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width:767px) {
    .postfeed-thumb {
        margin-bottom: 30PX;
    }
}

.blog-intro-container {
    padding-right: 0px !important;
}

.blog-intro-container .inner {
    padding-left: 15px !important;
    max-width: calc(100% - 30px);
}

.single-post .post-wrapper .container {
    padding-right: 0px !important;
}

/*Post*/

.post {
    margin: 90px 0;
}

.blog .post {
    margin: 90px -15px;
}

@media screen and (max-width:767px) {
    .blog .post {
        margin: 45px -15px;
    }
    .post {
        margin: 45px 0px;
    }
    .blog-intro-container .row, .single-intro-container {
        margin: 0px 0;
    }
    .blog footer .container, .single-post footer .container, .post-type-archive-projekte footer .container, .single-projekte footer .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

body.single-post .post-wrapper .shariff ul.shariff-buttons {
    padding-left: 0px !important;
    margin-left: -5px !important;
}

body.single-post.darkBG .post-wrapper .shariff ul.shariff-buttons a {
    color: var(--darkColor) !important;
}

.shariff {
    margin-bottom: 60px;
}

body .shariff .buttonsize-large li, body .shariff .buttonsize-large li a {
    height: 50px !important;
}

body .shariff .buttonsize-large li a {
    background-color: var(--middleColor) !important;
}

.shariff a span.shariff-text {
    font: normal 600 var(--senaryHead) aktiv-grotesk, sans-serif !important;
    display: inline-block !important;
    margin-top: 11px;
    margin-left: 2.5px;
    color: var(--darkColor) !important;
}

@media screen and (max-width:767px) {
    .shariff {
        margin-bottom: 30px;
    }
}

.shariff .shariff-icon svg {
    width: 32px;
    height: 20px;
    padding: 10px 1px 5px 8px !important;
    box-sizing: content-box !important;
}

.single .post .row:first-of-type {
    margin-bottom: 75px;
}

.share {
    display: block;
    margin-top: 30px;
}

.post-wrapper p {
    font: normal 300 var(--paragraphs) aktiv-grotesk, sans-serif !important;
    line-height: 190% !important;
}

.navigation.pagination {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    margin: 0 15px 120px 15px;
}

.navigation.pagination a {
    border: 3px solid transparent;
    padding: 19px 29px 20px 29px !important;
}

.navigation.pagination a:hover {
    border: 3px solid var(--darkColor);
    transition: none !important;
}

.darkBG .navigation.pagination a:hover {
    border: 3px solid var(--lightColor);
    transition: none !important;
}

.nav-links {
    margin: 50px auto;
}

.navigation.pagination .screen-reader-text {
    display: none !important;
}

.navigation.pagination a, .navigation.pagination span {
    font-size: 32px !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin: 0 0px;
    transition: none !important;
}

span.page-numbers.current {
    display: inline-block;
    margin: 0 10px !important;
    opacity: 0.25;
}

.next.page-numbers {
    margin: 0 !important;
}

@media screen and (max-width:767px) {
    .nav-links {
        margin: 30px 20px 0px 20px;
    }
    .navigation.pagination a, .navigation.pagination span {
        font-size: 24px !important;
        font-size: 1.5rem !important;
    }
    .navigation.pagination a {
        border: 3px solid transparent;
        padding: 7.5px 15px !important;
    }
}

.single-post #content-wrapper p ul:not(.marker ul) {
    list-style-type: initial !important;
    padding-left: 22.5px !important;
}

@media screen and (max-width:767px) {
    .single-post #content-wrapper p ul:not(.marker ul) {
        padding-left: 15px !important;
    }
}

.single-post .inner ul:not(.marker ul) li {
    font: normal 300 var(--paragraphs) aktiv-grotesk, sans-serif !important;
    line-height: 190% !important;
}

.single-post .inner ul:not(.marker ul) {
    list-style-type: initial !important;
    padding-left: 22.5px !important;
}

@media screen and (max-width:767px) {
    .single-post .inner ul:not(.marker ul) {
        padding-left: 15px !important;
    }
}

.single-post .inner ul:not(.marker ul) li {
    font: normal 300 var(--paragraphs) aktiv-grotesk, sans-serif !important;
    line-height: 190% !important;
}

/*Agentur*/

#content-wrapper .mail_link, #content-wrapper .phone_link, #content-wrapper .fax_link, #content-wrapper .key_link {
    border: none !important;
}

.lineheight_140 {
    line-height: 140% !important;
}

#content-wrapper .mail_link, #content-wrapper .phone_link, #content-wrapper .fax_link, #content-wrapper .key_link {
    display: inline-block !important;
}

#content-wrapper .mail_link:after, #content-wrapper .phone_link:after, #content-wrapper .fax_link:after, #content-wrapper .key_link:after {
    display: none !important;
}

#content-wrapper .mail_link:hover, #content-wrapper .phone_link:hover, #content-wrapper .fax_link:hover, #content-wrapper .key_link:hover {
    transition: all 0.25s !important;
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both !important;
    background-color: transparent !important;
}

.mail_link {
    margin-right: 20px;
}

.mail_link:before {
    content: "";
    width: 40px;
    height: 40px;
    ;
    display: inline;
    background-image: url("_img/mail-ico.svg");
    background-repeat: no-repeat;
    padding-right: 30px;
    background-size: 20px;
    vertical-align: middle;
    filter: invert(1) !important;
    transition: var(--colortransition);
}

.phone_link:before {
    content: "";
    width: 30px;
    height: 30px;
    ;
    display: inline;
    background-image: url("_img/phone-ico.svg");
    background-repeat: no-repeat;
    padding-right: 30px;
    background-size: 20px;
    vertical-align: middle;
    filter: invert(1) !important;
    transition: var(--colortransition);
}

.key_link:before {
    content: "";
    width: 30px;
    height: 30px;
    ;
    display: inline;
    background-image: url("_img/key-ico.svg");
    background-repeat: no-repeat;
    padding-right: 30px;
    background-size: 20px;
    vertical-align: middle;
    filter: invert(1) !important;
    transition: var(--colortransition);
}

.fax_link:before {
    content: "";
    width: 30px;
    height: 30px;
    ;
    display: inline;
    background-image: url("_img/fax-ico.svg");
    background-repeat: no-repeat;
    padding-right: 30px;
    background-size: 20px;
    vertical-align: middle;
    filter: invert(1) !important;
    transition: var(--colortransition);
}

@media screen and (max-width:767px) {
    .mail_link:before, .phone_link:before, .fax_link:before, .key_link:before {
        background-size: 15px;
        padding-right: 20px;
    }
    img.profil {
        margin-bottom: 30px;
    }
}

/*Projekte*/

body.post-type-archive-projekte h1, body.post-type-archive-projekte h2, body.post-type-archive-projekte p, body.single-projekte h1, body.single-projekte h2, body.single-projekte p {
    color: var(--darkColor) !important;
    transition: var(--colortransition);
}

body.post-type-archive-projekte.darkBG h1, body.post-type-archive-projekte.darkBG h2, body.post-type-archive-projekte.darkBG, body.darkBG.single-projekte h2, body.darkBG.single-projekte p, body.post-type-archive-projekte.darkBG a.mail_link, body.post-type-archive-projekte.darkBG a.fax_link, body.post-type-archive-projekte.darkBG a.phone_link {
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

body.post-type-archive-projekte, body.post-type-archive-projekte #navbar, body.single-projekte {
    background-color: var(--middleColor) !important;
    transition: var(--colortransition);
}

body.single-projekte #navbar {
    background-color: var(--middleColor) !important;
}

body.post-type-archive-projekte.darkBG, body.single-projekte.darkBG {
    background-color: var(--darkColor) !important;
    transition: var(--colortransition);
}

body.post-type-archive-projekte .col-8:not(.order-1) .inner-padding {
    padding-left: var(--innerMargin);
}

@media screen and (min-width:768px) {
    body.post-type-archive-projekte .inner {
        padding-left: 30px;
    }
    body.post-type-archive-projekte .order-2 .inner {
        padding-left: 0px;
        padding-right: 30px;
    }
}

.intro-row {
    margin-top: 7.5%;
}

.intro-section {
    padding-top: 7.5% !important;
}

.archive-spacer {
    height: 75px;
}

#projekte-archive {
    margin-top: 75px;
}

.archive-item {
    text-transform: uppercase;
}

body.post-type-archive-projekte h2 {
    margin-bottom: 15px !important;
}

p.desc-tags {
    margin-top: 15px !important;
}

.archive-item a {
    font-weight: 900 !important;
}

.archive-item span {
    font-weight: 100 !important;
}

@media screen and (max-width:767px) {
    .intro-section {
        padding-top: 150px !important;
    }
    #projekte-archive {
        margin-top: 30px;
    }
    .archive-spacer {
        height: 50px
    }
    .intro-row {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .intro-section {
        padding-top: 150px !important;
    }
}

/*inputs*/

.tab-content {
    margin: 30px 0 0px 0;
}

::placeholder {
    color: var(--darkColor) !important;
    transition: var(--colortransition);
}

body input[type="text"], body input[type="email"], textarea {
    padding: 7.5px 7.5px 7.5px 0;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: calc(100% - 15px) !important;
    margin-right: 15px !important;
    display: inline-block;
    margin-bottom: 20px !important;
    outline: none;
    border: 0px solid transparent !important;
    border-bottom: 3px solid var(--darkColor) !important;
    color: var(--darkColor) !important;
    background-color: transparent !important;
    font: normal 400 var(--paragraphs) aktiv-grotesk, sans-serif !important;
    transition: 1.5s all;
    padding: 10px;
    font-style: italic !important;
    border-radius: 0px !important;
    transition: var(--colortransition);
}

#tab1 textarea {
    margin-bottom: 0 !important;
}

.darkBG ::placeholder {
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

@media screen and (min-width:768px) {
    input.half_input {
        position: relative;
        float: left;
        width: calc(50% - 15px) !important;
    }
}

input[type="text"]:focus, input[type="date"]:focus, input[type="email"]:focus, .darkBG textarea:focus, .home input[type="text"]:focus, .home input[type="email"]:focus, .home .darkBG textarea:focus {
    background-color: white !important;
    color: var(--darkColor) !important;
}

.darkBG input[type="text"]:focus, .darkBG input[type="email"]:focus, .darkBG textarea, body .darkBG textarea:focus {
    color: var(--darkColor) !important;
}

textarea {
    width: calc(100% - 15px) !important;
    height: 175px;
    resize: none !important;
    margin-bottom: 5px !important;
    border-radius: 0px;
}

.darkBG input[type="text"], .darkBG input[type="email"], .darkBG input[type="submit"] body.darkBG textarea, .darkBG textarea, body .darkBG textarea {
    border-bottom: 3px solid var(--lightColor) !important;
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

textarea.half_height {
    height: 125px;
}

form span.form-inner-head {
    font-size: 12px;
    font-size: 0.75rem;
    margin-top: 25px;
    display: block;
    margin-bottom: -15px;
    padding-left: 15px;
}

input[type="number"], input[type="date"], .darkBG input[type="date"] {
    color: var(--darkColor) !important;
}

#wpcf7-f2155-o1 [data-name="acceptance-644"]{
    margin-top: 45px;
    display: block;
}

input[type="submit"] {
    border: 0px solid transparent !important;
    border-right: 3px solid var(--darkColor) !important;
    border-top: 3px solid var(--darkColor) !important;
    background-color: transparent !important;
    color: var(--darkColor) !important;
    width: auto !important;
    font-weight: bold !important;
    margin-bottom: 0px !important;
    margin-top: 10px !important;
    padding: var(--buttonPadding) !important;
    font: 800 normal var(--ctaPrimaryFS) aktiv-grotesk, sans-serif !important;
    border-radius: 0px;
    transition: var(--colortransition);
}

.darkBG input[type="submit"] {
    border-right: 3px solid var(--lightColor) !important;
    border-top: 3px solid var(--lightColor) !important;
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

input[type="radio"] {
    appearance: radio !important;
}

::placeholder {
    color: var(--lightColor);
}

.tab-container small {
    font: normal 400 var(--smallFS) aktiv-grotesk, sans-serif !important;
    line-height: 175% !important;
    display: block;
    margin-left: 27.5px;
    margin-top: -30px;
    width: calc(100% - 42.5px);
    margin-bottom: 30px !important;
}

@media screen and (max-width:767px) {
    .tab-container small {
        margin-top: -27.5px;
    }
    textarea {
        height: 150px;
    }
}

.wpcf7 p {
    margin: 0px !important;
}

.wpcf7 label {
    margin-bottom: 7px !important;
}

.wpcf7 .ajax-loader {
    display: none !important;
}

span.wpcf7-list-item {
    margin-left: 0px !important;
}

.acceptance-text {
    pointer-events: none;
    height: 0px;
    opacity: 0;
    transition: 0.75s all;
    margin-top: 10px;
}

.acceptance-text.activated {
    pointer-events: auto;
    opacity: 1;
    height: auto;
}

input[type=checkbox]:not(#wpsc_tickets_container input[type=checkbox]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    /*padding: 3px;*/
    height: 20px;
    width: 20px;
    border-radius: 0px;
    border: 3px solid white;
    position: relative;
}

input[type=checkbox]:checked {
    background-color: white;
}

/*Impressum/Datenschutz*/

.page-datenschutz #content-wrapper ul, .page-impressum #content-wrapper ul {
    list-style-type: initial !important;
    padding-left: 22.5px !important;
}

@media screen and (max-width:767px) {
    .page-datenschutz #content-wrapper ul, .page-impressum #content-wrapper ul {
        padding-left: 15px !important;
    }
}

.page-datenschutz #content-wrapper ul li, .page-impressum #content-wrapper ul li {
    font: normal 300 var(--paragraphs) aktiv-grotesk, sans-serif !important;
    line-height: 190% !important;
}

/*footer*/

footer {
    background-color: var(--primaryColor);
}

footer .row>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

footer .row>div img {
    flex: 0 0 225px;
    width: 225px;
    height: auto;
    display: block;
}

.footer-inner-padding {
    flex: 0 0 calc(100% - 225px)
}

@media screen and (max-width:767px) {
    .footer-inner-padding {
        flex: 0 0 calc(100% - 0px);
        margin-top: 30px;
    }
    footer .row>div .go-d {
        font-size: 0.625rem !important;
    }
    footer .row>div img {
        margin-bottom: 5px;
    }
}

@media screen and (min-width:768px) and (max-width:1199px) {
    .footer-inner-padding {
        padding-left: 15px;
        padding-right: 15px;
    }
    .home .footer-inner-padding {
        padding-left: 0px;
        padding-right: 0px;
    }
}

footer ul li {
    display: inline-block;
    text-transform: uppercase;
    margin-right: 20px;
    margin-bottom: 12.5px;
}

footer ul li a {
    color: var(--lightColor) !important;
    font: 800 normal var(--listFS) aktiv-grotesk, sans-serif !important;
    letter-spacing: 1px;
    transition: 0.5s all !important;
}

footer ul li a:hover, footer ul li.current-menu-item a {
    color: var(--secondaryColor) !important;
}

.menu-footernavigation-container {
    max-width: 70% !important;
}

#copy {
    color: var(--lightColor) !important;
    font-family: aktiv-grotesk, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 0.875rem !important;
    margin: 60px 0 0 0 !important;
}

.sm-bar a {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    display: inline-block;
    transition: 2s all;
}

@media screen and (max-width: 767px) {
    .sm-bar a {
        width: 30px;
        height: 30px;
    }
    #copy {
        font-size: 0.625rem !important;
    }
}

.lightBG .sm-bar a img {
    filter: invert(1);
    transition: var(--colortransition);
}

body.darkBG #contact .sm-bar a img, body #contact.darkBG .sm-bar a img, body.lightBG #contact.darkBG .sm-bar a img {
    filter: invert(0) !important;
    transition: var(--colortransition);
}

.sm-bar a {
    overflow: hidden;
    height: 80px;
    padding: 15px;
    width: 80px;
    position: relative;
    transition: 0.25s all !important;
    border: 3px solid transparent;
}

.sm-bar a:hover {
    border: 3px solid var(--lightColor);
    transition: 0.2s all !important;
}

body.lightBG #home-hero .sm-bar a:hover {
    border: 3px solid var(--darkColor);
    transition: 0.2s all !important;
}

.sm-bar a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--colortransition);
}

@media screen and (max-width: 767px) {
    .sm-bar a {
        height: 50px;
        padding: 10px;
        width: 50px;
    }
}

#logo {
    transition: none !important;
}

#logo.hover svg #top {
    animation-iteration-count: 1;
    animation: runningspan 1s ease-in-out;
}

@keyframes runningspan {
    0% {
        transform: translateX(calc(0% + 0px));
    }
    48% {
        transform: translateX(101%);
        opacity: 1;
    }
    49% {
        transform: translateX(101%);
        opacity: 0;
    }
    50% {
        transform: translateX(-101%);
        opacity: 0;
    }
    51% {
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        transform: translateX(calc(0% + 0px));
    }
}

/*page transitions*/

#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    pointer-events: none;
    background: radial-gradient(circle, var(--secondaryColor) 0%, var(--secondaryColor) 100%);
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
}

@keyframes fade-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

@keyframes fade-out {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}

#fader.fade-out {
    transform: translateX(0%);
    /*Former:100%*/
    animation-fill-mode: forwards;
    animation-name: fade-out;
    transition-delay: 1s;
}

#fader.fade-in {
    transform: translateX(-100%);
    animation-name: fade-in;
}

#hero-img-01 {
    background: url("_img/fgr-intro-01.jpg");
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    -webkit-animation: scene01 50s infinite ease;
    animation: scene01 50s infinite ease;
    background-size: 100%;
    background-position: bottom left;
}

@keyframes scene01 {
    0% {
        background-size: 100%;
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    20% {
        background-size: 120%;
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#hero-img-02 {
    background: url("_img/fgr-intro-02.jpg");
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    -webkit-animation: scene02 50s infinite ease;
    animation: scene02 50s infinite ease;
    background-size: 100%;
    background-position: left top;
}

@keyframes scene02 {
    0% {
        opacity: 0;
    }
    10% {
        background-size: 100%;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    40% {
        background-size: 120%;
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

#hero-img-03 {
    background: url("_img/fgr-intro-03.jpg");
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    -webkit-animation: scene03 50s infinite ease;
    animation: scene03 50s infinite ease;
    background-size: 100%;
    background-position: right bottom;
}

@keyframes scene03 {
    0% {
        opacity: 0;
    }
    30% {
        background-size: 100%;
    }
    40% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        background-size: 120%;
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

#hero-img-04 {
    background: url("_img/fgr-intro-04.jpg");
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    -webkit-animation: scene04 50s infinite ease;
    animation: scene04 50s infinite ease;
    background-size: 100%;
    background-position: left top;
}

@keyframes scene04 {
    0% {
        opacity: 0;
    }
    40% {
        background-size: 100%;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    80% {
        background-size: 120%;
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

#hero-img-05 {
    background: url("_img/fgr-intro-05.jpg");
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    -webkit-animation: scene05 50s infinite ease;
    animation: scene05 50s infinite ease;
    background-size: 100%;
    background-position: bottom left;
}

@keyframes scene05 {
    0% {
        opacity: 0;
    }
    70% {
        background-size: 100%;
    }
    80% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        background-size: 120%;
        opacity: 0;
    }
}

/*

#hero-img-01 {
    background: url("_img/fgr-intro-01.jpg");
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    -webkit-animation: scene01 30s infinite ease;
    animation: scene01 30s infinite ease;
    background-size: 100%;
}

@keyframes scene01 {
    0% {background-size: 100%;}
    15% {opacity: 1;}
    33% {background-size: 120%; opacity: 0;}
    66% {opacity: 0;}
    100% {opacity: 1;}
}

#hero-img-02 {
    background: url("_img/fgr-intro-02.jpg");
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    -webkit-animation: scene02 30s infinite ease;
    animation: scene02 30s infinite ease;
    background-size: 100%;
}

@keyframes scene02 {
    0% {background-size: 100%;}
    32% {background-size: 100%;}
    33% {opacity: 1;}
    66% {background-size: 120%; opacity: 0;}
    100% {background-size: 120%; opacity: 0;}
}

#hero-img-03 {
    background: url("_img/fgr-intro-03.jpg");
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    -webkit-animation: scene03 30s infinite ease;
    animation: scene03 30s infinite ease;
    background-size: 100%;
}
        
@keyframes scene03 {
    0% {background-size: 100%;}
    65% {background-size: 100%;}
    66% {opacity: 1;}
    99% {background-size: 120%; opacity: 0;}
}

*/

body.darkBG * {
    color: var(--lightColor) !important;
    transition: var(--colortransition);
}

/**/

.navbtn {
    overflow: hidden;
    z-index: 111111111 !important;
    width: 30px;
    pointer-events: initial;
    margin-top: 26px;
    position: fixed;
    right: 105px;
    transition: 0.35s all;
    top: 0;
}

@media screen and (max-width:567px) {
    .navbtn {
        right: 85px;
    }
}

#burger {
    overflow: hidden !important;
    z-index: 999999;
    cursor: pointer;
}

#burger span {
    display: block;
    background: #fff;
    /*border-radius:2px;*/
    width: 30px;
    height: 6px;
    position: relative;
    margin-top: 7px;
    transition: all 0.25s ease;
}

.single-projekte #burger span, .post-type-archive-projekte #burger span, .single-post #burger span, .blog #burger span {
    background-color: black;
}

#burger span:nth-child(2) {
    -webkit-animation: runningburger 6s ease infinite;
    -moz-animation: runningburger 6s ease infinite;
    -o-animation: runningburger 6s ease infinite;
    animation: runningburger 6s ease infinite;
}

.navbtn.open {
    margin-top: 20px;
}

/*#burger:hover span:nth-child(1),*/

.navbtn.open #burger span:nth-child(1) {
    margin-top: 29px;
    transition: all 0.25s ease;
}

/*#burger:hover span:nth-child(3),*/

.navbtn.open #burger span:nth-child(3) {
    margin-top: -19px;
    transition: all 0.25s ease;
}

@media screen and (max-width:1199px) {
    #burger {
        transform: scale(0.8);
    }
}

@keyframes runningburger {
    0% {
        transform: translateX(-40px);
    }
    15% {
        transform: translateX(0px);
    }
    90% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(40px);
    }
}

.min-h-100 {
    min-height: calc(100vh - 0px) !important;
}

.navi-wrapper {
    min-height: calc(100vh - 0px) !important;
    width: 100vw;
    background-color: #35E6E3;
    color: #566973 !important;
    position: fixed;
    z-index: 9999;
    top: 0;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
    transform: translateX(-100%);
    animation-fill-mode: forwards;
}

.navi-wrapper .container-fluid {
    overflow: scroll;
    max-height: calc(100vh - 45px);
}

.navi-wrapper #menu a {
    color: var(--darkColor) !important;
    transition: 0s all;
    padding: 7.5px 10px;
    font: normal 800 var(--secondaryHead) aktiv-grotesk, sans-serif !important;
    background-color: var(--lightColor);
}

.navi-wrapper #menu li:first-of-type a {
    color: var(--lightColor) !important;
    background-color: var(--primaryColor) !important;
    padding: 7.5px 15px !important;
}

.home .navi-wrapper .container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.navi-wrapper #menu {
    margin-top: 22.5px;
}

.navi-wrapper #menu li {
    margin-bottom: 25px;
    display: block;
}

.navi-wrapper a:hover {
    color: #000 !important;
}

.navi-inner-wrapper {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0px;
}

.navi-contactwrapper {
    flex: 0 0 100%;
    align-self: flex-end;
    margin-top: -45px;
    padding-bottom: 22.5px !important;
}

@media screen and (max-width:567px) {
    .navi-contactwrapper {
        padding-bottom: 85px !important;
    }
}

.navi-contactwrapper p {
    margin: 60px 0 0 0px !important;
}

body .navi-wrapper .navi-contactwrapper a, body.middleBG .navi-wrapper .navi-contactwrapper a, body.darkBG .navi-wrapper .navi-contactwrapper a, body.lightBG .navi-wrapper .navi-contactwrapper a, .navi-wrapper .navi-contactwrapper p, .navi-wrapper .navi-contactwrapper p strong {
    color: var(--darkColor) !important;
}

.navi-wrapper .navi-contactwrapper a:before {
    filter: invert(0) !important;
}

.navi-contactwrapper a:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes nav-open {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes nav-close {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

.navi-wrapper.navclose {
    animation-name: nav-close;
    transform: translateX(100%);
}

.navi-wrapper.navopen {
    animation-name: nav-open;
    transform: translateX(-100%);
}

/*nav transitions*/

#fader-nav {
    mix-blend-mode: difference !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    pointer-events: none;
    background: radial-gradient(circle, rgba(48, 51, 58, 1) 0%, rgba(35, 37, 43, 1) 100%);
    animation-duration: 800ms;
    animation-timing-function: ease-in-out;
    transform: translateX(100%);
}

@keyframes fade-nav {
    0% {
        transform: translateX(100%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

#fader-nav.fade-nav {
    transform: translateX(100%);
    animation-name: fade-nav;
}

body .wpcf7-not-valid-tip{
    color: var(--tertiaryColor) !important;
    margin-top: -15px !important;
}

.wpcf7-not-valid-tip::before {
    font-weight: normal;
    display: block;
    position: absolute;
    /*background-color: #dd5404;*/
    width: 35px;
    height: 48px;
    content: "✎";
    right: 0px;
    color: var(--tertiaryColor);
    top: -48px;
    font-size: 34px;
}

.wpcf7 form.invalid .wpcf7-response-output {
    border: 3px solid var(--tertiaryColor) !important;
    color: var(--tertiaryColor) !important;
    padding: var(--sectionPadding_ultrasmall);
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    display: none !important;
    border-color: transparent !important;
}

/*Borlaps*/

.page-datenschutz #content-wrapper a.borlabs-cookie-preference {
    background-color: transparent !important;
    color: var(--primaryColor) !important;
}

body #BorlabsCookieBox #CookieBoxTextHeadline, body #BorlabsCookieBox #CookieBoxTextDescription {
    color: var(--lightColor) !important;
}

body #BorlabsCookieBox ._brlbs-accept a {
    color: var(--darkColor) !important;
    font-weight: 700 !important;
}

body.blog #BorlabsCookieBox li label, body.blog #BorlabsCookieBox p._brlbs-legal a, body.blog #BorlabsCookieBox p._brlbs-manage a, body.blog #BorlabsCookieBox #CookiePrefDescription, body.single #BorlabsCookieBox #CookiePrefDescription, body.blog #BorlabsCookieBox ._brlbs-h3 {
    color: var(--lightColor) !important;
}

/*Tabelle*/

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    grid-template-rows: 40px 40px 40px 85px 50px 50px 50px 40px;
    width: 100%;
    column-gap: 10px;
}

.grid-item {
    background-color: var(--primaryColor);
    padding: 10px;
    font-size: 20px;
    text-align: center;
    color: white;
    height: 100%;
    align-self: center;
    font: normal 300 var(--paragraphs) aktiv-grotesk, sans-serif !important;
    font-size: 14px !important;
    font-size: 1.125rem !important;
    letter-spacing: 0.5px;
}

.grid-item img.cross {
    width: 20px;
    height: 15px;
    object-fit: contain;
}

.grid-item img.check {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

body .grid-container .grid-item.lightBG, body .grid-container .grid-item.middleBG, body.darkBG .grid-container .grid-item.lightBG span, body.darkBG .grid-container .grid-item.middleBG span {
    color: var(--primaryColor) !important;
}

.grid-item.lightBG span {
    font: normal 900 var(--quartenaryHead) aktiv-grotesk, sans-serif !important;
}

.grid-item.middleBG {
    font: normal 900 var(--quinaryHead) aktiv-grotesk, sans-serif !important;
}

.fixed-col {
    position: absolute;
    display: grid;
    width: 160px;
    margin-top: 100px;
    grid-template-rows: 40px 40px 40px 85px 50px 50px 50px 40px;
}

.fixed-col .grid-item {
    text-align: left;
}

.fixed-col .grid-item strong {
    text-transform: initial;
    color: var(--lightColor) !important;
    display: block;
    margin-top: 6.5px;
}

#content-table {
    margin-left: 200px;
    width: calc(100% - 200px);
    overflow: auto;
    white-space: nowrap;
}

.grid-head-wrap {
    display: grid;
    width: 100%;
    grid-template-columns: 220px 220px;
    grid-template-rows: 100px;
}

.grid-head-wrap .grid-item {
    text-align: left;
}

.grid-head-wrap .grid-item strong {
    text-transform: uppercase;
    font: normal 700 var(--paragraphs) aktiv-grotesk, sans-serif !important;
    color: var(--lightColor) !important;
}

.top-border {
    border-top: 3px solid var(--lightColor);
    border-left: 3px solid var(--lightColor);
    border-right: 3px solid var(--lightColor);
}

.leftright-border {
    border-left: 3px solid var(--lightColor);
    border-right: 3px solid var(--lightColor);
}

.bottom-border {
    border-bottom: 10px solid var(--primaryColor);
}

.scnd-crl {
    background-color: #7c4fdf;
}

.table-nav-wrap {
    background-color: var(--tertiaryColor);
}

#right-button, #left-button {
    background-color: var(--tertiaryColor);
    padding: 9px 0px 12px 5px;
    color: var(--darkColor);
}

#right-button {
    margin-left: -5px;
}

#left-button {
    margin-left: -10px;
}

@media screen and (max-width:767px) {
    .grid-item {
        font-size: 12px !important;
        font-size: 0.75rem !important;
    }
    .grid-head-wrap {
        grid-template-columns: 170px 170px;
        grid-template-rows: 80px;
    }
    .grid-container {
        grid-template-rows: 40px 35px 38.5px 67.5px 45px 45px 45px 40px;
        grid-template-columns: 75px 75px 75px 75px;
        column-gap: 5px;
    }
    .fixed-col {
        grid-template-rows: 40px 35px 38.5px 67.5px 45px 45px 45px 40px;
        width: 132.5px;
        margin-top: 80px;
    }
    #content-table {
        margin-left: 139px;
        width: calc(100 - 139px);
    }
    .grid-item img.cross {
        width: 12.5px;
        height: 10px;
        object-fit: contain;
    }
    .grid-item img.check {
        width: 12.5px;
        height: 12.5px;
        object-fit: contain;
    }
    .bottom-border {
        border-bottom: 5px solid var(--primaryColor);
    }
    .fixed-col .grid-item strong {
        margin-top: 4.5px;
    }
}

video {
    max-width: 100%;
}

/*NO NFC*/

.page-template-page-nonfc footer, .page-template-page-nonfc #contact, .page-template-page-nonfc #navbar, .page-template-page-nonfc #navbtn, .page-template-page-nonfc #faker {
    display: none !important;
}

body.page-template-page-nonfc {
    background-color: var(--primaryColor) !important;
}

body.page-template-page-nonfc h1 {
    color: var(--lightColor) !important;
    line-height: 0.85 !important;
    margin-left: -5px;
}

body.page-template-page-nonfc h1 span {
    color: var(--primaryColor) !important;
    text-stroke: 1px #fff;
    -webkit-text-stroke: 0.5px #fff;
    /*text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;*/
}

body.page-template-page-nonfc small {
    color: var(--lightColor) !important;
}

body.page-template-page-nonfc small a {
    border-bottom: 1px dotted #fff;
}

body.page-template-page-nonfc small a:hover {
    color: var(--secondaryColor) !important;
    border-bottom: 1px dotted var(--secondaryColor);
}

body.page-template-page-nonfc .intro-row {
    margin-top: 0 !important;
}

body.page-template-page-nonfc .intro-section {
    padding-top: 0 !important;
}

.nonfc-text {
    margin-top: -25px;
}

.page-template-page-nonfc .mail_link, .page-template-page-nonfc .fax_link, .page-template-page-nonfc .phone_link, .page-template-page-nonfc .key_link {
    display: inline-block;
}

.page-template-page-nonfc .mail_link:hover, .page-template-page-nonfc .fax_link:hover, .page-template-page-nonfc .phone_link:hover, .page-template-page-nonfc .key_link:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

body.page-template-page-nonfc img {
    width: 100%;
    height: auto;
}

body.page-template-page-nonfc #overall-wrapper {
    overflow: hidden;
}

body.page-template-page-nonfc .inner-padding {
    padding: 0 30px 30px 30px;
}

body.page-template-page-nonfc .cta-contact {
    text-transform: none;
    margin-right: 30px;
    margin-top: 30px;
}

body.page-template-page-nonfc .cta-primary {
    border-bottom: none;
    color: var(--secondaryColor) !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

body.page-template-page-nonfc .cta-primary span {
    margin: 15px 20px !important;
}

/*Landignpage*/

.page-template-page-landing h1 {
    margin-bottom: 30px;
}

.page-template-page-landing .cta-primary {
    margin-top: 60px;
    border-right: 3px solid var(--tertiaryColor);
    border-top: 3px solid var(--tertiaryColor);
}

.page-template-page-landing .cta-primary span {
    color: var(--tertiaryColor) !important;
}

.page-template-page-landing .cta-primary:before {
    background: var(--tertiaryColor);
}

.page-template-page-landing .cta-primary:after {
    background: var(--tertiaryColor);
}

.page-template-page-landing.lightBG .cta-primary {
    border-right: 3px solid var(--primaryColor);
    border-top: 3px solid var(--primaryColor);
}

.page-template-page-landing.lightBG .cta-primary span {
    color: var(--primaryColor) !important;
}

.page-template-page-landing.lightBG .cta-primary:before {
    background: var(--primaryColor);
}

.page-template-page-landing.lightBG .cta-primary:after {
    background: var(--primaryColor);
}

.page-template-page-landing .check-list li {
    font: normal 700 var(--quartenaryHead) aktiv-grotesk, sans-serif !important;
    color: var(--lightColor) !important;
    transition: var(--colortransition);
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.page-template-page-landing .check-list svg {
    margin-right: 15px;
    display: inline-block;
    margin-bottom: -1px;
}

.page-template-page-landing .check-list li svg {
    transition: var(--colortransition);
    filter: invert(1) !important;
    width: 30px !important;
    height: 30px !important;
}

.lightBG.page-template-page-landing .check-list li svg {
    transition: var(--colortransition);
    filter: invert(0) !important;
}

.lightBG.page-template-page-landing .check-list li {
    color: var(--darkColor) !important;
    transition: var(--colortransition);
}

.page-template-page-landing .intro-section{
    padding-top: 100px !important;
}

.page-template-page-landing .intro-row {
    margin-top: 7.5%;
    position: relative;
}

.page-template-page-landing .intro-row h4 {
    width: 100%;
    max-width: 600px;
    color: var(--lightColor);
    transition: var(--colortransition);
}

.page-template-page-landing.lightBG h4 {
    color: var(--darkColor) !important;
    transition: var(--colortransition);
}

.page-template-page-landing #content-wrapper section:nth-of-type(even), .lightBG.page-template-page-landing #content-wrapper section:nth-of-type(even) {
    background-color: var(--middleColor) !important;
}

.page-template-page-landing .counter-wrap h2, .page-template-page-landing .counter-wrap h4 {
    color: var(--primaryColor) !important
}

.page-template-page-landing .counter-wrap {
    display: inline-block;
    margin-right:75px;
}

@media screen and (max-width: 991px) {
   
.page-template-page-landing .counter-wrap {
    display: inline-block;
    margin-right:30px;
}

}


.page-template-page-landing .counter-wrap:last-of-type {
    margin-right: 0px;
}

@media screen and (max-width: 767px) {
    .page-template-page-landing .counter-wrap {
    width: calc(100% - 0px);
    margin: 0 0 30px 0px;
}

.page-template-page-landing .counter-wrap h2{
    margin-bottom: 10px !important;
}

.page-template-page-landing .counter-wrap:last-of-type {
    margin-right: 0px;
    margin-bottom: 0px;
}
}


.page-template-page-landing .middleBG h2 {
    color: var(--primaryColor) !important;
    padding-right: 30px;
}

.page-template-page-landing #content-wrapper a.toggle, .page-template-page-landing.lightBG #content-wrapper a.toggle {
    font: normal 700 var(--quartenaryHead) aktiv-grotesk, sans-serif !important;
    color: var(--primaryColor) !important;
}

.page-template-page-landing #content-wrapper small {
    font: normal 400 var(--smallFS) aktiv-grotesk, sans-serif !important;
    display: block;
}

.page-template-page-landing .menu-hauptnavigation-container {
    /*display: none;*/
}

.icon-box {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    width: calc(33% - 30px);
    border-bottom: 3px solid var(--darkColor);
    padding-bottom: 10px;
}

.icon-box img{
    width: 100px;
    height: 100px;
    object-fit: contain;
    object-position: center bottom;
    margin-bottom: 30px;
}

.icon-box.icon-box-highlight {
    border-color: var(--primaryColor);
}

.page-template-page-landing #content-wrapper .icon-box.icon-box-highlight h4, .page-template-page-landing #content-wrapper .icon-box.icon-box-highlight h2 {
    color: var(--primaryColor) !important;
}

@media screen and (min-width:992px) {
    .col-12 .icon-box:nth-of-type(3n+3) {
        margin-right: 0px;
    }
}

@media screen and (max-width:992px) {
    .col-12 .icon-box:nth-of-type(2n+2) {
        margin-right: 0px;
    }
    .icon-box {
        margin-right: 30px;
        width: calc(50% - 20px);
        border-bottom: 3px solid var(--darkColor);
    }
}

@media screen and (max-width:767px) {
  
.icon-box img{
    width: 75px;
    height: 75px;
    margin-bottom: 15px;
}


.icon-box {
    margin-bottom: 20px;
    margin-top: 20px;
}
}

@media screen and (max-width:576px) {
    .icon-box {
        width: 100%;
        margin-right: 0;
    }
}


.page-template-page-landing #home-hero-slide{
    opacity: 0.9;
}

#hero-landing {
    background: url("_img/webseite-wartung-support-fgr-design.jpg");
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    content: " ";
    position: absolute;
    background-size: 100%;
    background-position: right bottom;
}

@media screen and (max-width:767px) {
    .page-template-page-landing footer{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

.page-template-page-landing .intro-section h4{
    line-height: 1.5 !important;
}

/*Accordion*/

#content-wrapper ul.accordion {
    margin-bottom: 10px;
    margin-top: 2px;
    margin-top: 60px;
}

#content-wrapper .accordion ul .inner {
    padding: 0px 0px 15px 0px;
    overflow: hidden;
    display: none;
    margin-bottom: 0px;
}

#content-wrapper .accordion ul .inner p {
    margin-bottom: 15px !important;
    margin-top:  0px !important;
}

#content-wrapper .accordion ul .inner a {
    border-bottom: 1px dotted var(--darkColor);
    color: var(--darkColor);
}

#content-wrapper .accordion ul .inner p:last-of-type {
    margin-bottom: 0px;
}

#content-wrapper .accordion ul>li:before {
    display: none;
}

#content-wrapper .accordion>li {
    margin-top: -2px;
    border-top: 3px solid var(--primaryColor);
}

#content-wrapper .accordion>li:last-of-type {
    border-bottom: 3px solid var(--primaryColor);
}

#content-wrapper .accordion ul>li a.toggle {
    width: 100%;
    position: relative;
    display: block;
    padding: 20px 45px 20px 0px;
    transition: background 0.3s ease;
    font-weight: bold;
}

#content-wrapper .accordion ul>li a.toggle::after {
    content: "↓";
    text-align: center;
    position: absolute;
    right: 20px;
    top: calc(50% - 15px);
    width: 15px;
    height: 30px;
    background-image: url(../_img/toggle-down.svg);
    background-size: 15px 30px;
    background-position: center center;
    background-repeat: no-repeat;
}

#content-wrapper .accordion ul>li a.toggle.active::after {
    content: "↑";
}

@media screen and (max-width:991px) {
    #content-wrapper .accordion ul>li a.toggle::after {
        top: calc(50% - 10px);
        width: 10px;
        height: 20px;
        background-image: url(../_img/toggle-down.svg);
        background-size: 10px 20px;
    }
}


/*Form Page template*/

.page-template-page-form #contact,
.page-template-page-form nav,
.page-template-page-form #faker{
    display: none;
}

.page-template-page-form h3{
    color: var(--lightColor);
    margin-bottom: 45px;
}

.page-template-page-form .wpcf7-list-item{
    display: block !important;
}

.page-template-page-form .wpcf7-list-item input{
    margin-right: 7.5px;
    margin-bottom: -2.5px;
}

.styled-checkbox-yellow{
    margin: 15px 0 45px 0;
    display: block;
}

.page-template-page-form input[type="submit"]{
    margin-top: 20px !important;
}

.styled-checkbox-yellow small{
    color: var(--tertiaryColor) !important;
}

.styled-checkbox-yellow input{
    border-color: var(--tertiaryColor) !important;
}

.styled-checkbox-yellow input:checked{
    background-color: var(--tertiaryColor) !important;
}

.page-template-page-form strong{
    display: block;
    margin: 15px 0 10px 0;
    font-size: var(--quartenaryHead);
}

.page-template-page-form input:focus{
    color: var(--darkColor) !important;
}

@media screen and (max-width:767px) {
    .page-template-page-form footer .container{
        padding-left: 15px !important;
        padding-right: 15px !important;
    } 
}

.page-template-page-form h2 svg{
    margin-right: 15px;
    transform: translateY(-5px);
}

@media screen and (max-width:767px) {
    .page-template-page-form h2 svg{
        width: 35px !important;
        height: auto;
        margin-right: 10px;
        transform: translateY(-2.5px);
    }

}

.page-template-page-form h4{
    line-height: 1.5 !important ;
}

/*Borlabs 3x*/

body div.brlbs-cmpnt-container p,
body div.brlbs-cmpnt-container h2{
    color:var(--lightColor) !important;
}

body div.brlbs-cmpnt-container p{
    font-size: 0.87rem !important;
    margin: 10px 0 !important;
}

body div.brlbs-cmpnt-container h2{
    font-size: 1.25rem !important;
    margin: 0 !important;
}

#BorlabsCookieBox .brlbs-cmpnt-search-bar-input{
    border-color: var(--lightColor) !important;
}

#BorlabsCookieBox .brlbs-cmpnt-search-bar-input::placeholder{
    color:var(--lightColor) !important;
}

.brlbs-cmpnt-checkbox{
    border-radius: 0px !important;
    border-width: 2px !important;
}

/*ACF Table*/

.acf-table{
    margin-top: 40px;
}

.acf-table td,
.acf-table th{
    padding: 10px 15px;
    text-align: center;
}

.acf-table th{
    vertical-align: top;
}

.acf-table, 
.acf-table th, 
.acf-table td {
    border: 1px solid #222;
  }

  .acf-table th,
  .acf-table td b{
      font-weight: 900 !important;
  }


  .acf-table.table-webspace tr th:first-of-type
  .acf-table.table-webspace tr td:first-of-type{
    border-right: 1px solid #777 !important;
}

.acf-table thead th{
    border-bottom: 1px solid #777;
}

.acf-table td,
.acf-table th{
    border-left: 1px solid #777;
    border-right: 1px solid #777;
}

.acf-table td:first-child,
.acf-table th:first-child {
    border-left: none;
    text-align: left;
}

.acf-table td:last-child,
.acf-table th:last-child {
    border-right: none;
}

@media screen and (max-width:767px) {
    .acf-table td,
.acf-table th{
   font-size: 0.75rem;
   padding: 5px 5px;
}

.acf-table td small,
.acf-table th small{
    font-size: 0.5rem;
}

.acf-table{
    margin-top: 20px;
}
}

@media screen and (max-width:576px) {
    .acf-table td,
.acf-table th{
   font-size: 0.6875rem;
   padding: 3.5px 3.5px;
   min-width: 60px;
}

.acf-table td small,
.acf-table th small{
    font-size: 0.5rem;
}

.acf-table{
    margin-top: 20px;
}
}