/*==== B A S I S ==============================================*/

* { -webkit-box-sizing: inherit; box-sizing: inherit; background-repeat: no-repeat; }
html { -webkit-box-sizing: border-box; box-sizing: border-box; scroll-behavior: smooth; }

body { font-family: 'Montserrat', sans-serif; color: rgb(46, 46, 46); background:#ffffff; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

.breite { width: 90%; max-width: 1340px; margin: 0 auto; }

.label { display: inline-block; min-width: 5em; }
.center { text-align: center; }
.upper { text-transform: uppercase; letter-spacing: 0.02em; }
.italic { font-style: italic; }
.hiddenmobile { display: none; }

iframe { border: 0; }

input, textarea, select { font-size: 1em; }
input[type="submit"], .wk-button, .cookie input.accept[type="submit"] { background-color: rgb(197, 0, 11); color: #fff; }
input[type="submit"]:hover, input[type="submit"]:active, .wk-button:hover, .wk-button:active, .cookie input.accept[type="submit"]:hover, .cookie input.accept[type="submit"]:active { background-color: rgb(160, 0, 8); }

.sitemap ul { padding: 0; }
.screen-reader-text { display: none; }

.wk-akkordeon .pane-sliders .title { background-color: rgb(197, 0, 11); color: #ffffff; }
.wk-akkordeon .pane-sliders .title:hover { background-color: rgb(160, 0, 8); }

.inline-list { padding: 0; }
.inline-list li { display: inline-block; }
.inline-list li::After { content: ', '; }

.wk-list { padding: 0; list-style: none; }
.wk-list li { margin-bottom: .2em; padding-left: 1.2em; background: url(../img/arrow-right-red.svg) left .3em/.7em no-repeat; }

a { color: rgb(197, 0, 11); }

/*==== H E A D E R ============================================*/

#site { border-top: 1px solid rgb(197, 0, 11); }
header { background: rgb(197, 0, 11); color: #ffffff; }
header .breite { position: relative; padding-top: .3em; }

#menueToggle { background: rgb(197, 0, 11) url(../img/symbols.svg) center top/60px 180px no-repeat; position: absolute; top: 1em; right: 5%; width: 60px; height: 60px; z-index: 1000; cursor: pointer; }
#menueToggle.close { background: url(../img/symbols.svg) center/60px 180px no-repeat; }

.top-row { display: none; position: absolute; right: 0; top: 1em; font-size: .8em; }
.top-row a { color: inherit; text-decoration: none; }
.top-row .mail { margin-right: 1.5em; padding-left: 1.5em; background: url(../img/envelope.svg) left center/1em no-repeat; }
.top-row .tel { padding-left: 1.5em; background: url(../img/phone.svg) left center/1em no-repeat; }

.wk-fixed .top-row { display: none; }
.wk-fixed #logo { width: 7em; }

#logo { display: inline-block; margin-right: auto; width: 120px; -webkit-transition: width 300ms ease; transition: width 300ms ease; }
#logo img { display: block; }

nav.wk-horizontal { -ms-flex-item-align: end; align-self: flex-end; }
nav.wk-horizontal ul { background: transparent; margin: 0 -1em; padding-bottom: .5em; font-size: 1.3em; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
nav.wk-horizontal ul li a { position: relative; }
nav.wk-horizontal ul li a::after { content: ''; position: absolute; left: 1em; bottom: .4em; right: 100%; height: 2px; background: rgb(255, 255, 255); -webkit-transition: right 500ms ease; transition: right 500ms ease; }
nav.wk-horizontal ul li:hover a::after, nav.wk-horizontal ul li.active a::after { right: 1em; }
nav.wk-horizontal li:hover{ background: transparent; }
nav.wk-horizontal ul .item-108 a::before { display: block; content: 'Unsere'; font-size: .6em; text-transform: none; letter-spacing: 0; font-weight: 400; }
nav.wk-horizontal ul .item-109 a::before { display: block; content: 'Unser'; font-size: .6em; text-transform: none; letter-spacing: 0; font-weight: 400; }
nav.wk-horizontal ul .item-110 a::before { display: block; content: 'Unsere'; font-size: .6em; text-transform: none; letter-spacing: 0; font-weight: 400; }


/*==== C O N T E N T ==========================================*/

.hero { position: relative; overflow: hidden; }
.hero img { display: block; width: 100%; max-width: none; min-width: 480px; }
.hero .title { display: none; background: rgba(197, 0, 11, 1); color: #ffffff; font-size: 1.2em; font-weight: 700; padding: 1em 0; }

main .breite { padding: 2em 0 3em; }
main { background: url(../img/haken.jpg) right center no-repeat; }

.page-101 main .breite { position: relative; padding: 3em 0 5em 3.5em; }
.page-101 main .breite::before { content: ''; display: block; position: absolute; top: 0; left: 0; background: rgb(197, 0, 11); width: 8px; height: 120px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding: 2em 0 3em; }

h1 { margin-bottom: 1em; color: rgb(94, 94, 94); font-weight: 700; }
h1 small { font-size: .6666em; font-weight: 400; }

.kontakte { margin: 0 -.7em; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.kontakte .item { width: 400px; margin: .7em; padding: 1em 1.5em; background: rgb(235, 235, 235); }
.kontakte .item p { margin: .5em 0; }
.kontakte .item .mail { font-size: .8em; padding-left: 1.4em; background: url(../img/envelope-red.svg) left .2em/1em no-repeat; }
.kontakte .item .tel { font-size: .8em; padding-left: 1.4em; background: url(../img/phone-red.svg) left .2em/1em no-repeat; }

.leistungen-block { border-top: 4px solid rgb(225, 225, 225); padding: 2em 0 3em; }
.leistungen-block h2 { margin-bottom: 1rem; font-size: 2.6667em; font-weight: 700; color: rgb(197, 0, 11); text-transform: uppercase; letter-spacing: .05em; }
.leistungen { margin: 4em -.5em 0 -.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.leistungen .item { margin: 0; border: .5em solid transparent; width: 100%; position: relative; overflow: hidden; }
.leistungen .item img { display: block; width: 100%; }
.leistungen .item img.border { border: 1px solid rgb(204, 204, 204); }
.leistungen .item figcaption { position: absolute; top: -100%; left: 0; width: 100%; height: 100%; font-size: 1.2em; text-transform: uppercase; letter-spacing: .05em; -webkit-transition: top 500ms ease-in-out; transition: top 500ms ease-in-out; background: rgba(197, 0, 11, .65); color: rgb(255, 255, 255); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 2em; }
.leistungen .item figcaption a { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; text-decoration: none; width: 100%; text-align: center; color: inherit; }
.leistungen .item:hover figcaption { top: 0px; }

.vertrieb-block { padding: 5em 0 7em; }
.vertrieb-block h2 { margin-bottom: 1rem; font-size: 2.6667em; font-weight: 700; color: rgb(197, 0, 11); text-transform: uppercase; letter-spacing: .05em; }
.vertrieb-block h3 { font-size: 1.3333em; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.vertrieb-block .link { margin-top: 2em; }

.schulungen-block { background: rgb(197, 0, 11); color: rgb(255, 255, 255); padding: 7em 0 9em; }
.schulungen-block h2 { font-size: 2.6667em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.schulungen-block ul { padding: 0; list-style: none; }
.schulungen-block ul li { margin-bottom: .2em; padding-left: 1.3em; background: url(../img/arrow-right.svg) left .2em/.8em no-repeat; }

.foto-block { position: relative; overflow: hidden; }
.foto-block img { display: block; width: 100%; max-width: none; min-width: 480px; }
.foto-block .text { padding: 1em 5% 1.5em; }
.foto-block .text strong { font-size: 1.6667em; }

.slogan { display: none; border-top: 1px solid rgb(225, 225, 225); }
.slogan .breite { padding: 3em 0; text-align: center; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.slogan strong { font-size: 1.25em; font-weight: 700; }

.image-list { margin: 4em -.5em 0 -.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.image-list .item { margin: 0; border: .5em solid transparent; width: 100%; position: relative; overflow: hidden; }
.image-list .item img { display: block; width: 100%; }
.image-list .item img.border { border: 1px solid rgb(204, 204, 204); }
.image-list .item figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: top 500ms ease-in-out; transition: top 500ms ease-in-out; background: rgba(40, 40, 40, .65); color: rgb(255, 255, 255); padding: 2em; }
.image-list .item figcaption span { width: 100%; text-align: center; color: inherit; -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; font-size: 1.1em; text-transform: uppercase; letter-spacing: .05em; }
.image-list .item:hover figcaption { top: -100%; }


/*==== F O O T E R ============================================*/

footer { background: rgb(197, 0, 11); color: rgb(255, 255, 255); }
footer .breite { padding: 2em 0 3em; }
footer .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
footer .flex img { display: block; }
footer .flex .container { padding: 6%; }

footer a { color: inherit; }

footer .nav { margin: 2.5em 0; padding: 0; }
footer .nav li { display: block; margin: 0 .7em .2em 0; }
footer .nav li:last-of-type { margin-right: 0; }
footer .nav li a { text-decoration: none; }

/* GoTop-Link */
#gotop { opacity: 1; -webkit-transition: opacity 500ms ease; transition: opacity 500ms ease; position: fixed; bottom: 10px; right: 10px; z-index: 1000; width: 40px; height: 40px; border-radius: 50%; background: rgb(197, 0, 11) url("../img/symbols.svg") center bottom/40px 120px no-repeat; -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); }
#gotop.hide { z-index: -1; opacity: 0; }


/* ==== M E D I A  Q U E R I E S ==============================*/

@media only screen and (min-width: 568px){
    .leistungen .item { width: 50%; }
    .image-list .item { width: 50%; }
}

@media only screen and (min-width: 768px){
    #menueToggle { display: none; }
    .hiddenmobile { display: block; }

    header .breite { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

    figure.left { float: left; margin: 0 1.5em 0 0; max-width: 40%; }
    figure.right { float: right; margin: 0 0 0 1.5em; max-width: 40%; }

    .hero .title { position: absolute; left: 0; bottom: 0; right: 0; background: rgba(197, 0, 11, .65); font-size: 1.4em; }
    .foto-block .text { position: absolute; bottom: 0; right: 0; width: 50%; padding: 1.5em 3.5em 1.5em 2em; background: rgba(255, 255, 255, .75); }
    .slogan { font-size: 1.2em; }
}

@media only screen and (min-width: 1024px){
    #logo { width: 11em; }
    .top-row { display: block; }
    .mehrspaltig { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .mehrspaltig li { width: 50%; display: inline-block; }

    .hero .title { display: block; }
    .leistungen .item { width: 33.33%; }
    .image-list .item { width: 33.33%; }
    .slogan { display: block; }

    footer .flex { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
    footer .flex .container { min-width: 590px; }
    footer .flex .image-container { overflow: hidden; position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
    footer .flex .image-container img { position: absolute; right: 0; height: 100%; max-width: none; }
}

@media only screen and (min-width: 1280px){
    nav.wk-horizontal ul { font-size: 1.5556em; }
    .mehrspaltig li { width: 33.33%; }

    .leistungen .item { font-size: 1.4em; }
    .image-list .item { width: 25%; }

    .foto-block .text { padding: 3em 7em 3em 4em; }
    .slogan { font-size: 1.3333em; }
}