@charset "UTF-8";

/*

Copyright © 2024 krähativ design, Werbeagentur Heidenheim. All rights reserved.
Adapted for Blue Rabbit BBQ in 2024
Website http://www.kraehativ-design.de

*/

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

@import url('../css/all.min.css'); /* FontAwesome */

/* alfa-slab-one-regular - latin */
@font-face {
    font-family: 'Alfa Slab One';
    font-style: normal;
    font-weight: 400;
    src: url('../webfonts/alfa-slab-one-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* montserrat-100 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: url('../webfonts/montserrat-v26-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-200 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: url('../webfonts/fonts/montserrat-v26-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-300 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('../webfonts/fonts/montserrat-v26-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-regular - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../webfonts/fonts/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-500 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../webfonts/fonts/montserrat-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-600 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../webfonts/fonts/montserrat-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-700 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../webfonts/fonts/montserrat-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-800 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('../webfonts/fonts/montserrat-v26-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-900 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('../webfonts/fonts/montserrat-v26-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  :root {
    --headlines: normal normal 500 20px/1.5 Alfa Slab One; /* <--- EINFÜGEN:  Hauptschriftart für Überschriften ...  */
    --copytext: normal normal 500 16px/1.5 Montserrat ; /* <--- EINFÜGEN:  Schriftart für Copytext ...  */
    --hauptfarbe: #848484;
    --gruen: #77B254;
  }
   
  body {
    font: var(--copytext);
  }



.icons-icon,
.box,
.input-group,
.btn-prime,
.btn-prime:hover,
.btn-prime:active,
.btn-prime:focus,
.popover,
.dropin,
.dropin-handler {
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    -ms-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    border-radius: 100px;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font: var(--headlines);
}

h1,
.h1 {
	margin-bottom: 40px;
    line-height: 1.4;
    font-size: 22px;
    color: #fff;
    padding: 0;
}

h1 span,
.h1 span {
    font-weight: 300;
    font-size: 30px;
    color: var(--hauptfarbe);
}

h1 span>strong,
.h1 span>strong {
	text-transform: uppercase;
    font-weight: 400;
    font-size: 40px;
    color: var(--hauptfarbe);
}

.headline-dark,
h1 .headline-dark>strong,
.h1 .headline-dark>strong {
	text-transform: uppercase;
    font-weight: 400;
    font-size: 40px;
    color: #242424;
}

h3,
.h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    margin-bottom: 15px;
    padding: 0;
    color: #fff;
    word-break: break-all;
}

.icons h3,
.icons .h3 {
    margin-bottom: 0;
}

h3 span,
.h3 span {
    font-size: 18px;
    font-size: 1.125rem;
    display: block;
}

h6,
.h6 {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    margin-top: 30px;
    margin-bottom: 15px;
    padding: 0;
}

.thin {
	font-size: 14px;
	font-weight: 300;
}

p {
	margin-bottom: 0;
	font-weight: 300;
    font-size: 18px;
    color: #fff;
}

p~p {
    margin-top: 1rem;
}

a,
a:hover,
a:active,
a:focus {
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    -ms-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
    color: var(--hauptfarbe);
    text-decoration: none;
}

a:hover {
    color: #242424;
}

.bg-brown a:hover {
    color: var(--hauptfarbe);
}

a.reverse {
    color: var(--hauptfarbe);
}

a.reverse:hover {
    color: var(--hauptfarbe);
}

#kontakt a {
    color: #fff;
}

#kontakt a:hover {
    color: var(--hauptfarbe);
}

@media screen and (max-width: 767px) {
    .kontakt-strong {
        padding-top:35px;
    }
    p.t-dark, .t-dark li {
        font-weight: 400;
        color: #fff!important;
    }
}



.nav-link a{
    font-family: 'Alfa Slab One'!important;
}

header {
    position: absolute;
    height: auto;
    width: 100%;
    z-index: 5;
    left: 0;
    top: 0;
}

header .navbar {
    padding: 0;
}

@media screen and (max-width: 991px) {
    header .navbar .navbar-nav {
        -ms-flex-direction: unset;
        flex-direction: unset;
        padding-right: 15px;
        -ms-flex-wrap: wrap;
        padding-left: 15px;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 767px) {
    header .navbar .navbar-nav {
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 992px) {
    header .navbar .navbar-nav {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media screen and (min-width: 992px) {
    header .navbar .navbar-nav .w-100 {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    header .navbar .navbar-nav .nav-item {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        text-align: center;
        border: 1px solid var(--hauptfarbe);
    }
    header .navbar .navbar-nav .nav-item.active>a {
        background-color: var(--hauptfarbe);
        color: #fff;
    }
}

@media screen and (max-width: 767px) {
    header .navbar .navbar-nav .nav-item {
        width: 100%;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        text-align: left;
    }
}

header .navbar .navbar-nav .nav-link {
    white-space: no-wrap;
    padding: 0.3125rem;
    font-weight: 300;
    color: #fff;
}

header .navbar .navbar-nav .nav-link:hover {
    color: var(--hauptfarbe);
}

@media screen and (max-width: 991px) {
    header .navbar .navbar-nav .nav-link {
        background-color: var(--hauptfarbe);
        color: #242424!important;
        padding: 0.9375rem;
    }
    header .navbar .navbar-nav .nav-link:hover {
        background-color: var(--hauptfarbe);
        color: #fff!important;
    }
}

header .brand {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    width: auto;
    position: relative;
    padding: 2.5rem 1.25rem;
    background-color: #fff;
}

header .brand img {
    width: 170px;
}

header .brand-mobile {
    margin: 15px;
    width: 150px;
}

@media screen and (min-width: 992px) {
    header .brand-mobile {
        display: none;
    }
}

header .brand-desktop {
    display: none;
}

@media screen and (min-width: 992px) {
    header .brand-desktop {
        display: inline-block;
    }
}

* ::-moz-selection {
    background: var(--hauptfarbe);
    color: #fff;
}

* ::selection {
    background: var(--hauptfarbe);
    color: #fff;
}

*:focus {
    outline: none !important;
}

html,
body {
    position: relative;
    overflow-x: hidden;
}

body {
    font-size: 18px;
    font-size: 1.125rem;
    font-family: 'Montserrat';
    font-weight: 400;
    line-height: 2;
    color: #fff;
    background-color: #242424;
    letter-spacing: 0.04em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content {
    -webkit-transition: padding-bottom ease-out 0.2s;
    -moz-transition: padding-bottom ease-out 0.2s;
    -ms-transition: padding-bottom ease-out 0.2s;
    transition: padding-bottom ease-out 0.2s;
    position: relative;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
}

.content.less-bottom {
    padding-bottom: 5rem;
}

.content-small {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#impressum .content,
#datenschutz .content,
#error404 .content,
#shop>div,
#agb>div {
    padding-bottom: 3.5rem;
}

.impressum a:hover {
    color: #fff;
}

.bg-brown {
    background-color: var(--hauptfarbe);
    color: #fff;
}

.bg-brown>div>div>h1>span,
.bg-brown>div>div>.h1>span {
    color: #fff;
}

.bg-brown>div>div>div>div>p {
    color: #fff;
}

.bg-gray {
    background-color: var(--hauptfarbe);
}

.bg-grün {
	background-color: var(--hauptfarbe);
}

.bg-grün>div>div>h2, .bg-grün>div>div> {
	color: #fff !important;
}

.bg-get-bg {
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-get-bg img {
    display: none;
}

.show-content {
    display: none;
}

.show-team .box-wrapper {
    margin-top: -0.9375rem;
}

#hobel {
    top: -webkit-calc(100% + 6px);
    top: -moz-calc(100% + 6px);
    top: calc(100% + 6px);
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    position: absolute;
    left: 75%;
    width: 520px;
}

footer {
    background-color: #242424;
    padding: 0 2.8125rem 3.125rem;
}

footer p,
footer a {
    font-size: 14px;
    font-size: 0.875rem;
    color: #fff;
    margin-bottom: 0;
}

footer a:hover {
    color: var(--hauptfarbe);
}

footer p,
footer .wakd {
    margin-top: 3.125rem;
}

footer .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
    margin-top: 3.125rem;
}

footer .navbar-nav .nav-item {
    position: relative;
}

footer .navbar-nav .nav-item+.nav-item {
    margin-left: 0.9375rem;
}

footer .navbar-nav .nav-item .nav-link {
    padding: 0;
}

.footer-rechtliches p,
.footer-rechtliches a {
    font-weight:600;
}

.btn-prime,
.btn-prime:hover,
.btn-prime:active,
.btn-prime:focus {
    font-size: 18px;
    font-size: 1.125rem;
    font-family: 'Alfa Slab One';
    padding: 0.8125rem 1.5625rem;
    margin: 0;
    margin-top: 3.125rem;
    font-weight: 300;
    color: #242424;
    background-color: #fff;
    border-radius: 0.6rem;
    line-height: 1.1;
    display: block;
}

.box .btn-prime {
    margin: 0 auto;
    margin-top: 9px;
}



.box:hover .btn-primary {
    opacity: 1;
}

.btn-prime:hover,
.btn-prime:focus:hover {
    background-color: #242424;
    color: #fff;
}

.btn-prime:active {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

.btn.show-more i {
    -webkit-transition: transform ease-out 0.2s;
    -moz-transition: transform ease-out 0.2s;
    -ms-transition: transform ease-out 0.2s;
    transition: transform ease-out 0.2s;
}

.btn.show-more.active i {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.btn.add-product, .btn.remove-product{
	background-color: #fff !important;
    color: var(--hauptfarbe) !important;
	font-size:24px !important;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.2) !important;
	line-height: 18px;
    margin-bottom: 20px;
	cursor:pointer;
}

.intro {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    height: 40vh;
    background-color: #fff;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.startseite .intro {
    height: 100vh;
}

.intro-text-wrapper {
    -webkit-transform: translate(-50%, -50%) scale(0.6);
    -ms-transform: translate(-50%, -50%) scale(0.6);
    transform: translate(-50%, -50%) scale(0.6);
    transition: all ease-in 0.3s;
    transform-origin: top center;
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-block;
    text-align: center;
    color: #fff;
    z-index: 1;
    opacity: 0;
    margin-top: 6.25rem;
}

.intro-text-wrapper.show {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    margin-top: 0;
}

.intro-scroll-down {
    text-shadow: 0px 3px 6px #000000BF;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
	text-transform: uppercase;
	font-family: "Alfa Slab one";
    position: absolute;
	font-size: 1.5rem;
	font-weight: 300;
    bottom: 3.125rem;
    font-size: 50px;
    line-height: 0.8;
    color: #fff;
	z-index: 1;
    left: 50%;
	top: 50%;
}

@media screen and (max-width: 981px) {
    .intro-scroll-down {
        text-shadow: 0px 3px 6px #000000BF;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        text-transform: uppercase;
        font-family: "Alfa Slab one";
        position: absolute;
        font-size: 1.5rem;
        font-weight: 300;
        bottom: 3.125rem;
        font-size: 50px;
        line-height: 0.8;
        color: #fff;
        z-index: 1;
        left: 50%;
        top: 70%;
    }
}

.intro-scroll-down>span {
	text-shadow: 0px 3px 6px #000000BE;
	text-transform: none;
	font-weight: 500;
    font-size: 30px;
}

#kontaktformular {
    margin-top: 4.375rem;
    margin-bottom: 4.375rem;
}

.custom-checkbox {
    padding-left:25px;
}

form .g-recaptcha {
    margin-top: 1.25rem;
}

form .btn-prime,
form .btn-prime:hover,
form .btn-prime:active,
form .btn-prime:focus {
    margin-top: 1.875rem;
}

.input-group {
    margin-bottom: 1rem;
    margin-bottom: 30px;
}

.form-control {
    font-size: 16px;
    font-size: 1rem;
    -webkit-transition: all ease-out 0.2s;
    -moz-transition: all ease-out 0.2s;
    -ms-transition: all ease-out 0.2s;
    transition: all ease-out 0.2s;
    padding: 0.75rem 1.25rem;
    line-height: 2;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    background-color: #242424;
    height: auto;
}

.form-control,
.form-control:hover,
.form-control:active,
.form-control:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

.form-control::-webkit-input-placeholder {
    color: #fff;
}

.form-control:-moz-placeholder {
    color: #fff;
}

.form-control::-moz-placeholder {
    color: #fff;
}

.form-control:-ms-input-placeholder {
    color: #fff;
}

.form-control:focus,
.form-control:hover:focus {
    border-color: #fff;
    background-color: #fff;
    color: #242424;
}

.custom-select {
    -webkit-transition: all ease-out 0.2s;
    -moz-transition: all ease-out 0.2s;
    -ms-transition: all ease-out 0.2s;
    transition: all ease-out 0.2s;
    position: relative;
    height: 3.625rem;
    border: 1px solid #fff;
    background-color: #fff;
    padding: 0 1.25rem;
    line-height: 2;
    border-radius: 0.1875rem;
    background-image: none;
}

.custom-select:focus,
.custom-select:hover:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    border-color: #fff;
    background-color: #fff;
    color: #242424;
}

.custom-select-icon {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    right: 1.25rem;
    top: 50%;
    color: #242424;
    z-index: 99;
}

.g-recaptcha {
    margin-top: 1.25rem;
}

.custom-checkbox .custom-control-label {
    line-height: 1.3;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0.1875rem;
    background-color: transparent;
    border: 2px solid #fff;
}

.custom-checkbox .custom-control-label::before,
.custom-checkbox .custom-control-label::after {
    top: 0;
}

.custom-checkbox .custom-control-input:active~.custom-control-label::before {
    background-color: #242424;
}

.custom-checkbox .custom-control-input:focus~.custom-control-label::before {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--hauptfarbe);
    border-color: var(--hauptfarbe);
}

.error-message-wrapper {
    background-color: var(--hauptfarbe);
    color: #fff;
    padding: 3.125rem 1.875rem;
    margin-bottom: 3.125rem;
    border-radius: 0.1875rem;
}

.error-message-wrapper h3 {
    text-align: left;
    color: #fff;
}

.error-message-wrapper p {
    color: #fff;
    margin-bottom: 0;
}

.success-wrapper {
    padding: 3.125rem 1.875rem;
    border-radius: 0.1875rem;
    background-color: var(--hauptfarbe);
}

.success-wrapper h3,
.success-wrapper p {
    text-align: left;
    color: #fff;
}

.success-wrapper h3 {
    margin-bottom: 1.875rem;
}

.success-wrapper p {
    margin-bottom: 0;
}

.success-wrapper .btn.next {
    color: #fff;
}

textarea {
    min-height: 58px;
}

.input-group-text {
    font-size: 21px;
    font-size: 1.3125rem;
    background-color: var(--hauptfarbe);
    border-color: var(--hauptfarbe);
    color: #fff;
    padding: 0.5rem 0.625rem 0;
    line-height: 2;
    border-radius: 0.1875rem;
    display: block;
    width: 58px;
}

.box {
    height: -webkit-calc(100% - 30px);
    height: -moz-calc(100% - 30px);
    height: calc(100% - 30px);
    display: block;
    margin: 15px 0;
    overflow: hidden;
    border-radius: 48px;
}

.box-wrapper {
    margin-top: 3.125rem;
    border-radius: 48px;
}

.box-img {
    position: relative;
    display: block;
    height: 350px;
    overflow: hidden;
}

.box-img::before {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    -ms-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hauptfarbe);
    opacity: 0;
}

.box-img:hover::before {
    background-color: var(--hauptfarbe);
    opacity: 0.6!important;
}

.box-img::after {
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    -ms-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
    font-size: 30px;
    content: "\f055";
    font-family: "Font Awesome 5 Pro";
    font-weight: 800;
    color: #fff;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box-img:not(.no-effect):hover::before {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 1;
}

.box-img:not(.no-effect):hover::after {
    opacity: 1;
}

.box-text {
    font-size: 15px;
    color: #fff;
    padding: 1.875rem;
    background-color: #242424;
    height: 100%;
} 

.box-text>p {
    font-size: 15px;
    text-align:center;
}   
 
.box-text h2 {
    text-align:center;
    font-size: 30px;
    color: var(--hauptfarbe);
} 

.box-text>a>h3 {
    font-size: 18px;
}

/* .box a:hover {
    opacity:0.8;
} */

.icons-wrapper {
    margin-top: 1.25rem;
}

.icons-wrapper [class*=col-] {
    position: relative;
}

.icons-wrapper [class*=col-]+[class*=col-]::before {
    font-size: 42px;
    font-size: 2.625rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    content: "";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 85px;
    color: #242424;
    line-height: 1;
}

.icons-icon {
    position: relative;
    width: 120px;
    max-width: 100%;
    height: 120px;
    border-radius: 50%;
    background-color: #242424;
    border: 4px solid #fff;
    color: var(--hauptfarbe);
    margin-right: auto;
    margin-left: auto;
    margin-top: 3.125rem;
    margin-bottom: 1.875rem;
}

.icons-icon i {
    font-size: 42px;
    font-size: 2.625rem;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
}

.icons-text {
    text-align: center;
    white-space: nowrap;
}

.icons-wrapper-inner:hover {
    cursor: pointer;
}

.icons-wrapper-inner:hover>.icons-icon {
    background-color: #fff;
}

@media only screen and (min-width: 1488px) {
    #workflow>div>div.container-fluid>div>div>div>.icons-wrapper-inner::after {
        font-family: "Font Awesome 5 Pro";
        font-size: 42px;
        content: "\f178";
        font-weight: 300;
        color: var(--hauptfarbe);
        position: absolute;
        right: -20px;
        top: 28%;
    }
}

#workflow>div>div.container-fluid>div>div>div:last-of-type>.icons-wrapper-inner::after {
    content: "";
}

.data-content {
    font-family:'Montserrat';
}

#impressum h3,
#datenschutz h3,
#error404 h3 {
    padding-top: 50px;
}

#impressum h2,
#datenschutz h2,
#error404 h2 {
    padding-top: 70px;
}


/* Modal */

.modal-full {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
}

.modal-full .icon-close {
    position: fixed;
    right: 15px;
    top: 15px;
    padding: 15px;
    z-index: 1;
}

.modal-full .icon-close,
.modal-full .icon-close:hover,
.modal-full .icon-close:active,
.modal-full .icon-close:focus {
    opacity: 1 !important;
    color: #fff;
}

.modal-full .icon-close:hover {
    color: #fff;
}

@media screen and (min-width: 768px) {
    .modal-full .icon-close {
        font-size: 32px;
        font-size: 2rem;
        text-shadow: none;
        color: var(--hauptfarbe);
        right: 30px;
        top: 30px;
    }
}

.modal-dialog {
    max-width: 100%;
    margin: 0;
}

.modal-content {
    border-radius: 0;
    border: 0 none;
}

.modal-body {
    padding: 0;
    background-color: #242424;
}

.modal-img img.img-responsive {
    width: 100%!important;
    max-width: 100%!important;
}

.modal-img-wrapper-header {
    border-radius: 0.1875rem;
    margin-bottom: 3.125rem;
    text-align: center;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .modal-img-wrapper-header {
        margin-bottom: 5rem;
    }
}

.modal-img-wrapper-header img {
    border-radius: 0.1875rem;
}

.modal-text {
    margin-bottom: 3.125rem;
}

.modal-text p:last-child {
    margin-bottom: 0;
}

.modal-footer {
    border-top-color: #242424;
}

.maps {
    -webkit-transition: all ease-out 0.6s;
    -moz-transition: all ease-out 0.6s;
    -ms-transition: all ease-out 0.6s;
    transition: all ease-out 0.6s;
    position: relative;
    width: 100%;
    height: 250px;
    padding: 0;
    margin: 0;
    overflow: visible;
    z-index: 10;
}

.maps-iframe-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0 none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.maps-iframe {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 500px;
    border: 0 none;
    padding: 0;
    margin: 0;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    -webkit-transition: all ease-out 0.2s;
    -webkit-backface-visibility: hidden;
}

.open .maps-iframe {
    filter: gray(0);
    -webkit-filter: grayscale(0);
}

.maps-open {
    -webkit-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    position: absolute;
    left: 50%;
    background-color: #242424;
    border: 1px solid #fff;
    padding: 10px 15px !important;
    top: -115px;
}

.maps-open:hover {
    background-color: #fff;
    border: 1px solid #fff;
    padding: 10px 15px !important;
    top: -115px;
}

.maps-open:hover .fa-maps-open {
    color:#242424;
}

.maps-open:active .fa-maps-open {
    color:#242424;
}

.maps-open:active:hover .fa-maps-open {
    color:#fff;
}

.maps-open:focus .fa-maps-open {
    color:#242424;
}

.maps-open:focus:hover .fa-maps-open {
    color:#fff;
}

.maps.open {
    height: 500px;
}

.fa-maps-open {
    color:#fff;
    font-size: 40px;;
}

.maps-open-text {
    margin-bottom:0px;
}

.maps-open:hover .maps-open-text {
    color:#242424;
}

.maps-open:active .maps-open-text {
    color:#242424;
}

.maps-open:active:hover .maps-open-text {
    color:#242424;
}

.maps-open:focus .maps-open-text {
    color:#242424;
}

.maps-open:focus:hover .maps-open-text {
    color:#242424;
}


/*# sourceMappingURL=style.min.css.map */

.img-fluid {
    max-width: unset;
    height: unset;
}

.image-ref {
    height: 100%;
    width: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-control-prev {
    left: -150px;
}

.carousel-control-next {
    right: -150px;
}

.carousel-control-next,
.carousel-control-prev {
    color: var(--hauptfarbe);
    opacity: 1;
    font-size: 24px;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1;
}

.carousel-control-next:hover,
.carousel-control-prev:hover {
    color: #242424;
}

@media screen and (max-width: 1199px) {
    .carousel-control-prev {
        left: 0;
    }
    .carousel-control-next {
        right: 0;
    }
    .carousel-control-next,
    .carousel-control-prev {
        color: #fff;
    }
}


/* Responsive phips */

@media screen and (max-height: 720px) {
    #intro>div>h2 {
        font-size: 25px;
    }
    #intro>div>h2>span {
        font-size: 45px;
    }
    .h1 span {
        font-size: 30px;
    }
    header .brand {
        padding: 1.5rem 0.25rem;
    }
    #mainNav>ul>a>img {
        width: 150px;
        height: auto;
    }
    #intro>div {
        margin-top: 20px;
    }
}

@media (max-height: 720px) and (min-width: 720px) {
    #intro>div {
        width: 540px;
    }
}

@media screen and (max-width: 991px) {
    header .brand-mobile {
        width: auto;
        margin-top: 0;
    }
    .navbar-toggler i {
        color: #fff;
        font-size: 40px;
    }
    #intro>div>h2 {
        font-size: 25px;
    }
    #intro>div>h2>span {
        font-size: 45px;
    }
    .h1 span {
        font-size: 30px;
    }
    .modal-img-wrapper-header>img {
        height: auto;
        width: 100%;
    }
    #hobel {
        display: none;
    }
    header .brand img {
        width: unset;
        height: 70px;
    }
    .intro-text-wrapper {
        margin-top: 50px;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.instagram-image {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#kontakt>div>div>div:nth-child(4)>div>p {
    word-break: break-all;
}

.impressum {
    word-break: break-word;
}

.modal-img-wrapper-header>img {
    width: 100%;
}

.navbar {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0px 3px 6px #00000029;
    height: 173px;
}

header .navbar .navbar-nav .nav-link {
	font-family: 'Alfa Slab One';
	text-transform: uppercase;
	margin-bottom: -18px;
    color: var(--hauptfarbe);
}

@media only screen and (max-width: 991px) {
    #mainNav {
        margin-top: -15px;
    }
    .navbar-toggler i {
        color: var(--hauptfarbe);
    }
}

@media only screen and (min-width: 1200px) {
    #kontakt>div>div>div:nth-child(2)>div,
    #kontakt>div>div>div.row>div {
        justify-content: space-between;
        display: flex;
    }
    #kontakt>div>div>div:nth-child(1)>div:nth-child(2),
    #kontakt>div>div>div.row>div:nth-child(2) {
        position: relative;
        right: -655px;
        top: -66px;
    }
}

@media only screen and (max-width: 1199px) {
    #kontakt>div>div>div:nth-child(2)>div>div {
        margin-bottom: 50px;
    }
    #kontakt>div>div>div:nth-child(2)>div>div:last-of-type {
        margin-bottom: 0;
    }
    #kontakt>div>div>div:nth-child(1)>div:nth-child(2) {
        margin-bottom: 60px;
    }
}

#kontakt>div>div>div:nth-child(1)>div:nth-child(2)>i {
    position: relative;
    top: 4px;
}

#kontakt>div>div>div:nth-child(2)>div>div>i {
    margin-right: 5px;
    color: var(--hauptfarbe);
}

.karriere-card {
    border-radius: 5px !important;
    background: #fff;
    border: 0;
}

.karriere-card>.card-header {
    background-color: #fff;
    padding-bottom: 13px;
    border-radius: 5px;
    position: relative;
}

.karriere-card>.card-header>h2>button {
    padding-right: 60px;
}

.karriere-card {
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

.karriere-card>.card-header>h2>button,
.karriere-card>.card-header>h2>button:active,
.karriere-card>.card-header>h2>button:focus {
    text-decoration: none;
    color: #242424;
}

.karriere-card>.card-header>h2>button:hover {
    text-decoration: none;
    color: var(--hauptfarbe);
}

.karriere-card-icon {
    background-color: var(--hauptfarbe);
    justify-content: center;
    position: absolute;
    text-align: center;
    font-size: 21px;
    padding: 13px;
    height: 100%;
    color: #fff;
    width: 60px;
    right: 0;
    top: 0;
}

.karriere-card-icon:hover {
    cursor: pointer;
}

.hiddenref {
    transition-duration: 0.5s;
    text-decoration: none;
    color: #fff;
}

.hiddenref:hover {
    text-decoration: none;
    color: var(--hauptfarbe);
}

.karriere-card-icon>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 767px) {
    .karriere-card>.card-header>h2>button {
        text-align: left !important;
    }
    .modal-body .btn-prime{
        margin-top: 10px;
        font-size: 16px;
    }

}

.popover>.arrow::before {
    border: 0;
}

.popover {
    font-family: 'Open Sans';
    border-radius: 0;
    max-width: 350px;
    margin-top: 30px;
    font-size: 18px;
    border: 0;
}

.popover-body {
    padding: 20px;
}


/* dropin */

.dropin-handler:hover {
    cursor: pointer;
}

.dropin.moved {
    transform: translateX(100%) translateY(-300%);
}

.dropin {
    transition-duration: 0.5s;
    transform: translateY(-300%);
    position: fixed;
    z-index: 1000;
    top: 50%;
    right: 0;
}

@media only screen and (max-height: 500px) {
    .dropin.moved {
        transform: translateX(100%) translateY(-100%);
    }
    .dropin {
        transform: translateY(-100%);
    }
}

.dropin-body {
	font-family: 'Alfa Slab One';
	background-color: #fff;
	/* border: 1px solid #707070; */
	border-right: 0;
    position: relative;
	padding: 12px 20px;
	font-weight: 500;
    height: 60px;
}

@media only screen and (max-width: 767px) {
    .dropin-body {
        font-family: 'Alfa Slab One';
        background-color: #fff;
        /* border: 1px solid #707070; */
        border-right: 0;
        position: relative;
        padding: 12px 10px;
        font-weight: 500;
        height: 60px;
    }
    .dropin-body p {
        font-size: 14px;
        font-weight: 500;
    }
}

@media only screen and (max-width: 560px) {
    #oeffnungszeiten-dropin {
        width: calc(100% - 77px);
    } 
}


.dropin-body>p {
    margin-bottom: 20px;
    line-height: 1.6;
}

@media only screen and (max-height: 981px) {
    .dropin-body>p {
        font-size:14px!important;
    }
}

.dropin-body>p>a {
	font-size: 26px;
    color: #242424;
}

.dropin-body>p>a:hover {
    color: var(--hauptfarbe);
}

.dropin-body>hr {
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: none;
    background: none;
}

.dropin-handler {
    border-radius: 16px 0px 0px 16px;
	box-shadow: 0px 3px 6px #00000029;
    transition-duration: 0.5s;
	background-color: var(--hauptfarbe);
    border: 1px solid var(--hauptfarbe);
    position: absolute;
    font-size: 30px;
	border-right: 0;
    height: 60px;
    color: #242424;
    width: 77px;
    right: 100%;
    top: 0;
}

.dropin-handler i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#oeffnungszeiten-dropin p {
    color:#242424;
}

#intro>a>span {
    font-size: 40px;
    font-weight: 600;
    color: #242424;
}

#intro>a>span>i {
    color: var(--hauptfarbe);
}

#intro>a {
    bottom: 100px;
}

#intro>a:hover,
#intro>a>span:hover,
#intro>a>span>a:hover {
    cursor: pointer;
}

.intro-scroll-down {
    justify-content: center;
    /* text-align: center; */
    width: 100%;
    margin-left:180px;
    font-size: 80px;
}

.intro-scroll-down span {
    font-size: 70px;
}

@media only screen and (max-width: 981px) {
    .intro-scroll-down {
        justify-content: center;
        /* text-align: center; */
        width: 100%;
        margin-left:0px;
        font-size: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .intro-scroll-down span {
        font-size: 25px;
    }
}

@media only screen and (max-width: 740px) {
    #intro>a>span {
        font-size: 30px;
    }
}

.nav-left,
.nav-right {
    justify-content: space-between;
    display: flex;
    width: 100%;
}

header .navbar .navbar-nav .nav-link {
    font-size: 25px;
}

@media only screen and (max-width: 1500px) {
    header .navbar .navbar-nav .nav-link {
        font-size: 22px;
    }
}

@media only screen and (max-width: 1350px) {
    header .navbar .navbar-nav .nav-link {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1100px) {
    header .navbar .navbar-nav .nav-link {
        font-size: 16px;
    }
}

@media only screen and (max-width: 1030px) {
    header .navbar .navbar-nav .nav-link {
        font-size: 15px;
    }
}

.nav-center {
    margin: 30px 0px 0px 0px;
}

header .brand {
    background-color: unset;
    box-shadow: unset;
}

header .brand>img {
    margin-bottom: -143px;
    width: 330px;
    margin-left: 50px;
}

@media only screen and (max-width: 1199px) {
    header .brand>img {
        width: 200px;
    }
    .nav-center {
        margin: 30px 15px 0 15px;
    }
}

@media only screen and (max-width: 991px) {
    .nav-left,
    .nav-right {
        display: block;
    }
    .nav-center {
        margin: 0;
    }
    header .brand {
        justify-content: center;
        text-align: center;
    }
    body>header>nav>div {
        justify-content: center !important;
        text-align: center !important;
    }
    body>header>nav>div>button {
        position: absolute;
        top: 52px;
        right: 0;
    }

    header .brand>img {
        margin-bottom: 0px;
        width: 330px;
        margin-left: 6px;
    }
}

@media only screen and (max-width: 485px) {
    body>footer>div>div {
        justify-content: center;
        text-align: center;
    }
    body>footer>div>div>a,
    body>footer>div>div>ul {
        margin-right: auto;
        margin-left: auto;
    }
}

.anim-load {
    transition-duration: 0.6s;
    bottom: 200px;
    opacity: 0;
}

.anim-load-now {
    bottom: 100px;
    opacity: 1;
}


/*shop*/

.hr {
    background-color: #999;
    margin-top: 60px;
    width: 100%;
    height: 1px;
}

.shop-item-info>h4>span {
    padding-left: 10px;
    font-size: 18px;
    color: #999;
}

.shop .btn-prime:hover,
.shop .btn-prime:focus:hover {
    background-color: #242424;
    color: #fff;
}

/* .shop #kontaktformularForm>div>div>div>div>div,
.shop #kontaktformularForm>div.input-group.textarea>div>div {
    background-color: #666;
    border-color: #666;
} */

.custom-control-label::after {
    border: 1px solid #4E4E4E;
}

#bestellung>div>p {
    color: #fff;
}

.shop #nachricht {
    height: 120px;
}

#order-form-product {
    transition-duration: 1s;
    border: 1px solid #fff;
}

.form-highlight {
    transition-duration: 0;
    border: 1px solid var(--hauptfarbe) !important;
    background-color: var(--hauptfarbe);
}

@media only screen and (max-width: 991px) {
    #mainNav>ul>div.nav-right>li:nth-child(4) {
        display: none !important;
    }
    #mainNav>ul>div.nav-right>li:nth-child(5) {
        display: block !important;
    }
}

@media only screen and (min-width: 992px) {
    #mainNav>ul>div.nav-right>li:nth-child(4)>a {
        color: var(--hauptfarbe);
    }
    #mainNav>ul>div.nav-right>li:nth-child(4)>a:hover {
        color: #242424;
    }
    #mainNav>ul>div.nav-right>li:nth-child(5) {
        display: none !important;
    }
    #mainNav>ul>div.nav-right>li:nth-child(4) {
        display: block !important;
    }
    #mainNav>ul>div.nav-right>li:nth-child(4)>a>i {
        margin-right: 5px;
    }
}

@media only screen and (min-width: 1440px) {
    #mainNav>ul>div.nav-right>li:nth-child(4) {
        position: absolute;
        right: 50px;
    }
    #mainNav>ul>div.nav-right>li:nth-child(4)>a>i {
        margin-right: 10px;
    }
}


/* new Instafeed */

@media only screen and (max-width: 991px) {
    #instagram-feed>div>a>img {
        width: 48% !important;
    }
}

/* new header */

.startseite-carousel-inner>.carousel-item {
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
}

.intro-startseite .carousel-control-prev,
.intro-startseite .carousel-control-next {
    display: none;
}

.intro-startseite .carousel-indicators>li {
    background-color: transparent;
    border: 3px solid var(--hauptfarbe);
    transition-duration: 0.3s;
    border-radius: 50%;
    margin: 0 12px 23px 0;
    height: 17px;
    width: 17px;
}

.intro-startseite .carousel-indicators>li.active {
    background-color: var(--hauptfarbe);
}

/* @media only screen and (min-width: 992px) {
	.intro-portrait {
		margin-top: -200px;
	}
} */

/* .intro-portrait {
    max-width:700px;
} */

/* new misc */

.t-white {
	color: #fff !important;
}

.t-dark {
	color: #242424 !important;
}

/* cookie */

#CybotCookiebotDialogHeader {
    display: none !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background-color: var(--hauptfarbe) !important;
    border-color: var(--hauptfarbe) !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
    border-color: var(--hauptfarbe) !important;
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
    border: 2px solid var(--hauptfarbe) !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.active {
    border-bottom: 1px solid var(--hauptfarbe) !important;
    color: var(--hauptfarbe) !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
    color: var(--hauptfarbe) !important;
}

#CybotCookiebotDialogTabContent input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: var(--hauptfarbe) !important;
}

#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover, #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover, #CybotCookiebotDialogBodyLevelButtonsSelectPane label:not([for=CybotCookiebotDialogBodyLevelButtonNecessary]) .CybotCookiebotDialogBodyLevelButtonDescription:hover, #CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover {
    color: var(--hauptfarbe) !important;
}

/* Popup Modal */

.modal#popupModal.fade .modal-dialog {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    margin: 0 auto;
  }
  .modal#popupModal.fade .modal-footer .btn-prime {
    margin: 0;
  }
  .modal#popupModal .icon-close {
    stroke: #fff;
  }


  /* Intro Slider – Deckkraft Bulletpoints */

  .carousel-indicators li {
    opacity:1;
  }


/* Code Stella */

#angebote {
    background-color: var(--hauptfarbe);
}

#trailer {
    background-color: var(--hauptfarbe);
}

.headline-dark {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 40px;
    color:#242424!important;
}

 .intro-line-2 {
    line-height:120px;
 }

@media screen and (max-width: 981px) {
    .intro-line-2 {
        line-height:60px;
     }
}

.welcome {
    padding-bottom:120px;
}

nav .container {
    max-width:1600px;
}

@media screen and (max-width: 991px) {
    .welcome-content {
        padding: 120px 15px!important;
    }
}


/* Kontaktformular */

input,
textarea,
select {
 border-radius: 16px!important;
}

select {
color:#fff!important;
background-color:transparent!important;
border: 3px solid rgba(255, 255, 255, 0.3)!important;
}

.font-alternative p {
    font-family: 'Alfa Slab One';
}

/* Boxen Leistungen */

.leistung-bg:hover,
.leistung-bg:active,
.leistung-bg:focus {
    color:rgba(118, 178, 84, 0.8)!important;
}

.btn-leistungen {
    font-size: 18px;
    font-size: 1.125rem;
    font-family: 'Montserrat';
    padding: 0.8125rem 1.5625rem;
    margin: 0;
    margin-top: 3.125rem;
    font-weight: 300;
    color: var(--hauptfarbe);
    background-color: transparent;
    border-radius: 0.6rem;
    line-height: 1.1;
    display: block;
    box-shadow:none!important;
}

.btn-leistungen:hover,
.btn-leistungen:active,
.btn-leistungen:focus {
    font-family: 'Montserrat';
    color: #fff;
    background-color: transparent;
    box-shadow:none!important;
}

/* Button Kontakt */

.btn-kontakt {
    font-size: 18px;
    font-size: 1.125rem;
    font-family: 'Alfa Slab One';
    padding: 0.8125rem 1.5625rem;
    margin: 0;
    margin-top: 3.125rem;
    font-weight: 300;
    color: #242424;
    background-color: var(--hauptfarbe);
    border-radius: 0.6rem;
    line-height: 1.1;
    display: block;
}

.btn-kontakt:hover,
.btn-kontakt:active,
.btn-kontakt:focus {
    font-size: 18px;
    font-size: 1.125rem;
    font-family: 'Alfa Slab One';
    padding: 0.8125rem 1.5625rem;
    margin: 0;
    margin-top: 3.125rem;
    font-weight: 300;
    color: #242424;
    background-color: #fff;
    border-radius: 0.6rem;
    line-height: 1.1;
    display: block;
}

/* Button Modal */

.btn-modal {
    background-color: var(--hauptfarbe);
    color: #242424;
}

.btn-modal:hover,
.btn-modal:focus:hover {
    background-color: #fff;
    color: #242424;
}


/* Schräge */

.schraege {
    background-color: var(--hauptfarbe);
}

@media (max-width: 981px) {
    .schraege {
        display:none;
    }
  }


/* Instagram Feed */

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more {
    font-family: 'Alfa Slab One';
    font-weight: 500;
    background: #242424;
    border-radius: 16px;
    font-size: 16px;
    max-width: 200px;
    height: 50px;
    padding: 10px;
    margin-top: 50px;
    padding-left: 0px;
    padding-right: 20px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.2) !important;
  }
   
  #eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more {
    color:#242424;
    font-size:1.125rem;
  }

  #eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more:hover {
    background-color:#242424;
    color:#fff;
    font-size:1.125rem;
  }

  #eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more::after {
    content: "\f138";
    font-family: "Font Awesome 5 Pro";
    font-weight: 800;
    color: #242424;
    position:absolute;
    right:25px;
    top:10px;
  }

  #eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more:hover::after {
    content: "\f138";
    font-family: "Font Awesome 5 Pro";
    font-weight: 800;
    color: #fff;
    position:absolute;
    right:25px;
    top:10px;
  }

    /* #eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more:hover {
    color:#1b1b1b;
  } */

  @media (min-width: 1200px) {
  .container {
      max-width: 1364px;
  }
}


/* Referenzen Liste */

.referenz-list {
    padding-left: 0px;
    list-style-type: circle;
    list-style-position: inside;
}