Josef-Hehmann-Site-Package/Resources/Public/Css/default_global.scss

/////////////////////////////////////////////////////
// FONTS
/////////////////////////////////////////////////////
/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../Webfonts/roboto-condensed-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../Webfonts/roboto-condensed-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../Webfonts/roboto-condensed-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../Webfonts/roboto-condensed-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 800;
  src: url('../Webfonts/roboto-condensed-v30-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 900;
  src: url('../Webfonts/roboto-condensed-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/////////////////////////////////////////////////////
// FONTWEIGHTS
/////////////////////////////////////////////////////
$font-weight-base: 500;    // regular
$font-weight-medium: 600;   //medium
$font-weight-semibold: 700;    // semibold
$font-weight-bold: 800;   //bold
$font-weight-black: 900;   //extrabold

/////////////////////////////////////////////////////
// FONTSIZES
/////////////////////////////////////////////////////
@mixin font-size-base {
    --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px) !important;
}

@mixin h1-font-size {
    --min-size: 40;
    --max-size: 100;
}
@mixin h2-font-size {
    --min-size: 37;
    --max-size: 48;
}
@mixin h3-font-size {
    --min-size: 21;
    --max-size: 26;
}
@mixin h4-font-size {
    --min-size: 18;
    --max-size: 24;
}
@mixin h5-font-size {
    --min-size: 17;
    --max-size: 22;
}
@mixin font-size-small {
    --min-size: 13;
    --max-size: 14;
}
@mixin font-size {
    --min-size: 17;
    --max-size: 19;
}

$h3-font-size: 26;

/////////////////////////////////////////////////////
// ROOT
/////////////////////////////////////////////////////
:root {
    --swiper-theme-color: $color_brand;
    // FÜR BUGFIX APPLE DEVICES 100vh
    --app-height: 100%;

    // FÜR SCHRIFTGRÖSSEN Breakpoints
    --min-size: 16;
    --max-size: 20;
    --container-min: 320;
    --container-max: 1600;
    --viewport-min: 320;
    --viewport-max: 1600;
}
/////////////////////////////////////////////////////
// COLOURS
/////////////////////////////////////////////////////

$color_basic:         #000000;                       // z.B. Schriftfarbe
$color_brand:         #F12C8C;                      // Unternehmens Farbe
$color_brand_dark:    #c92976;                      // Unternehmens Farbe
$color_brand_light:   #135B3F;                      // Unternehmens Farbe

$color_transparent:   rgba(0, 0, 0, 0);

$color_lightgrey: #EFEFF0;
$color_white:     #ffffff;
$color_darkgrey: #606060;
$color_grey: #808080;
$color_red: #ff0000;


.color-white, .color_white,
.text-light {
    color: $color_white;
    *, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        color: $color_white;
    }

}
/////////////////////////////////////////////////////
// HEADLINES // TEXT
/////////////////////////////////////////////////////

body {
    overflow-x: hidden;
    font-family: 'Roboto Condensed';
    font-weight: $font-weight-base;
    @include font-size-base;
    @include font-size;
    line-height: 1.8;
    color: $color_basic;
    text-wrap: pretty;
    letter-spacing: 0.1rem;
    background-color: #EFEFF0;
}

@mixin headlinebasic {
    font-weight: $font-weight-bold;
    color: $color_brand;
    margin-bottom: 1rem;
    display: block;
    text-wrap: balance;
    @include font-size-base;
    letter-spacing: 0px;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    text-shadow: none;
    @include headlinebasic();

}

h1, .h1 {
    @include h1-font-size;

}
h2, .h2 {
    @include h2-font-size;
    color: #000000;
	font-weight: 700 !important;
    text-shadow: none;
}
h3, .h3 {
    @include h3-font-size;
    font-weight: 600;
    color: $color_brand;
}
h4, .h4 {
    @include h4-font-size;
    margin-bottom: 0;

}
h5, .h5 {
    @include h5-font-size;
    line-height: 1.3;

}
.subline {
    margin-bottom: 0;
    color: $color_brand;
	letter-spacing: 0.5px;
}

@mixin icon {
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    line-height: 1;
}

i, em {
    &.bi {
        @include icon;
    }
    font-style: italic;
}

b, strong {
    font-weight: $font-weight-bold; 
}
a {
    cursor: pointer;
    text-decoration: none;
}
small, .small, .text-small {
    @include font-size-small;
}
$letter-spacing: .25rem;

.letter-spacing {
    letter-spacing: $letter-spacing;
}
$text-shadow: 0 0 20px rgba($color_basic, .2);
.text-shadow {
    text-shadow: $text-shadow;
}

/////////////////////////////////////////////////////
// COSTUM MIXINS
/////////////////////////////////////////////////////
@mixin vendor-prefix($name, $value){
    @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', ''){
        #{$vendor}#{$name}: #{$value};
    }
}
@mixin masterfloat {
    position: relative;
    float: left;
    width: 100%;
}
@mixin center{
    position: absolute;
    left: 50%;
    top: 50%;
    @include vendor-prefix('transform', 'translate(-50%,-50%)');
}
@mixin vertical-center{
    position: relative;
    top: 50%;
    @include vendor-prefix('transform', 'translateY(-50%)');
}
@mixin horizontal-center{
    position: relative;
    left: 50%;
    @include vendor-prefix('transform', 'translateX(-50%)');
}

@mixin fade {
    @include vendor-prefix('transition', 'all 0.5s ease-in-out');
}
@mixin fade-fast {
    @include vendor-prefix('transition', 'all 0.25s ease-in-out');
}

$border-radius: 50px;
$box-shadow: 0 0 20px rgba($color_basic, .2);

/////////////////////////////////////////////////////
// BASIC RESETS
///////////////////////////////////////////////////// 

// Scrollbars
* {
    scrollbar-width: thin;
    scrollbar-color: $color_brand transparent;
}
// Schreibweise Firefox // Webkit-Browser – getrennte Schreibweise erforderlich!!!
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: $color_brand;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: $color_brand;
}
// Close Scrollbars

.container {
    @media (min-width: 1700px) {
        max-width: 1640px;
    }
    @media (max-width: 575.98px){
        padding-left: 15px !important;
    }
}
.container-fluid{
    @media (max-width: 767.98px){
        padding-left: 0px;
        padding-right: 0px;
    }
}

body, table, tr, td {
    margin: 0;
    padding: 0;
}
* {
    &:hover,
    &:focus,
    &:active {
        @include fade;
    }
}
a {
    color: $color_brand;
    //text-decoration: underline;
    * {
        color: $color_brand;
    }
    &:hover,
    &:focus,
    &:active,
    &:link {
        @include fade;
    }
    &:active,
    &:link {
        color: $color_brand;
    }
    &:hover,
    &:focus {
        color: $color_brand_dark;
    }

    i {
        color: inherit;
    }
}

:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

p, .p { 
    font-weight: 500 !important;
    line-height: 1.6 !important;
    display: block;
    margin-bottom: 1rem;
    letter-spacing: normal !important;
    &:last-child, &:last-of-type {
        margin-bottom: 0;
        letter-spacing: normal !important;
    }
    + .btn {
        margin-top: 2rem;
        letter-spacing: normal !important;
    }
}
::selection {
    background: $color_brand !important;
    color: white !important;
}
*::selection {
    background: $color_brand !important;
    color: white !important;
}
::-moz-selection{
    background: $color_brand !important;
    color: white !important;
}
*::-moz-selection {
    background: $color_brand !important;
    color: white !important;
}


/////////////////////////////////////////////////////
// NAVIGATION
/////////////////////////////////////////////////////
.navbar {
    @include fade;
    background-color: $color_lightgrey;
    padding: 0 !important;

    .container {
        @media (max-width: 991.98px) {
            max-width: 100% !important;
        }
    }

    .navbar-collapse {
        padding-top: 23px;
        padding-bottom: 23px;

        @media (max-width: 991.98px) {
            padding-top: 25px;
            padding-bottom: 25px;
        }
    }

    .btn-link {
        color: #000000;
        background: transparent !important;

        &.active {
            color: $color_brand !important;
        }

        svg {
            path {
                fill: #000000;
            }
        }
    }

    .btn {
        margin-top: 18px;
        margin-bottom: 18px;

        @media (max-width: 1199.98px) {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        span {
            &:hover {
                color: $color_brand !important;
            }
            &:active,
            .active {
                color: $color_brand !important;
            }
        }
    }

    .navi {
        color: #000000;
    }

    .navbar-brand {
        padding: 0;

        img,
        .svg {
            height: 100%;
            @include fade;

            @media (max-width: 1199.98px) {
                height: 80px;
            }
            @media (max-width: 991.98px) {
                height: 60px;
            }
            @media (max-width: 767.98px) {
                height: 50px;
            }
            @media (max-width: 575.98px) {
                height: 45.5px;
            }
            @media (max-width: 425.98px) {
                height: 39.5px;
            }
        }
    }

    .phone {
        color: #000000;
        padding-left: 10px;
        height: 25px;
        width: auto;

        @media (max-width: 425.98px) {
            height: 20px;
        }
    }

    .navbar-toggler {
        background-color: #f12b8c;
        color: #fff;
        border: none;
        padding: 13px;
        border-radius: 0;

        @media (max-width: 575.98px) {
            padding: 11px;
        }
        @media (max-width: 425.98px) {
            padding: 8px 8px;
        }
    }

    .wrapper {
        @media (max-width: 991.98px) {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }

    svg path {
        fill: #000 !important;

        &:hover {
            fill: $color_brand !important;
        }
    }

    .navbar-nav {
        .nav-item {
            .social-button {
                .phone {
                    margin-top: 7px;
                }
            }

            .nav-link {
                color: #000 !important;
                position: relative;
                letter-spacing: 0.8px;
                font-size: 20px;
                padding-right: 13px;
                padding-left: 13px;

                @media (max-width: 991.98px) {
                    padding: 5px 10px;
                }

                &:hover {
                    color: #f12b8c !important;
                }
                &.active {
                    color: #f12b8c !important;
                }
            }
        }
    }
}

.shrink {
    @include fade;

    & * {
        @include fade;
    }

    &.navbar {
        background-color: $color_lightgrey;
        box-shadow: $box-shadow;
        padding-top: 0;
        padding-bottom: 0;

        .navbar-brand {
            img,
            .svg {
                height: 99px !important;
            }

            svg {
                height: 99px;

                path {
                    fill: #000000;
                }
            }
        }

        .navbar-top {
            opacity: 0;
            max-height: 0;
            padding: 0;
            margin: 0;
        }

        .btn-link {
            background: transparent !important;

            svg {
                path {
                    fill: #000000;
                }
            }
        }
    }

    .search {
        form {
            button {
                .nav-icon {
                    background-color: transparent;
                    color: $color_brand;

                    * {
                        color: $color_brand;
                    }

                    svg path {
                        fill: $color_brand !important;
                    }
                }
            }
        }

        &:hover,
        &:active {
            form {
                input {
                    border: 1px solid rgba($color_brand, .5);
                }
            }
        }
    }
}

.modal-open {
    .btn-link {
        .bi-list {
            &::before {
                content: '\F659';
            }
        }
    }
}

.modal-fullscreen {
    margin: 1.5rem auto;
    width: calc(100vw - 3rem);
    height: calc(100% - 3rem);
    overflow-y: scroll;
}


/////////////////////////////////////////////////////
// FOOTER
/////////////////////////////////////////////////////
.footer {
    .container {
        @media (max-width: 1099.98px) {
            padding-left: 25px !important;
        }
        @media (max-width: 991.98px) {
            padding-left: 0px !important;
        }
        @media (max-width: 575.98px) {
            padding-left: 20px !important;
        }
    }

    .footer-da {
        height: 100%;
        @media (max-width: 991.98px) {
            margin-top: 30px;
        }
    }

    .icon-phone {
        height: 20px !important;
        color: #ffffff;
        padding-right: 5px;
    }

    .icon-at {
        height: 20px !important;
        padding-right: 5px;
    }

    font-weight: $font-weight-medium;
    overflow: hidden;

    &::after {
        content: '';
        background-color: $color_brand_light;
        position: absolute;
        @media (max-width: 991.98px) {
            width: 100vw;
            height: 100vw;
        }
        @media (max-width: 767.98px) {
            width: 130vw;
            height: 130vw;
        }
    }

    a,
    a:link,
    a:active {
        color: rgba($color_white, 1);

        &:hover,
        &:focus {
            img,
            svg {
                path {
                    fill: $color_white !important;
                    @include fade;
                }
            }
        }
    }

    .address {
        img,
        svg {
            height: 65px;
            width: auto;

            @media (max-width: 991.98px) {
                height: 55px;
            }
            @media (max-width: 767.98px) {
                height: 50px;
            }
            @media (max-width: 575.98px) {
                height: 45px;
            }
            @media (max-width: 425.98px) {
                height: 40px;
            }
            @media (max-width: 229.98px) {
                height: 30px;
            }
        }
    }

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

        &.big {
            @include headlinebasic;
            @include h2-font-size;
            line-height: 1.2;

            @media (max-width: 575.98px) {
                @include h3-font-size;
            }
        }
    }

    .quicknav {
        a {
            width: 100%;
            display: inline-block;
            padding: 0.25rem 0;

            @media (max-width: 767.98px) {
                padding: 0.5rem 0;
            }
        }
    }

    .subfooter {
        padding-top: 0px;
        padding-bottom: 30px;

        @media (min-width: 1700.98px) {
            padding-top: 30px;
        }
        @media (max-width: 1199.98px) {
            padding-top: 30px;
        }

        .footer-links {
            text-align: center;

            @media (max-width: 1399.98px) {
                padding-right: 10px;
            }
            @media (max-width: 767.98px) {
                width: 100%;
                align-items: center;
            }
            @media (max-width: 575.98px) {
                width: 85%;
                align-items: center;
            }
        }

        border-color: $color_white !important;

        .text-light {
            span {
                letter-spacing: 0px !important;
            }
        }

        a {
            &:hover {
                @media (max-width: 767.98px) {
                    color: $color_brand_light !important;
                    background-color: #fff;
                    border: #fff solid 1px;
                }
                color: white !important;
            }

            letter-spacing: 0px !important;

            @media (max-width: 767.98px) {
                display: block;
                padding: 0.75rem;
                border: 1px solid;
                margin-top: 1rem;
            }

            &::before {
                @media (min-width: 768px) {
                    content: '';
                    padding-left: 2rem;
                    display: inline-block;
                }
            }

            &.backtotop {
                position: fixed;
                bottom: 1rem;
                z-index: 5;
                right: 0;
                display: none;

                @media (max-width: 767.98px) {
                    padding: 0;
                    border: none;
                }

                span {
                    background-color: $color_brand;
                    width: 50px;
                    height: 50px;
                    text-align: center;
                }
            }
        }
    }

    .subfooterlinks {
        @media (max-width: 991.98px) {
            margin-top: 1.5rem !important;
        }

        a {
            &::before {
                content: none;
            }
        }
    }

    .socialiconwrapper {
        align-items: center;

        @media (max-width: 1199.98px) {
            margin-top: 10px !important;
        }
        @media (max-width: 991.98px) {
            margin-top: 0px !important;
        }
        @media (max-width: 580.98px) {
            flex-direction: column;
        }

        .socialicon {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            border: 2px solid $color_white;
            margin-top: 0 !important;

            &::before {
                content: none;
            }

            img,
            svg {
                width: auto;
                height: 25px;
                @include center;

                path {
                    fill: $color_white !important;
                }
            }

            &:hover {
                background-color: $color_white;

                img,
                svg {
                    path {
                        fill: $color_brand !important;
                    }
                }
            }

            & + .socialicon {
                margin-left: 0.5rem;
            }
        }
    }
}

/////////////////////////////////////////////////////
// CONTENT
/////////////////////////////////////////////////////

// Effekte
.blur {
    @include vendor-prefix(backdrop-filter, blur(10px));
}
.hyphens {
    @include vendor-prefix('hyphens', 'auto');
}
.color_brand {
    color: $color_brand !important;
}
.bg_brand {
    background-color: $color_brand !important;
    color: $color_white;
}
.bg_secondary, .bg-secondary {
    background-color:#ffffff;
    color: #000000;
}

.bg_footer {
    background-color: $color_brand_light;
	p{
       color: #fff !important;
	}
}

.bg_grey {
    background-color: $color_lightgrey !important;
}

// Buttons
.btn {
    border: none;
    @include font-size-base;
    @include font-size;
    font-weight: $font-weight-base;
    padding: 1rem 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;

    &:focus,
    &:active,
    &.show {
        background-color: $color_brand_light;
    }
}


.btn-primary, .btn-default {
    background-color: $color_brand_light;
    border-radius: 0px !important;
	color: #fff !important;
    border:3px solid $color_brand_light;
    padding: 8px 43px 8px 43px;
    letter-spacing: normal !important;
	@media (max-width: 767.98px) {
		 padding: 8px 23px 8px 23px;
	}
    &:active { 
        background-color: $color_transparent !important;
        border:3px solid $color_brand_light !important;
        color: $color_brand_light !important; 
    }
    &:hover{
        background-color: $color_transparent;
        border:3px solid $color_brand_light;
        color: $color_brand_light !important;  
    }
}

.btn-outline-light {
    border: 2px solid $color_white;
}
.btn-outline-default {
    border: 2px solid $color_brand;
}
.btn-link {
    text-decoration: none;
}

// Dropdowns
.dropdown-toggle {
    &::after {
        @include icon();
        content: '\F282';
        border: none;
        vertical-align: baseline;
        font-size: 65%;
        margin-left: 0;
    }
}
.dropdown-item {
    color: $color_basic;
    &:focus,
    &:hover {
        color: $color_brand;
        background-color: $color_brand_light;
    }
}

// Content

section, .section,
footer {
    @include masterfloat();
}
section,
.section {
    padding-top: 150px;
    padding-bottom: 150px;
    @media (max-width: 1099.98px) {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    @media (max-width: 767.98px) {
        padding-top: 100px;
        padding-bottom: 100px;
    } 
    ul, ol {

        li {
            list-style: none;
            position: relative;

            &::before {
                position: absolute;
                color: $color_brand;

            }
        }
    }
    // unorderd
    ul {
        padding-left: 1.75rem;
        li {
            &::before {
                @include icon;
                content: "\F633";
                left: -1.75rem;
                font-size: 1.5rem;
                top: 0.2em;
            }
        }
    }
    // orderd
    ol {
        counter-reset: section; /* Creates a new instance of the section counter with each ol element */
        padding-left: 1.5rem;
        li {
            margin-left: 0rem;
            &::before {
                counter-increment: section; /* Increments only this instance of the section counter */
                content: counters(section, ".") ". "; /* Combines the values of all instances of the section counter, separated by a period */
                font-weight: $font-weight-bold;
                //margin-left: calc(-40px - 0.5rem);
                //width: 40px;
                text-align: right;
                color: $color_brand;
                position: relative;
            }
        }
    }
}


.two-column {
    column-count: 2;
    column-gap: 45px;
    @include vendor-prefix('hyphens', 'auto');
    @media (max-width: 1099.98px) {
        column-count: 1 !important;
    }
}


.titlearea {
	&.small{
		height: 60vh !important;
		@media (max-width: 991.98px) {
			height: 70vh !important;
		}
		@media (max-width: 575.98px) {
			height: 100vh !important;
		}
		.textwrapper{
			margin-left: 12px;
			margin-right: 12px;
			padding: 15px 25px !important;
		    background: rgba(241,43,140,0.70);
			width: auto !important;
			margin-bottom: 4rem;
			@media (max-width: 575.98px) {
				margin-left: 17px;
			    margin-right: 17px;
			}
			.h1{
				letter-spacing: 1px;
				line-height: 1.2;
				text-shadow: none;
				color: #fff;
				font-weight: 700 !important;
				font-size: 60px !important;
				margin-bottom: 0px !important;
				display: flex;
				text-transform: none !important;
				align-items: center;
				@media (max-width: 991.98px) {
					font-size: 50px !important;
					line-height: 1.1;
				}
				@media (max-width: 575.98px) {
					font-size: 35px !important;
				}
			}
		}
	}
	td{
		padding-right: 20px;
		color: #fff;
		font-size: 23px;
		line-height: 1.6;
		@media (max-width: 575.98px) {
			font-size: 20px;
			padding-right: 18px;
    		line-height: 1.5;
		}
	}
	.openingtimes{
		padding: 0px !important;
		background: rgba(241,43,140,0.55);
		.h1{
			text-shadow: none;
			color: #fff;
			font-weight: 700 !important;
			font-size: 50px !important;
			margin-bottom: 0px !important;
			display: flex;
            align-items: center;
			@media (max-width: 991.98px) {
				font-size: 40px !important;
			}
			@media (max-width: 575.98px) {
				font-size: 30px !important;
			}
		}
		.subline{
			color: #fff;
			text-shadow: none;
			margin-bottom: 7px;
			font-size: 30px !important;
			@media (max-width: 575.98px) {
				font-size: 27px !important;
			}
		}
		.svg{
			width: 40px !important;
			margin-right: 20px;
			@media (max-width: 991.98px) {
				width: 35px !important;
			}
			@media (max-width: 575.98px) {
				width: 29px !important;
				margin-right: 15px;
			}
		}
		&.bottom-0 {
			bottom: 70px !important;
		}
		.openingtimeswrapper{
			padding: 25px;
		}
		.phonewrapper{
			background-color: $color_brand;
			padding: 10px 25px;
		}
	}
    .h1{
        text-shadow: 0px 0px 25px #000;
    }
    .subline{
        text-shadow: 0px 0px 15px #000;
    }
    @include masterfloat();
    //height: 100vh;
    height: var(--app-height);
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    &.half {
        height: 650px;
        max-height: 75vh;
    }

    picture {
        &::before {
            content: '';
            width: 100%;
            height: 100%;
            @include center;
            background-color: rgba($color_basic,.2);
        }
    }

    img {
        display: block;
        width: 100%;
        object-fit: cover;
        object-position: center;
        //height: 100vh;
        height: var(--app-height);

    }
    .container {
        z-index: 2;
    }
}
.text-image {
    background-image: url(https://www.emsa.com/fileadmin/media/inspirationen/drink2go/eco/teaser-emsa-drink2go-auswahlhilfe.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    .container {
        .row {

            //&:nth-child(odd),
            &.flex-row-reverse {
                flex-direction: row-reverse!important;

                .textwrapper {
                    padding-right: 1.5rem;
                    padding-left: calc(var(--bs-gutter-x) * .5);
                }
            }
            &.section {
                float: none;
                width: auto;
                &:first-of-type,
                + .section {
                    padding-top: 0;
                }
                &:last-of-type {
                    padding-bottom: 0;
                }
            }
        }
    }
}

.text-image-background {
    background-image: url(http://dummy.cybob.com//10360_Hehmann/dummy_hehmann/packages/default_site_package/Resources/Public/Images/hehmann-karte.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    .container {
        .row {

            //&:nth-child(odd),
            &.flex-row-reverse {
                flex-direction: row-reverse!important;

                .textwrapper {
                    padding-right: 1.5rem;
                    padding-left: calc(var(--bs-gutter-x) * .5);
                }
            }
            &.section {
                float: none;
                width: auto;
                &:first-of-type,
                + .section {
                    padding-top: 0;
                }
                &:last-of-type {
                    padding-bottom: 0;
                }
            }
        }
    }
}
.teasergrid {
    .teaser {
        &.square {
            .squarewrapper {
                &::after {
                    position: absolute;
                    content: "";
                    width: 100%;
                    height: 100%;
                    background: rgba($color_brand,.28);
                    //background: $color_brand;
                    left: 0;
                    top: 0;
                    //mix-blend-mode: multiply;
                }
                .image {
                    width: 100%;
                    height: 0;
                    padding-top: 100%;
                    position: relative;
                    img {
                        width: 100%;
                        height: 100%;

                        object-fit: cover;
                        @include center;

                    }
                }
            }

        }
    }
}
.jobs {
    border-radius: 0;
    * {
        color: $color_white;
    }
    .job {
        background-color: transparent;
        border-radius: 0 !important;
        border: none;
        padding: 2rem;
        position: relative;
        &:hover {
            text-shadow: 0 0 20px rgba($color_basic, .4);
        }

        + .job {
            &::before {
                border-top: 2px solid #fff;
                content: '';
                width: calc(100% - 4rem);
                display: inline-block;
                top: 0;
                position: absolute;
            }
        }
    }
}
.bigicon {
    svg {
        max-width: 100px;
        max-height: 100px;
        width: 100%;
        height: auto;
        filter: drop-shadow(0 0  20px rgba($color_basic, .2));
    }
}
code {
    color: $color_brand_dark;
}
.accordion {


	&.career{
		p{
			margin-bottom: 5px !important;
		}
		ul{
			margin-bottom: 40px;
		}
		strong{
			font-size: 22px;
			@media (max-width: 575.98px) {
				font-size: 20px;
			}
		}
		li{
			padding-left: 5px;
			line-height: 1.6;
		}
		.downloadimg{
			width: 100%;
		}
		.download{
			@media (max-width: 1199.98px) {
				margin-top: 30px !important;
			}
		}
		.downloadwrapper{
			background-color: $color_brand;
			padding: 20px;
			font-size: 20px;
			color: #fff;
			letter-spacing: 0.3px;
			@media (max-width: 575.98px) {
				font-size: 16px;
			}
			&:hover{
				background-color: $color_brand_dark;
			}
			.svg{
				width: 25px;
				margin-right: 10px;
				@media (max-width: 575.98px) {
					width: 18px !important;
				}
			}
		}
	}
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-active-color: $color_brand;
    --bs-accordion-active-bg: rgba($color_brand, .05);
    border-top: 2px solid #000;
    border-bottom: 1px solid #000;
    margin-top: 40px;
    .accordion-body{
        padding: 0px 100px 20px 0px;
        letter-spacing: normal !important;
		@media (max-width: 767.98px) {
            padding: 0px 60px 20px 0px;
        }
		@media (max-width: 575.98px) {
            padding: 0px 30px 20px 0px;
        }

    }

    .accordion-item{
        background-color: transparent;
        border-top: solid #000 1px;
        border-bottom: solid #000 2px;
        border-left: none;
        border-right: none;
    }

    .accordion-button {
        font-size: 25px;
        color: #000000;
        font-weight: $font-weight-semibold;
        padding: 20px 20px 20px 0px;
		@media (max-width: 991.98px) {
            padding: 17px 20px 17px 0px;
        }
        @media (max-width: 767.98px) {
            font-size: 22px;
        }
		 @media (max-width: 575.98px) {
            font-size: 20px;
        }
        &.collapsed{
            background-color: transparent;
        }

        &:after {
            content: '\F282';
            @include icon;
            color: $color_brand;
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 1.25rem;
            background-image: none;
        }
        &:not(.collapsed) {
            box-shadow: none;
            background-color: transparent;
            &::after {
                content: '\F282';
                transform: rotate(-180deg) translate(15%,30%);
            }
        }
    }

}


.socialmedia {
    .socialicon {
        @media (max-width:767.98px) {
            display: block !important;
            text-align: center;
        }

        a {

            position: relative;
            display: inline-block;
            width: 130px;
            height: 130px;
            margin: 0 .5rem;
            background: $color_brand;
            @media (max-width:991.98px) {
                width: 100px;
                height: 100px;
            }
            @media (max-width:575.98px) {
                height: 70px;
                width: 70px;
            }

            /*@media (max-width:767.98px) {
                padding: 2rem 0;
                display: inline-block;
            }*/
            img, svg {
                color: $color_white;
                height: 65px;
                width: auto;
                @include center;

                @media (max-width:991.98px) {
                    height: 45px;
                }
                @media (max-width:575.98px) {
                    height: 25px;
                }

                path {
                    fill: $color_white;
                }

            }
            &:hover {
                background: $color_white;
                border: 2px solid $color_brand;
                img, svg {
                    path, polygon {
                        fill: $color_brand;
                        @include fade();
                    }
                }
            }
        }
    }
}
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
	color: #000000;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
	background-color: transparent;
    border: none;
    color: #135b3f;
}

.navbar .btn-link svg path {
	&:hover{
		 fill: $color_brand !important;
	} 
}






.careertext{
	.contact{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		@media (max-width: 1199.98px){
            align-items: unset;
    		flex-direction: unset;
        }
		@media (max-width: 767.98px){
            align-items: center;
		    flex-direction: column;
        }
	}
    .container{
        @media (max-width: 575.98px){
            padding-left: 15px !important;
        }
    }

	.contactimg{
		width: 70%;
	}
	.contact{
		@media (max-width: 1199.98px) { 
			margin-top: 50px;
        }
		p{
			font-size: 25px !important; 
			font-weight: 500 !important;
			letter-spacing: 0.3px !important;
		}
	}
	.iconwrapper{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.icon{
		width: 75px;
		margin-bottom: 20px;
		@media (max-width: 1599.98px) {
            width: 70px; 
        }
		@media (max-width: 991.98px) {
            width: 60px;
			margin-bottom: 17px;
        }
		@media (max-width: 767.98px) {
            width: 65px; 
        } 
		@media (max-width: 460.98px) {
            width: 55px; 
        }
		@media (max-width: 370.98px) {
			 width: 45px;
			 margin-bottom: 15px;
		}
	}
	.contactwrapper{
		    width: 70%;
			background-color: $color_brand;
			padding: 20px;
			font-size: 20px;
			color: #fff;
			letter-spacing: 0.3px;
			@media (max-width: 575.98px) {
				font-size: 16px;
			} 
			a{
				color: #fff !important; 
			}
			.svg{
				width: 25px;
				margin-right: 10px;
				@media (max-width: 575.98px) {
					width: 18px !important;
				}
			}
		}
	.icongrid{
		margin-top: 70px;
		.subline{
			color: #000 !important;
			text-align: center;
			font-size: 21px !important;
			@media (max-width: 1599.98px) {
				font-size: 20px !important; 
			}
			@media (max-width: 991.98px) {
				font-size: 18px !important;
			}
			@media (max-width: 767.98px) {
				font-size: 21px !important;
			}
			@media (max-width: 575.98px) {
				font-size: 20px !important;
			}
			@media (max-width: 460.98px) {
				font-size: 18px !important;
			}
			@media (max-width: 370.98px) {
				font-size: 16px !important;
			}
		}
	} 
}


.grey-bg-section{
	padding-top: 0px !important;
    padding-bottom: 0px !important;
	background-color: $color_lightgrey; 
	img{
		width: 100%;
	} 
	.subline{
		color: #000;
		margin-bottom: 10px;
	}
	.h2{
		color: #000;
	}
	p{
		color: #000;
	}
	.imgwrapper{
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
	.textwrapper{
		padding-right: 30px !important;
		padding-left: 30px !important;
		@media (max-width: 991.98px) {
			order: 1;
			padding-top: 40px !important;
			padding-bottom: 40px !important;
		}
		@media (max-width: 575.98px) {
			padding-right: 20px !important;
		    padding-left: 15px !important;
		}
	}
	ul {
        padding-left: 1.75rem;

        li {
			font-weight: 500 !important;
            line-height: 1.4;
			margin-bottom: 10px;
    		letter-spacing: normal;
            &::before {
                @include icon;
                content: "\F285";
                left: -1.75rem;
                font-size: 1.5rem; 
            }
        }
    }
}

.ul-long{
    column-count: 2;
}

.pink-bg-section{
	padding-top: 0px !important;
    padding-bottom: 0px !important;
	background-color: $color_brand; 
	img{
		width: 100%;
	}
	.btn{
		border: #fff solid 2px !important;
		background-color: transparent;
		color: #fff !important;
		margin-bottom: 0px !important;
		&:hover{
			border: #fff solid 2px;
			background-color: #fff !important;
			color: $color_brand !important; 
		}
	}
	.subline{
		color: #fff;
	}
	.h2{
		color: #fff;
	}
	p{
		color: #fff;
	}
	.imgwrapper{
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
	.textwrapper{
		padding-right: 30px !important;
		padding-left: 30px !important;
		@media (max-width: 991.98px) {
			padding-top: 40px !important;
			padding-bottom: 40px !important;
		}
		@media (max-width: 575.98px) {
			padding-right: 20px !important;
		    padding-left: 25px !important;
		}
	}
}


.square-hover{ 
	.image {
	  display: block;
	  width: 100%;
	  height: auto;
	} 
	.overlay {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 100%;
	  width: 100%;
	  opacity: 0;
	  transition: .5s ease;
	  background-color: #008CBA;
	} 
	.container:hover .overlay {
	  opacity: 0.5;
	} 
	.text {
	  color: white;
	  font-size: 20px;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  text-align: left;
	}
 }





.benefits-new{   
	img{
		width: 100%;
	}
	.card-wrapper{
	  display: flex;
	  justify-content: center; 
	  align-items: center; 
	  padding-bottom: 12px;
	}
	.card{ 
	  width: 300px; 
	  border: none !important;
	} 
	.card-inner{
	  position: relative;
	  width: 100%;
	  height: 150px;
	  padding-bottom: 100%;
	  transition: transform 0.6s;
	  transform-style: preserve-3d;
	} 
	.card:hover .card-inner{
	  transform: rotateY(180deg);
	} 
	.card-front, .card-back{
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  backface-visibility: hidden;
	  display:flex;
	  align-items: center;
	  flex-direction: column;
	  justify-content: center; 
	} 
	.card-front{
	  background: #f5f5f5;
	  text-align: center;
	} 
	.card-back{
	  background: #587a9a;
	  color: #fff;
	  transform: rotateY(180deg);
	  text-align: center;  
	  background-repeat: no-repeat;
	  background-position: bottom 10px right 10px;
	  background-size: 50%;
	} 
	.benefiticon{
		width: 85px;
		margin-bottom: 16px;
	}
	.iconTile{
		margin: 0px !important;
		border: 5px #fff solid;
		padding: 50px 30px 24px 30px !important; 
	}
	picture{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.col-5{
		flex: 0 0 20%;
        max-width: 20%;
		@media (max-width: 1199.98px) {
			flex: 0 0 25%;
            max-width: 25%;
		}  
		@media (max-width: 991.98px) {
			flex: 0 0 33%;
            max-width: 33%;
		}
		@media (max-width: 767.98px) {
			flex: 0 0 50%;
            max-width: 50%;
		}
		@media (max-width: 450.98px) {
			flex: 0 0 100%;
            max-width: 100%;
		}
	}
	.subline{
		line-height: 1.35rem;
	} 
	h2, .h2{
		margin-bottom: 0.9rem;  
	}
	p{
		&.text{
			font-size: 16px;
			font-weight: 700;
			letter-spacing: 0.1rem;
			line-height: 1.5rem;
			padding-left: 15px;
            padding-right: 15px;
		}
	}
	.col-xl-3, .col-lg-3, .col-md-4, .col-sm-6, .col-12{
		padding-right: 6px; 
        padding-left: 6px;
	}
}


/////////////////////////////////////////////////////
// CONTACT
/////////////////////////////////////////////////////
.contact-teaser { 
    .anfahrt-textwrapper{
        padding-top: 5%;
        padding-bottom: 5%;
        padding-right: 5%;

       @media (min-width: 320px){
           padding-left: 0px !important;
       }

       @media (min-width: 768px){
           padding-left: 35px !important;
       }

        @media (min-width: 1024px){
            padding-left: 40px !important;
        }

        @media (min-width: 1440px){
            padding-left: 80px !important;
        }

        @media (min-width: 2250px){
            padding-left: 460px !important;
        }

        @media (min-width: 2560px){
            padding-left: 460px !important;
        }
    }
    background-image: url(http://dummy.cybob.com//10360_Hehmann/dummy_hehmann/packages/default_site_package/Resources/Public/Images/hehmann-karte.jpg);
    background-repeat: no-repeat;
    background-size: cover; 
}

.ml-0{
    margin-left: 0px !important;
}

.textwrapper-teaser{

    padding-right: 5%;

    @media (min-width: 320px){
        padding-left: 0px !important;
    }

    @media (min-width: 768px){
        padding-left: 35px !important;
    }

    @media (min-width: 1024px){
        padding-left: 40px !important;
    }

    @media (min-width: 1440px){
        padding-left: 80px !important;
    }

    @media (min-width: 2250px){
        padding-left: 460px !important;
    }

    @media (min-width: 2560px){
        padding-left: 460px !important;
    }
}

.textwrapper-leistungen{

    @media (min-width: 992px) {
        padding: 40px;
    }
}

.teaser-info{


    .teaser-text{
        margin: 0px !important;
        color: #ffffff !important;
    }

    .info-wrapper{
        color:#fff !important;
        position: relative;
    }

    .teaser-icon{
        height: 20px !important;
        color: #fff !important;
        padding-right: 5px;

    }

    .teaser-image-container{
        position: relative;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;

        @media (max-width: 575.98px){
            margin-bottom:0px;
        }

    }

    .image{
        width: 100%;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
   .teaser-hover {
       position: relative;
        float: left;
        width: 100%;
    }
    .hideshow {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 95%;
        top: 0;
        text-align: left;
        background-position-x: -15rem;
        background: rgba(20, 91, 63, 0.90);
        display: -webkit-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex !important;
        padding: 35px;
        align-items: end;
        justify-content: left;

        @media (max-width: 1699.98px){
            height:94%
        }

        @media (max-width: 1399.98px){
            height:96%
        }

        @media (max-width: 991.98px){
            height:94.5%
        }

        @media (max-width: 767.98px){
            height:96.5%
        }

        @media (max-width: 575.98px){
            opacity: 1;
            position: relative;
            height: 100%;
            margin-bottom: 40px;
        }

        @media (max-width: 320.98px){
            padding: 35px 35px 20px 20px;
        }

        &:hover{
            opacity: 1;

        }
    }
}

.link-teaser-hover{
    fill:#ffffff !important;
    color: #ffffff !important;
}

.link-teaser-contact{
    fill:#000000 !important;
    color: #000000 !important;
}

/////////////////////////////////////////////////////
// SWIPER
/////////////////////////////////////////////////////
.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    top:inherit;
    bottom: 0;
    height: 3px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: $color_brand;
}
@import 'default_navigation';
@import 'default_form_powermail';
@import 'default_form_formframework';




/////////////////////////////////////////////////////
// FONTS
/////////////////////////////////////////////////////
/* roboto-condensed-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../Webfonts/roboto-condensed-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 500;
    src: url('../Webfonts/roboto-condensed-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 600;
    src: url('../Webfonts/roboto-condensed-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('../Webfonts/roboto-condensed-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 800;
    src: url('../Webfonts/roboto-condensed-v30-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 900;
    src: url('../Webfonts/roboto-condensed-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/////////////////////////////////////////////////////
// FONTWEIGHTS
/////////////////////////////////////////////////////
$font-weight-base: 500;    // regular
$font-weight-medium: 600;   //medium
$font-weight-semibold: 700;    // semibold
$font-weight-bold: 800;   //bold
$font-weight-black: 900;   //extrabold

/////////////////////////////////////////////////////
// FONTSIZES
/////////////////////////////////////////////////////
@mixin font-size-base {
    --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px) !important;
}

@mixin h1-font-size {
    --min-size: 40;
    --max-size: 100;
}
@mixin h2-font-size {
    --min-size: 37;
    --max-size: 48;
}
@mixin h3-font-size {
    --min-size: 21;
    --max-size: 26;
}
@mixin h4-font-size {
    --min-size: 18;
    --max-size: 24;
}
@mixin h5-font-size {
    --min-size: 17;
    --max-size: 22;
}
@mixin font-size-small {
    --min-size: 13;
    --max-size: 14;
}
@mixin font-size {
    --min-size: 17;
    --max-size: 19;
}

/////////////////////////////////////////////////////
// ROOT
/////////////////////////////////////////////////////
:root {
    --swiper-theme-color: $color_brand;
    // FÜR BUGFIX APPLE DEVICES 100vh
    --app-height: 100%;

    // FÜR SCHRIFTGRÖSSEN Breakpoints
    --min-size: 16;
    --max-size: 20;
    --container-min: 320;
    --container-max: 1600;
    --viewport-min: 320;
    --viewport-max: 1600;
}
/////////////////////////////////////////////////////
// COLOURS
/////////////////////////////////////////////////////

$color_basic:         #000000;                       // z.B. Schriftfarbe
$color_brand:         #F12C8C;                      // Unternehmens Farbe
$color_brand_dark:    #c92976;                      // Unternehmens Farbe
$color_brand_light:   #135B3F;                      // Unternehmens Farbe

$color_transparent:   rgba(0, 0, 0, 0);

$color_lightgrey: #EFEFF0;
$color_white:     #ffffff;


.color-white, .color_white,
.text-light {
    color: $color_white;
    *, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        color: $color_white;
    }

}
/////////////////////////////////////////////////////
// HEADLINES // TEXT
/////////////////////////////////////////////////////

body {
    overflow-x: hidden;
    font-family: 'Roboto Condensed';
    font-weight: $font-weight-base;
    @include font-size-base;
    @include font-size;
    line-height: 1.8;
    color: $color_basic;
    text-wrap: balance;
    text-wrap: pretty;
    letter-spacing: .1rem;
    background-color: #EFEFF0;
}

@mixin headlinebasic {
    font-weight: $font-weight-bold;
    color: $color_brand;
    margin-bottom: 1rem;
    display: block;
    text-wrap: balance;
    @include font-size-base;
    letter-spacing: 0px;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    text-shadow: none;
    @include headlinebasic();

}

h1, .h1 {
    @include h1-font-size;

}
h2, .h2 {
    @include h2-font-size;
    color: #000000;
    font-weight: 700 !important;
    text-shadow: none;
}
h3, .h3 {
    @include h3-font-size;
    font-weight: 600;
    color: $color_brand;
}
h4, .h4 {
    @include h4-font-size;
    margin-bottom: 0;

}
h5, .h5 {
    @include h5-font-size;
    line-height: 1.3;

}
.subline {
    margin-bottom: 0;
    color: $color_brand;
    letter-spacing: 0.5px;
}

@mixin icon {
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    line-height: 1;
}

i, em {
    &.bi {
        @include icon;
    }
    font-style: italic;
}

b, strong {
    font-weight: $font-weight-bold;
}
a {
    cursor: pointer;
    text-decoration: none;
}
small, .small, .text-small {
    @include font-size-small;
}
$letter-spacing: .25rem;

.letter-spacing {
    letter-spacing: $letter-spacing;
}
$text-shadow: 0 0 20px rgba($color_basic, .2);
.text-shadow {
    text-shadow: $text-shadow;
}

/////////////////////////////////////////////////////
// COSTUM MIXINS
/////////////////////////////////////////////////////
@mixin vendor-prefix($name, $value){
    @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', ''){
        #{$vendor}#{$name}: #{$value};
    }
}
@mixin masterfloat {
    position: relative;
    float: left;
    width: 100%;
}
@mixin center{
    position: absolute;
    left: 50%;
    top: 50%;
    @include vendor-prefix('transform', 'translate(-50%,-50%)');
}
@mixin vertical-center{
    position: relative;
    top: 50%;
    @include vendor-prefix('transform', 'translateY(-50%)');
}
@mixin horizontal-center{
    position: relative;
    left: 50%;
    @include vendor-prefix('transform', 'translateX(-50%)');
}

@mixin fade {
    @include vendor-prefix('transition', 'all 0.5s ease-in-out');
}
@mixin fade-fast {
    @include vendor-prefix('transition', 'all 0.25s ease-in-out');
}

$border-radius: 50px;
$box-shadow: 0 0 20px rgba($color_basic, .2);

/////////////////////////////////////////////////////
// BASIC RESETS
/////////////////////////////////////////////////////

// Scrollbars
* {
    scrollbar-width: thin;
    scrollbar-color: $color_brand transparent;
}
// Schreibweise Firefox // Webkit-Browser – getrennte Schreibweise erforderlich!!!
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: $color_brand;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: $color_brand;
}
// Close Scrollbars

.container {
    @media (min-width: 1700px) {
        max-width: 1640px;
    }
    @media (max-width: 575.98px){
        padding-left: 15px !important;
    }
}
.container-fluid{
    @media (max-width: 767.98px){
        padding-left: 0px;
        padding-right: 0px;
    }
}

body, table, tr, td {
    margin: 0;
    padding: 0;
}
* {
    &:hover,
    &:focus,
    &:active {
        @include fade;
    }
}
a {
    color: $color_brand;
    //text-decoration: underline;
    * {
        color: $color_brand;
    }
    &:hover,
    &:focus,
    &:active,
    &:link {
        @include fade;
    }
    &:active,
    &:link {
        color: $color_brand;
    }
    &:hover,
    &:focus {
        color: $color_brand_dark;
    }

    i {
        color: inherit;
    }
}

:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

p, .p {
    font-weight: 500 !important;
    line-height: 1.6 !important;
    display: block;
    margin-bottom: 1rem;
    letter-spacing: normal !important;
    &:last-child, &:last-of-type {
        margin-bottom: 0;
        letter-spacing: normal !important;
    }
    + .btn {
        margin-top: 2rem;
        letter-spacing: normal !important;
    }
}
::selection {
    background: $color_brand !important;
    color: white !important;
}
*::selection {
    background: $color_brand !important;
    color: white !important;
}
::-moz-selection{
    background: $color_brand !important;
    color: white !important;
}
*::-moz-selection {
    background: $color_brand !important;
    color: white !important;
}


/////////////////////////////////////////////////////
// NAVIGATION
/////////////////////////////////////////////////////
.navbar {
    @include fade;
    background-color: $color_lightgrey;
    padding: 0px !important;
    .container{
        @media (max-width: 991.98px){
           max-width: 100% !important;
        }
    }
	.navbar-collapse{
		padding-top: 23px;
        padding-bottom: 23px;
		@media (max-width: 991.98px){
           padding-top: 25px;
           padding-bottom: 25px;
        }
	}
    .btn-link {
        color: #000000;
        background: transparent !important;
        &.active{
            color: $color_brand !important;
        }
        svg {
            path {
                fill: #000000;
            }
        }
    }
    .btn{
        margin-top: 18px;
        margin-bottom: 18px;
        @media (max-width: 1199.98px){
            margin-top: 10px;
            margin-bottom: 10px;
        }
        span{
            &:hover{
                color: $color_brand !important;
            }
            &:active, .active{
                color: $color_brand !important;
            }
        }
    }

    .navi{
        color:#000000;
    }

    .navbar-brand {
        padding: 0px;
        img,
        .svg {
            height: 100%;
            @include fade;
			@media (max-width: 1199.98px){
                height: 80px;
            }
			@media (max-width: 1099.98px){
                height: 80px;
            }
			@media (max-width: 991.98px){
                height: 60px;
            }
            @media (max-width: 767.98px){
                height: 50px;
            }
            @media (max-width: 575.98px){
                height: 45.5px;
            }
            @media (max-width: 425.98px){
                height: 39.5px;
            }
        }
    }
    .phone {
        color: #000000;
        padding-left: 10px;
        height: 25px;
        width: auto;
        @media (max-width:425.98px){
            height: 20px;
        }
    }
	.navbar-toggler{
		background-color: #f12b8c;
		color: #fff;
		border: none;
		padding: 13px;
		border-radius: 0px;
		@media (max-width: 575.98px){
			padding: 11px;
		}
	    @media (max-width: 425.98px){
			padding: 8px 8px;
		}
	}
	.wrapper{
		@media (max-width: 991.98px){
			padding-top: 10px;
			padding-bottom: 10px;
		}
	}
	svg path {
		fill: #000 !important;
		&:hover{
			fill: $color_brand !important;
		}
	}
    .navbar-nav {
        .nav-item {
			.social-button{
				.phone{
					margin-top: 7px;
				}
			}
            .nav-link {
				color: #000 !important;
                position: relative;
                letter-spacing: 0.8px;
				font-size: 20px;
				padding-right: 13px;
        		padding-left: 13px;
				@media (max-width: 991.98px){
					padding: 5px 10px;
				}
				&:hover{
					color: #f12b8c !important;
				}
                &.active {
                    color: #f12b8c !important;
                }
            }
        }

    }
}

.shrink {
    @include fade;

    & * {
        @include fade;
    }
    &.navbar {
        background-color: $color_lightgrey;
        box-shadow: $box-shadow;
        padding-top: 0px;
        padding-bottom: 0px;
        .navbar-brand {
            img,
            .svg {
                height: 99px !important;
            }
            svg {
                height: 99px;
                path {
                    fill: #000000;
                }
            }
        }
        .navbar-top {
            opacity: 0;
            max-height: 0;
            padding: 0;
            margin: 0;
        }
        .btn-link {
            background: transparent !important;

            svg {
                path {
                    fill: #000000;
                }
            }
        }
    }
    & .search {
        form {
            button {
                .nav-icon {
                    background-color: transparent;
                    color: $color_brand;
                    * {
                        color: $color_brand;
                    }
                    svg path {
                        fill: $color_brand !important;
                    }
                }
            }
        }

        &:hover,
        &:active {
            form {
                input {
                    border: 1px solid rgba($color_brand, .5);
                }

            }
        }
    }
}
.modal-open {
    .btn-link {
        .bi-list {
            &::before {
                content: '\F659';
            }
        }
    }
}
.modal-fullscreen {
    margin: 1.5rem auto;
    width: calc(100vw - 3rem);
    height: calc(100% - 3rem);
    overflow-y: scroll;
}

/////////////////////////////////////////////////////
// FOOTER
/////////////////////////////////////////////////////
footer {

    .container{
        @media (max-width: 1099.98px) {
            padding-left: 25px !important;
        }

        @media (max-width: 991.98px) {
            padding-left: 0px !important;
        }

        @media (max-width: 575.98px) {
            padding-left: 20px !important;
        }
    }

    .footer-da{
        height: 100%;
        @media (max-width: 991.98px) {
            margin-top: 30px;
        }
    }

    .icon-phone {
        height: 20px !important;
        color:#ffffff;
        padding-right: 5px;
    }

    .icon-at {
        height: 20px !important;
        padding-right: 5px;
    }

    font-weight: $font-weight-medium;
    overflow: hidden;
    &::after {
        content: '';
        background-color: $color_brand_light;
        position: absolute;
        @media (max-width: 991.98px) {
            width: 100vw;
            height: 100vw;
        }
        @media (max-width: 767.98px) {
            width: 130vw;
            height: 130vw;
        }
    }

    a, a:link, a:active {
        color: rgba($color_white,1);
        &:hover,
        &:focus {
            img,
            svg {
                path {
                    fill: $color_white !important;
                    @include fade;
                }
            }
        }
    }
    .address {
        img, svg {
            height: 65px;
            width: auto;

            @media (max-width:991.98px){
                height: 55px;
            }
            @media (max-width:767.98px){
                height: 50px;
            }

            @media (max-width:575.98px){
                height: 45px;
            }
            @media (max-width:425.98px){
                height: 40px;
            }
            @media (max-width:229.98px){
                height: 30px;
            }
        }
    }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        &.big {
            @include headlinebasic;
            @include h2-font-size;
            line-height: 1.2;
            @media (max-width: 575.98px) {
                @include h3-font-size;
            }
        }
    }
    .quicknav {
        a {
            width: 100%;
            display: inline-block;
            padding: 0.25rem 0;
            @media (max-width:767.98px){
                padding: 0.5rem 0;
            }
        }
    }

    .subfooter {

        padding-top: 0px;
        padding-bottom: 30px;

        @media (min-width:1700.98px){
            padding-top: 30px;;
        }

        @media (max-width:1199.98px){
            padding-top: 30px;;
        }
        .footer-links{
            text-align: center;

            @media (max-width:1399.98px){
                padding-right: 10px;
            }
            @media (max-width:767.98px){
                width: 100%;
                align-items: center;
            }
            @media (max-width:575.98px){
                width: 85%;
                align-items: center;
            }
        }
        border-color: $color_white !important;

        .text-light {
            span{
                letter-spacing: 0px !important;
            }
        }
        a {
            &:hover {
                @media (max-width: 767.98px){
                    color: $color_brand_light !important;
                    background-color:#fff;
                    border: #fff solid 1px;
                }
                color: white !important;
            }
            letter-spacing: 0px !important;
            @media (max-width:767.98px){
                display: block;
                padding: .75rem;
                border: 1px solid;
                margin-top: 1rem;
            }
            &::before {
                @media (min-width:768px){
                    content: '';
                    padding-left: 2rem;
                    display: inline-block;
                }
            }
            &.backtotop {
                position: fixed;
                bottom: 1rem;
                z-index: 5;
                right: 0;
                display: none;

                @media (max-width: 767.98px) {
                    padding: 0;
                    border: none;
                }
                span {
                    background-color: $color_brand;
                    width: 50px;
                    height: 50px;
                    text-align: center;
                }
            }
        }
    }

    .subfooterlinks {
        @media (max-width:991.98px) {
            margin-top: 1.5rem !important;
        }
        a {
            &::before {
                content: none;
            }
        }
    }
    .socialiconwrapper {
        align-items: center;

        @media (max-width:1199.98px) {
            margin-top: 10px !important;
        }

        @media (max-width:991.98px) {
            margin-top: 0px !important;
        }

        @media (max-width:580.98px) {
            flex-direction: column;
        }
        .socialicon {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            border: 2px solid $color_white;
            margin-top: 0 !important;

            &::before {
                content: none;
            }

            img, svg {
                width: auto;
                height: 25px;
                @include center;

                path {
                    fill: $color_white !important;
                }
            }
            &:hover {
                background-color: $color_white;
                img, svg {
                    path {
                        fill: $color_brand !important;
                    }
                }
            }
            & + .socialicon {
                margin-left: 0.5rem;
            }
        }
    }
}
/////////////////////////////////////////////////////
// CONTENT
/////////////////////////////////////////////////////

// Effekte
.blur {
    @include vendor-prefix(backdrop-filter, blur(10px));
}
.hyphens {
    @include vendor-prefix('hyphens', 'auto');
}
.color_brand {
    color: $color_brand !important;
}
.bg_brand {
    background-color: $color_brand !important;
    color: $color_white;
}
.bg_secondary, .bg-secondary {
    background-color:#ffffff;
    color: #000000;
}

.bg_footer {
    background-color: $color_brand_light;
    p{
        color: #fff !important;
    }
}

.bg_grey {
    background-color: $color_lightgrey !important;
}

// Buttons
.btn {
    border: none;
    @include font-size-base;
    @include font-size;
    font-weight: $font-weight-base;
    padding: 1rem 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;

    &:focus,
    &:active,
    &.show {
        background-color: $color_brand_light;
    }
}



.btn-primary, .btn-default {
    background-color: $color_brand_light;
    border-radius: 0px !important;
    color: #fff !important;
    border:3px solid $color_brand_light;
    padding: 8px 43px 8px 43px;
    letter-spacing: normal !important;
    @media (max-width: 767.98px) {
        padding: 8px 23px 8px 23px;
    }
    &:active {
        background-color: $color_transparent !important;
        border:3px solid $color_brand_light !important;
        color: $color_brand_light !important;
    }
    &:hover{
        background-color: $color_transparent;
        border:3px solid $color_brand_light;
        color: $color_brand_light !important;
    }
}

.btn-outline-light {
    border: 2px solid $color_white;
}
.btn-outline-default {
    border: 2px solid $color_brand;
}
.btn-link {
    text-decoration: none;
}

// Dropdowns
.dropdown-toggle {
    &::after {
        @include icon();
        content: '\F282';
        border: none;
        vertical-align: baseline;
        font-size: 65%;
        margin-left: 0;
    }
}
.dropdown-item {
    color: $color_basic;
    &:focus,
    &:hover {
        color: $color_brand;
        background-color: $color_brand_light;
    }
}

// Content

section, .section,
footer {
    @include masterfloat();
}
section,
.section {
    padding-top: 150px;
    padding-bottom: 150px;
    @media (max-width: 1099.98px) {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    @media (max-width: 767.98px) {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    ul, ol {

        li {
            list-style: none;
            position: relative;

            &::before {
                position: absolute;
                color: $color_brand;

            }
        }
    }
    // unorderd
    ul {
        padding-left: 1.75rem;
        li {
            &::before {
                @include icon;
                content: "\F633";
                left: -1.75rem;
                font-size: 1.5rem;
                top: 0.2em;
            }
        }
    }
    // orderd
    ol {
        counter-reset: section; /* Creates a new instance of the section counter with each ol element */
        padding-left: 1.5rem;
        li {
            margin-left: 0rem;
            &::before {
                counter-increment: section; /* Increments only this instance of the section counter */
                content: counters(section, ".") ". "; /* Combines the values of all instances of the section counter, separated by a period */
                font-weight: $font-weight-bold;
                //margin-left: calc(-40px - 0.5rem);
                //width: 40px;
                text-align: right;
                color: $color_brand;
                position: relative;
            }
        }
    }
}
.two-column {
    column-count: 2;
    column-gap: 45px;
    @include vendor-prefix('hyphens', 'auto');
    @media (max-width: 1099.98px) {
        column-count: 1 !important;
    }
}


.titlearea {
    &.small{
        height: 60vh !important;
        @media (max-width: 991.98px) {
            height: 70vh !important;
        }
        @media (max-width: 575.98px) {
            height: 100vh !important;
        }
        .textwrapper{
            margin-left: 12px;
            margin-right: 12px;
            padding: 15px 25px !important;
            background: rgba(241,43,140,0.70);
            width: auto !important;
            margin-bottom: 4rem;
            @media (max-width: 575.98px) {
                margin-left: 17px;
                margin-right: 17px;
            }
            .h1{
                letter-spacing: 1px;
                line-height: 1.2;
                text-shadow: none;
                color: #fff;
                font-weight: 700 !important;
                font-size: 60px !important;
                margin-bottom: 0px !important;
                display: flex;
                text-transform: none !important;
                align-items: center;
                @media (max-width: 991.98px) {
                    font-size: 50px !important;
                    line-height: 1.1;
                }
                @media (max-width: 575.98px) {
                    font-size: 35px !important;
                }
            }
        }
    }
    td{
        padding-right: 20px;
        color: #fff;
        font-size: 23px;
        line-height: 1.6;
        @media (max-width: 575.98px) {
            font-size: 20px;
            padding-right: 18px;
            line-height: 1.5;
        }
    }
    .openingtimes{
        padding: 0px !important;
        background: rgba(241,43,140,0.55);
        .h1{
            text-shadow: none;
            color: #fff;
            font-weight: 700 !important;
            font-size: 50px !important;
            margin-bottom: 0px !important;
            display: flex;
            align-items: center;
            @media (max-width: 991.98px) {
                font-size: 40px !important;
            }
            @media (max-width: 575.98px) {
                font-size: 30px !important;
            }
        }
        .subline{
            color: #fff;
            text-shadow: none;
            margin-bottom: 7px;
            font-size: 30px !important;
            @media (max-width: 575.98px) {
                font-size: 27px !important;
            }
        }
        .svg{
            width: 40px !important;
            margin-right: 20px;
            @media (max-width: 991.98px) {
                width: 35px !important;
            }
            @media (max-width: 575.98px) {
                width: 29px !important;
                margin-right: 15px;
            }
        }
        &.bottom-0 {
            bottom: 70px !important;
        }
        .openingtimeswrapper{
            padding: 25px;
        }
        .phonewrapper{
            background-color: $color_brand;
            padding: 10px 25px;
        }
    }
    .h1{
        text-shadow: 0px 0px 25px #000;
    }
    .subline{
        text-shadow: 0px 0px 15px #000;
    }
    @include masterfloat();
    //height: 100vh;
    height: var(--app-height);
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    &.half {
        height: 650px;
        max-height: 75vh;
    }

    picture {
        &::before {
            content: '';
            width: 100%;
            height: 100%;
            @include center;
            background-color: rgba($color_basic,.2);
        }
    }

    img {
        display: block;
        width: 100%;
        object-fit: cover;
        object-position: center;
        //height: 100vh;
        height: var(--app-height);

    }
    .container {
        z-index: 2;
    }
}
.text-image {
    background-image: url(https://www.emsa.com/fileadmin/media/inspirationen/drink2go/eco/teaser-emsa-drink2go-auswahlhilfe.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    .container {
        .row {

            //&:nth-child(odd),
            &.flex-row-reverse {
                flex-direction: row-reverse!important;

                .textwrapper {
                    padding-right: 1.5rem;
                    padding-left: calc(var(--bs-gutter-x) * .5);
                }
            }
            &.section {
                float: none;
                width: auto;
                &:first-of-type,
                + .section {
                    padding-top: 0;
                }
                &:last-of-type {
                    padding-bottom: 0;
                }
            }
        }
    }
}

.text-image-background {
    background-image: url(http://dummy.cybob.com//10360_Hehmann/dummy_hehmann/packages/default_site_package/Resources/Public/Images/hehmann-karte.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    .container {
        .row {

            //&:nth-child(odd),
            &.flex-row-reverse {
                flex-direction: row-reverse!important;

                .textwrapper {
                    padding-right: 1.5rem;
                    padding-left: calc(var(--bs-gutter-x) * .5);
                }
            }
            &.section {
                float: none;
                width: auto;
                &:first-of-type,
                + .section {
                    padding-top: 0;
                }
                &:last-of-type {
                    padding-bottom: 0;
                }
            }
        }
    }
}
.teasergrid {
    .teaser {
        &.square {
            .squarewrapper {
                &::after {
                    position: absolute;
                    content: "";
                    width: 100%;
                    height: 100%;
                    background: rgba($color_brand,.28);
                    //background: $color_brand;
                    left: 0;
                    top: 0;
                    //mix-blend-mode: multiply;
                }
                .image {
                    width: 100%;
                    height: 0;
                    padding-top: 100%;
                    position: relative;
                    img {
                        width: 100%;
                        height: 100%;

                        object-fit: cover;
                        @include center;

                    }
                }
            }

        }
    }
}
.jobs {
    border-radius: 0;
    * {
        color: $color_white;
    }
    .job {
        background-color: transparent;
        border-radius: 0 !important;
        border: none;
        padding: 2rem;
        position: relative;
        &:hover {
            text-shadow: 0 0 20px rgba($color_basic, .4);
        }

        + .job {
            &::before {
                border-top: 2px solid #fff;
                content: '';
                width: calc(100% - 4rem);
                display: inline-block;
                top: 0;
                position: absolute;
            }
        }
    }
}
.bigicon {
    svg {
        max-width: 100px;
        max-height: 100px;
        width: 100%;
        height: auto;
        filter: drop-shadow(0 0  20px rgba($color_basic, .2));
    }
}
code {
    color: $color_brand_dark;
}
.accordion {


    &.career{
        p{
            margin-bottom: 5px !important;
        }
        ul{
            margin-bottom: 40px;
        }
        strong{
            font-size: 22px;
            @media (max-width: 575.98px) {
                font-size: 20px;
            }
        }
        li{
            padding-left: 5px;
            line-height: 1.6;
        }
        .downloadimg{
            width: 100%;
        }
        .download{
            @media (max-width: 1199.98px) {
                margin-top: 30px !important;
            }
        }
        .downloadwrapper{
            background-color: $color_brand;
            padding: 20px;
            font-size: 20px;
            color: #fff;
            letter-spacing: 0.3px;
            @media (max-width: 575.98px) {
                font-size: 16px;
            }
            &:hover{
                background-color: $color_brand_dark;
            }
            .svg{
                width: 25px;
                margin-right: 10px;
                @media (max-width: 575.98px) {
                    width: 18px !important;
                }
            }
        }
    }
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-active-color: $color_brand;
    --bs-accordion-active-bg: rgba($color_brand, .05);
    border-top: 2px solid #000;
    border-bottom: 1px solid #000;
    margin-top: 40px;
    .accordion-body{
        padding: 0px 100px 20px 0px;
        letter-spacing: normal !important;
        @media (max-width: 767.98px) {
            padding: 0px 60px 20px 0px;
        }
        @media (max-width: 575.98px) {
            padding: 0px 30px 20px 0px;
        }

    }

    .accordion-item{
        background-color: transparent;
        border-top: solid #000 1px;
        border-bottom: solid #000 2px;
        border-left: none;
        border-right: none;
    }
	.optik{
		background-color: $color_lightgrey;
		color: #000;
		text-transform: uppercase;
		padding: 15px;
        border-radius: 7px;
	}
    .accordion-button {
        font-size: 25px;
        color: #000000;
        font-weight: $font-weight-semibold;
        padding: 20px 20px 20px 0px;
        @media (max-width: 991.98px) {
            padding: 17px 20px 17px 0px;
        }
        @media (max-width: 767.98px) {
            font-size: 22px;
        }
        @media (max-width: 575.98px) {
            font-size: 20px;
        }
        &.collapsed{
            background-color: transparent;
        }

        &:after {
            content: '\F282';
            @include icon;
            color: $color_brand;
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: $h3-font-size;
            background-image: none;
        }
        &:not(.collapsed) {
            box-shadow: none;
            background-color: transparent;
            &::after {
                content: '\F282';
                transform: rotate(-180deg) translate(15%,30%);
            }
        }
    }

}


.socialmedia {
    .socialicon {
        @media (max-width:767.98px) {
            display: block !important;
            text-align: center;
        }

        a {

            position: relative;
            display: inline-block;
            width: 130px;
            height: 130px;
            margin: 0 .5rem;
            background: $color_brand;
            @media (max-width:991.98px) {
                width: 100px;
                height: 100px;
            }
            @media (max-width:575.98px) {
                height: 70px;
                width: 70px;
            }

            /*@media (max-width:767.98px) {
                padding: 2rem 0;
                display: inline-block;
            }*/
            img, svg {
                color: $color_white;
                height: 65px;
                width: auto;
                @include center;

                @media (max-width:991.98px) {
                    height: 45px;
                }
                @media (max-width:575.98px) {
                    height: 25px;
                }

                path {
                    fill: $color_white;
                }

            }
            &:hover {
                background: $color_white;
                border: 2px solid $color_brand;
                img, svg {
                    path, polygon {
                        fill: $color_brand;
                        @include fade();
                    }
                }
            }
        }
    }
}
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    color: #000000;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    background-color: transparent;
    border: none;
    color: #135b3f;
}

.navbar .btn-link svg path {
    &:hover{
        fill: $color_brand !important;
    }
}






.careertext{

    .container{
        @media (max-width: 575.98px)
        {
            padding-left: 15px !important;
        }
    }

    .contactimg{
        width: 70%;
    }
    .contact{
        @media (max-width: 1199.98px) {
            margin-top: 50px;
        }
        p{
            font-size: 25px !important;
            font-weight: 500 !important;
            letter-spacing: 0.3px !important;
        }
    }
    .iconwrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .icon{
        width: 75px;
        margin-bottom: 20px;
        @media (max-width: 1599.98px) {
            width: 70px;
        }
        @media (max-width: 991.98px) {
            width: 60px;
            margin-bottom: 17px;
        }
        @media (max-width: 767.98px) {
            width: 65px;
        }
        @media (max-width: 460.98px) {
            width: 55px;
        }
        @media (max-width: 370.98px) {
            width: 45px;
            margin-bottom: 15px;
        }
    }
    .contactwrapper{
        width: 70%;
        background-color: $color_brand;
        padding: 20px;
        font-size: 20px;
        color: #fff;
        letter-spacing: 0.3px;
        @media (max-width: 575.98px) {
            font-size: 16px;
        }
        a{
            color: #fff !important;
        }
        .svg{
            width: 25px;
            margin-right: 10px;
            @media (max-width: 575.98px) {
                width: 18px !important;
            }
        }
    }
    .icongrid{
        margin-top: 70px;
        .subline{
            color: #000 !important;
            text-align: center;
            font-size: 21px !important;
            @media (max-width: 1599.98px) {
                font-size: 20px !important;
            }
            @media (max-width: 991.98px) {
                font-size: 18px !important;
            }
            @media (max-width: 767.98px) {
                font-size: 21px !important;
            }
            @media (max-width: 575.98px) {
                font-size: 20px !important;
            }
            @media (max-width: 460.98px) {
                font-size: 18px !important;
            }
            @media (max-width: 370.98px) {
                font-size: 16px !important;
            }
        }
    }
}


.grey-bg-section{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background-color: $color_lightgrey;
    img{
        width: 100%;
    }
    .subline{
        color: #000;
        margin-bottom: 10px;
    }
    .h2{
        color: #000;
    }
    p{
        color: #000;
    }
    .imgwrapper{
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    .textwrapper{
        padding-right: 30px !important;
        padding-left: 30px !important;
        @media (max-width: 991.98px) {
            order: 1;
            padding-top: 40px !important;
            padding-bottom: 40px !important;
        }
        @media (max-width: 575.98px) {
            padding-right: 20px !important;
            padding-left: 15px !important;
        }
    }
    ul {
        padding-left: 1.75rem;

        li {
            font-weight: 500 !important;
            line-height: 1.4;
            margin-bottom: 10px;
            letter-spacing: normal;
            &::before {
                @include icon;
                content: "\F285";
                left: -1.75rem;
                font-size: 1.5rem;
            }
        }
    }
}

.ul-long{
    column-count: 2;
}

.pink-bg-section{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background-color: $color_brand;
    img{
        width: 100%;
    }
    .btn{
        border: #fff solid 2px !important;
        background-color: transparent;
        color: #fff !important;
        margin-bottom: 0px !important;
        &:hover{
            border: #fff solid 2px !important;
            background-color: #fff !important;
            color: $color_brand !important;
        }
    }
    .subline{
        color: #fff;
    }
    .h2{
        color: #fff;
    }
    p{
        color: #fff;
    }
    .imgwrapper{
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    .textwrapper{
        padding-right: 30px !important;
        padding-left: 30px !important;
        @media (max-width: 991.98px) {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
        }
        @media (max-width: 575.98px) {
            padding-right: 20px !important;
            padding-left: 25px !important;
        }
    }
}


.square-hover{
    .image {
        display: block;
        width: 100%;
        height: auto;
    }
    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: #008CBA;
    }
    .container:hover .overlay {
        opacity: 0.5;
    }
    .text {
        color: white;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: left;
    }
}





.benefits-new{
    img{
        width: 100%;
    }
    .card-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 12px;
    }
    .card{
        width: 300px;
        border: none !important;
    }
    .card-inner{
        position: relative;
        width: 100%;
        height: 150px;
        padding-bottom: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }
    .card:hover .card-inner{
        transform: rotateY(180deg);
    }
    .card-front, .card-back{
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        display:flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    .card-front{
        background: #f5f5f5;
        text-align: center;
    }
    .card-back{
        background: #587a9a;
        color: #fff;
        transform: rotateY(180deg);
        text-align: center;
        background-repeat: no-repeat;
        background-position: bottom 10px right 10px;
        background-size: 50%;
    }
    .benefiticon{
        width: 85px;
        margin-bottom: 16px;
    }
    .iconTile{
        margin: 0px !important;
        border: 5px #fff solid;
        padding: 50px 30px 24px 30px !important;
    }
    picture{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .col-5{
        flex: 0 0 20%;
        max-width: 20%;
        @media (max-width: 1199.98px) {
            flex: 0 0 25%;
            max-width: 25%;
        }
        @media (max-width: 991.98px) {
            flex: 0 0 33%;
            max-width: 33%;
        }
        @media (max-width: 767.98px) {
            flex: 0 0 50%;
            max-width: 50%;
        }
        @media (max-width: 450.98px) {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    .subline{
        line-height: 1.35rem;
    }
    h2, .h2{
        margin-bottom: 0.9rem;
    }
    p{
        &.text{
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.1rem;
            line-height: 1.5rem;
            padding-left: 15px;
            padding-right: 15px;
        }
    }
    .col-xl-3, .col-lg-3, .col-md-4, .col-sm-6, .col-12{
        padding-right: 6px;
        padding-left: 6px;
    }
}


/////////////////////////////////////////////////////
// CONTACT
/////////////////////////////////////////////////////
.contact-teaser {
    padding-left:0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;

    .icon-phone-contact {
        height: 20px !important;
        color:#000000 !important;
        padding-right: 5px;
    }

    .icon-at-contact {
        height: 20px !important;
        padding-right: 5px;
        color:#000000 !important;
    }

    .contact-img{
        padding-right: 0px !important;
    }


    table {
        border:0px;
        letter-spacing:normal;
    }

    td{
        text-align: left;
        padding-top:2px;
        padding-bottom:2px;
        padding-right:25px;
    }

    .openingtimes{
        &.col-xl-6{
            @media (max-width: 1299.98px) {
                width: 100% !important;
            }
        }
        background-color: $color_brand;
        color:#ffffff;
        padding-left:0px !important;
        padding-right: 0px;
    }

    .openingtimes-wrapper{
        padding:3rem;
        @media (min-width: 320px){
            padding-left: 0px !important;
        }

        @media (min-width: 768px){
            padding-left: 35px !important;
        }
    }

    .contact-person {
        padding-right: 0px !important;
    }

    .contact {
        @media (max-width: 1199.98px){
            width: 50%
        }
        @media (max-width: 991.98px){
            width: 50%
        }
        @media (max-width: 767.98px){
            width: 100%
        }
        background-color: $color_lightgrey;
        color:#000000;
        padding-right:0px;
        padding-left: 0px;
    }

    .contact-wrapper{
        position: absolute;
        bottom: 0px;
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 15px; 
        @media (max-width: 767.98px){
            background-color: $color_lightgrey;
            padding: 20px !important;
			padding-left: 15px !important;
			position: relative !important;
        }   
    }
    .anfahrt-textwrapper{
        padding-top: 5%;
        padding-bottom: 5%;
        padding-right: 5%;

        @media (min-width: 320px){
            padding-left: 0px !important;
        }

        @media (min-width: 768px){
            padding-left: 35px !important;
        }

        @media (min-width: 1024px){
            padding-left: 40px !important;
        }

        @media (min-width: 1440px){
            padding-left: 80px !important;
        }

        @media (min-width: 2250px){
            padding-left: 460px !important;
        }

        @media (min-width: 2560px){
            padding-left: 460px !important;
        }
    }
    background-image: url(http://dummy.cybob.com//10360_Hehmann/dummy_hehmann/packages/default_site_package/Resources/Public/Images/hehmann-karte.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    .container {
        .row {

            //&:nth-child(odd),
            &.flex-row-reverse {
                flex-direction: row-reverse!important;

                .textwrapper {
                    padding-right: 1.5rem;
                    padding-left: calc(var(--bs-gutter-x) * .5);
                }
            }
            &.section {
                float: none;
                width: auto;
                &:first-of-type,
                + .section {
                    padding-top: 0;
                }
                &:last-of-type {
                    padding-bottom: 0;
                }
            }
        }
    }
}

.ml-0{
    margin-left: 0px !important;
}

.textwrapper-teaser{

    padding-right: 5%;

    @media (min-width: 320px){
        padding-left: 0px !important;
    }

    @media (min-width: 768px){
        padding-left: 35px !important;
    }

    @media (min-width: 1024px){
        padding-left: 40px !important;
    }

    @media (min-width: 1440px){
        padding-left: 80px !important;
    }

    @media (min-width: 2250px){
        padding-left: 460px !important;
    }

    @media (min-width: 2560px){
        padding-left: 460px !important;
    }
}

.textwrapper-leistungen{

    @media (min-width: 992px) {
        padding: 40px;
    }
}

.teaser-info{


    .teaser-text{
        margin: 0px !important;
        color: #ffffff !important;
    }

    .info-wrapper{
        color:#fff !important;
        position: relative;
    }

    .teaser-icon{
        height: 20px !important;
        color: #fff !important;
        padding-right: 5px;

    }

    .teaser-image-container{
        position: relative;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;

        @media (max-width: 575.98px){
            margin-bottom:0px;
        }

    }

    .image{
        width: 100%;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    .teaser-hover {
        position: relative;
        float: left;
        width: 100%;
    }
    .hideshow {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 95%;
        top: 0;
        text-align: left;
        background-position-x: -15rem;
        background: rgba(20, 91, 63, 0.90);
        display: -webkit-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex !important;
        padding: 35px;
        align-items: end;
        justify-content: left;

        @media (max-width: 1699.98px){
            height:94%
        }

        @media (max-width: 1399.98px){
            height:96%
        }

        @media (max-width: 991.98px){
            height:94.5%
        }

        @media (max-width: 767.98px){
            height:96.5%
        }

        @media (max-width: 575.98px){
            opacity: 1;
            position: relative;
            height: 100%;
            margin-bottom: 40px;
        }

        @media (max-width: 320.98px){
            padding: 35px 35px 20px 20px;
        }

        &:hover{
            opacity: 1;

        }
    }
}

.link-teaser-hover{
    fill:#ffffff !important;
    color: #ffffff !important;
}

.link-teaser-contact{
    fill:#000000 !important;
    color: #000000 !important;
}

/////////////////////////////////////////////////////
// SWIPER
/////////////////////////////////////////////////////
.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    top:inherit;
    bottom: 0;
    height: 3px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: $color_brand;
}
@import 'default_navigation';
@import 'default_form_powermail';
@import 'default_form_formframework';


.swiper-button-next,
.swiper-button-prev {
    color: $color_brand;
    background-color: #ffffff;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

.swiper-button-prev {
    left: 50px;
}

.swiper-button-next {
    right: 50px;
}

.swiper-pagination-bullet{
    background-color: #ffffff;
    opacity: 1;
}

.swiper-pagination-bullet-active{
    background-color:$color_brand !important;
}



.headslider{
	 padding: 0px !important;
	.openingtimes{
		z-index: 9;
		bottom: 100px;
		position: absolute;
		padding: 0px !important;
		background: rgba(241,43,140,0.55);
		.h1{
			text-shadow: none;
			color: #fff;
			font-weight: 700 !important;
			font-size: 50px !important;
			margin-bottom: 0px !important;
			display: flex;
			align-items: center;
			@media (max-width: 991.98px) {
				font-size: 40px !important;
			}
			@media (max-width: 575.98px) {
				font-size: 30px !important;
			}
		}
		.subline{
			color: #fff;
			text-shadow: none;
			margin-bottom: 7px;
			font-size: 30px !important;
			@media (max-width: 575.98px) {
				font-size: 27px !important;
			}
		}
		tr, td{
			color: #fff !important;
		}
		.svg{
			width: 40px !important;
			margin-right: 20px;
			@media (max-width: 991.98px) {
				width: 35px !important;
			}
			@media (max-width: 575.98px) {
				width: 29px !important;
				margin-right: 15px;
			}
		}
		&.bottom-0 {
			bottom: 70px !important;
		}
		.openingtimeswrapper{
			padding: 25px;
		}
		.phonewrapper{
			background-color: $color_brand;
			padding: 10px 25px;
		}
	} 
	.swiper-slide{
		img{
			height: 100vh;
		}
	}
	
	td{
		padding-right: 20px;
		color: #fff;
		font-size: 23px;
		line-height: 1.6;
		@media (max-width: 575.98px) {
			font-size: 20px;
			padding-right: 18px;
    		line-height: 1.5;
		}
	}
	.swiper-button-prev{
		@media (max-width: 767.98px) {
			left: 30px;
		}
		@media (max-width: 575.98px) {
			display: none;
		}
	}
	.swiper-button-next{
		@media (max-width: 767.98px) {
			right: 30px;
		}
		@media (max-width: 575.98px) {
			display: none;
		}
	}
	.swiper-pagination-bullet{
		width: 13px;
		height: 13px;
		margin: 0px 6px 20px 6px !important;
		border-radius: 0px;
	}
}

.referenzslider{
	background-color: #fff !important;
	.swiper-button-prev{
		@media (max-width: 767.98px) {
			left: 30px;
		}
		@media (max-width: 575.98px) {
			display: none;
		}
	}
	.swiper-button-next{
		@media (max-width: 767.98px) {
			right: 30px;
		}
		@media (max-width: 575.98px) {
			display: none;
		}
	}
}

span{
    color: #fff;
    white-space: nowrap;
}