/* STYLESHEET DER WEBSEITE www.mag-stb.de #################### */

/* WEBFONTS #################################################### */

@font-face {
    font-family: 'Open Sans Bold';
    src: url('fonts/OpenSans-Bold.eot');
    src: url('fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Bold.woff2') format('woff2'),
        url('fonts/OpenSans-Bold.woff') format('woff'),
        url('fonts/OpenSans-Bold.ttf') format('truetype'),
        url('fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.eot');
    src: url('fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Regular.woff2') format('woff2'),
        url('fonts/OpenSans-Regular.woff') format('woff'),
        url('fonts/OpenSans-Regular.ttf') format('truetype'),
        url('fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* END WEBFONTS ################################################ */

/* VARIABLEN #################################################### */

:root {

/* TYPOGRAFIE */

--font-light: 'Open Sans';
--font-bold: 'Open Sans Bold';

--small-text: 0.813em;
--normaler-text: 1em;
--navigation: 1.125em;
--h1: calc(1.375rem + 1.5vw);
--h2: calc(1.325rem + .9vw);
--h3: calc(1.1rem + .5vw);
--h4: calc(.9rem + .4vw);


/* SMARTSLIDER */

--ss-dt-headline: 3.1em;
--ss-dt-text: 2.1em;

--ss-mo900-headline: 45px;
--ss-mo900-text: 30px;
--ss-mo900-list: 20px;

--ss-mo700-headline: 39px;
--ss-mo700-text: 26px;
--ss-mo700-list: 26px;

--ss-mo500-headline: 30px;
--ss-mo500-text: 17px;
--ss-mo500-list: 17px;

/* COLORS */

--weiss: #fff;
--magenta: #E6007E;
--grau1: #F1F4F6;
--grau2: #999999;
--dunkel: #2B2C2D;
--transparent: rgba(0,0,0,0);

}


/* END VARIABLEN ################################################ */


/* GLOBAL #################################################### */

body {
    font-family: var(--font-light);
    font-size: var(--normaler-text);
}

h1, h2, h3, h4, b, strong {
    font-family: var(--font-bold);
}

h1, h2, h3 {
    text-transform: uppercase;
}

.sppb-addon-content h1 {
    font-size: var(--h1);
}

#mag__startseiteInhalt > div > div.sppb-section-title.center > h3 {
    font-size: var(--h2);
}

.sppb-addon-image-layout-caption h3,
h3.sppb-addon-title,
.sppb-blocknumber h3 {
    font-size: var(--h4);
}

a,
.sppb-blocknumber a,
.highlight {
    color: var(--magenta);
}
a:hover,
.sppb-blocknumber a:hover {
    text-decoration: underline;
    color: var(--magenta);
}

/* PAGEBUILDER */

.sppb-row-column {
    margin-bottom: 30px;
}

#mag_openStreetmap .sppb-row-column,
#mag__kontaktBereich .sppb-row-column {
    margin-bottom: 0px;
}

#mag__startseiteInhalt h3.sppb-title-heading {
    font-size: var(--h3);
    line-height: 140%;
}

#mag__startseiteInhalt .sppb-section-title {
    background-color: var(--magenta);
    color: var(--weiss);
    padding: 20px;
}

.sppb-addon-image-layout-caption {
    background-color: var(--transparent);
    padding: 30px;
}

.sppb-addon-image-layout-caption ul {
    padding-left: 20px;
}

.sppb-addon-image-layout-caption ul li {
    list-style: square;
}

/* END GLOBAL ################################################ */

/* HEADER #################################################### */

#sp-header {
    background-color: var(--dunkel);
}

#sp-menu > div > nav > ul > li > a {
    font-size: var(--navigation);
    text-transform: uppercase;
    color: var(--weiss);
    font-family: var(--font-light);
}

.sp-megamenu-parent>li:last-child>a {
    padding: 0 15px;
}

#sp-menu > div > nav > ul > li:hover > a,
#sp-menu > div > nav > ul > li.current-item.active > a {
    background-color: var(--magenta);
    font-size: var(--navigation);
}

#sp-top-bar {
    background-color: var(--grau1);
}

#sp-top2 ul {
  list-style: none;
  padding: 0;
  display: flex;
  margin: 0;
}

#sp-top2 li {
  padding: 0 5px 0 0;
  border-right: 1px solid var(--dunkel);
  margin-right: 5px;
  color: var(--dunkel);
  font-size: var(--small-text);
}

#sp-top2 li:last-child {
  border-right: none; /* Entfernt die Pipe vom letzten Listenelement */
}

#sp-top2 li a {
    color: var(--dunkel);
    text-decoration: underline;
}

#sp-top2 li a:hover {
    text-decoration: none;
}

/* END HEADER ################################################ */

/* KONTAKTBEREICH #################################################### */

.mag__infoDatenschutz h4 {
    font-size: 90%;
    text-transform: uppercase;
}
.mag__infoDatenschutz p {
    font-size: 80%;
}

input[type="text"]:not(.form-control), 
input[type="email"]:not(.form-control), 
input[type="url"]:not(.form-control), 
input[type="date"]:not(.form-control), 
input[type="password"]:not(.form-control), 
input[type="search"]:not(.form-control), 
input[type="tel"]:not(.form-control), 
input[type="number"]:not(.form-control), 
select:not(.form-select):not(.form-control) {
    border: 1px solid var(--grau2);
    border-radius: 0;
}

.convertforms .cf-input {
    border: 1px solid var(--grau2);
    border-radius: 0;
}



/* OPEN STREET MAP */

.leaflet-popup-content-wrapper {
    border-radius:0;
}

.leaflet-popup-content {
    margin: 0;
}

.leaflet-popup-content h4 {
    color: #fff;
    background-color: var(--magenta);
    padding: 10px 20px;
}

.leaflet-popup-content p {
    margin: 10px 20px;
    font-family: var(--font-light);
}

/* END KONTAKTBEREICH ################################################ */

/* SMARTSLIDER #################################################### */

div[title="Headline"].mag__bigHeadline {
    font-family: var(--font-bold)!important;
    font-size: var(--ss-dt-headline)!important;
    color: var(--magenta)!important;
    line-height: 120%!important;
    margin-bottom: 30px!important;
}

.mag__slideText p {
    font-size: var(--ss-dt-text)!important;
    color: var(--dunkel)!important;
    line-height: 130%!important;
}

.mag__callUs {
    margin: 30px 0 15px 0!important;
}

.mag__listText {
    margin: 20px 0 0 0!important;
}

.mag__listText li,
.mag__callUs p,
.mag__phoneNumber p {
    font-size: var(--ss-mo900-list)!important;
    list-style: square;
    line-height: 130%;
    margin-bottom: 10px;
}

.mag__phoneNumber p span {
    font-size: var(--ss-dt-text)!important;
    font-family: var(--font-bold);
}

/* END SMARTSLIDER ################################################ */

/* MODULE CCTWOCLICK #################################################### */

.tccontentbefore {
    background-color: var(--dunkel);
    color: var(--weiss);
    padding: 20px;
    font-size: var(--small-text);
}

a.mag__video {
    background-color: var(--magenta);
    color: var(--weiss);
    display: block;
    width: 100%;
    border:0;
    border-radius: 0;
    padding: 10px;
    margin-top: 3px;
}

a.mag__video:hover {
    background-color: var(--dunkel);
    color: var(--weiss)
}

/* END MODULE CCTWOCLICK ################################################ */

/* Accordion #################################################### */

#mag__accordionBereich .accordion-button {
  background-color: var(--dunkel);
  color: #fff;
  font-size: 18px;
}

#mag__accordionBereich .accordion-button:not(.collapsed) {
    text-decoration: none;
    background-color: var(--magenta)!important;
}

.accordion {
     --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
  padding-bottom: 40px;
}

.accordion-body h2 small {
  font-size: 50%;
}


/* END Accordion ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */

/* GLOBAL #################################################### */

/* END GLOBAL ################################################ */



/* MEDA QUERIES ############################################## */

@media (701px <= width <= 992px) {

/* SMARTSLIDER #################################################### */

div[title="Headline"].mag__bigHeadline {
    font-family: var(--font-bold)!important;
    font-size: var(--ss-mo900-headline)!important;
    color: var(--magenta)!important;
    line-height: 110%!important;
}

#n2-ss-2 > div > div > div > div.n2-ss-slider-4.n2-ow > div > div.n2-ss-layers-container.n2-ss-slide-limiter.n2-ow > div > div > div > div.n2-ss-layer.n2-ow.n-uc-olJ1koSZzQFe.n2-ss-layer--auto {
    overflow: visible!important;
    padding-bottom: 12px;
}

.mag__slideList p {
    font-size: var(--ss-mo900-text)!important;
    color: var(--dunkel)!important;
    line-height: 130%!important;
    margin-top: 30px;
    display: block;
}

.mag__listText li {
    list-style: square;
}

span.mag__bigNumber {
    font-size: var(--ss-mo500-headline)
}

/* END SMARTSLIDER ################################################ */

}



@media (501px <= width <= 700px) {

/* SMARTSLIDER #################################################### */

div[title="Headline"].mag__bigHeadline {
    font-family: var(--font-bold)!important;
    font-size: var(--ss-mo700-headline)!important;
    color: var(--magenta)!important;
    line-height: 110%!important;
}

#n2-ss-2 > div > div > div > div.n2-ss-slider-4.n2-ow > div > div.n2-ss-layers-container.n2-ss-slide-limiter.n2-ow > div > div > div > div.n2-ss-layer.n2-ow.n-uc-olJ1koSZzQFe.n2-ss-layer--auto {
    overflow: visible!important;
    padding-bottom: 12px;
}

.mag__slideText p {
    font-size: var(--ss-mo700-text)!important;
    color: var(--dunkel)!important;
    line-height: 130%!important;
    margin-top: 30px;
    display: block;
}

/* END SMARTSLIDER ################################################ */

}





@media (992px <= width <= 992px) {

#sp-logo > div > div > a > img.logo-image.d-none.d-lg-inline-block {
    height: 60px;
}

#sp-header {
    height: 80px!important;
}

}


@media (769px <= width <= 992px) {

#sp-header > div > div > div {
    height: 60px;
}

.logo-image-phone {
    height: 60px!important;
}

#offcanvas-toggler {
    background-color: var(--magenta);
    transform: translateY(-25%);
    top: 29%;
    width: 49px;
    height: 49px;
    margin-top: 18px;
    margin-left: 0!important;
}

#offcanvas-toggler:hover {
    background-color: #b72f7e!important;
}

.burger-icon {
    width: 25px;
    cursor: pointer;
    top: 12px;
    position: absolute;
    left: 13px;
}




body.ltr .close-offcanvas {
    width: 49px;
    height: 49px;
    background-color: #fff;
}

.offcanvas-active .burger-icon>span {
    background-color: var(--magenta);
}

#offcanvas-toggler > div > span,
#offcanvas-toggler.active .burger-icon>span {
    background-color: var(--weiss);
}

#offcanvas-toggler > div > span:nth-child(2) {
    max-width: 100%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(2) {
    max-width: 70%;
    transition: .3s;
}

#offcanvas-toggler > div > span:nth-child(3) {
    max-width: 70%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(3) {
    max-width: 50%;
    transition: .3s;
}

}

@media (300px <= width <= 768px) {
    

/* HEADER ######################################################### */

#sp-top-bar {
    padding: 0;
}

#sp-top2 {
    display: none;
}

#sp-header,
#sp-header > div > div > div {
    height: 80px;
}

.logo-image-phone {
    height: 80px!important;
    margin-top: 19px;
}

/* OFFCANVAS TOGGLER */

#offcanvas-toggler {
    background-color: var(--magenta);
    transform: translateY(-25%);
    top: 29%;
    width: 49px;
    height: 49px;
    margin-top: 18px;
    margin-left: 0!important;
}

#offcanvas-toggler:hover {
    background-color: #b72f7e!important;
}

.burger-icon {
    width: 25px;
    cursor: pointer;
    top: 12px;
    position: absolute;
    left: 13px;
}




body.ltr .close-offcanvas {
    width: 49px;
    height: 49px;
    background-color: #fff;
}

.offcanvas-active .burger-icon>span {
    background-color: var(--magenta);
}

#offcanvas-toggler > div > span,
#offcanvas-toggler.active .burger-icon>span {
    background-color: var(--weiss);
}

#offcanvas-toggler > div > span:nth-child(2) {
    max-width: 100%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(2) {
    max-width: 70%;
    transition: .3s;
}

#offcanvas-toggler > div > span:nth-child(3) {
    max-width: 70%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(3) {
    max-width: 50%;
    transition: .3s;
}

.offcanvas-menu {
    background-color: var(--dunkel);
    padding: 0;
}

.offcanvas-menu .offcanvas-inner {
    padding: 30px 13px;
}

.offcanvas-menu .offcanvas-inner ul.menu li a {
    padding: 10px;
    color: var(--magenta);
    background-color: var(--weiss);
    opacity: 1;
    text-transform: uppercase;
    margin-bottom: 1px;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
    background-color: var(--magenta);
    color: var(--weiss)!important;
}



/* END HEADER ##################################################### */

}

@media (300px <= width <= 500px) {


/* SMARTSLIDER #################################################### */

div[title="Headline"].mag__bigHeadline {
    font-family: var(--font-bold)!important;
    font-size: var(--ss-mo500-headline)!important;
    color: var(--magenta)!important;
    line-height: 130%!important;
    margin-bottom: 15px!important;
}

#n2-ss-2 > div > div > div > div.n2-ss-slider-4.n2-ow > div > div.n2-ss-layers-container.n2-ss-slide-limiter.n2-ow > div > div > div > div.n2-ss-layer.n2-ow.n-uc-olJ1koSZzQFe.n2-ss-layer--auto {
    overflow: visible!important;
    padding-bottom: 12px;
}

.mag__listText {
    margin: 0!important;
}

.mag__callUs {
    margin: 10px 0!important;
}


.mag__listText li {
    font-size: var(--ss-mo500-text)!important;
}

.mag__slideText p {
    font-size: var(--ss-mo500-text)!important;
    color: var(--dunkel)!important;
    line-height: 130%!important;
    margin-top: 0px!important;
    display: block;
}

/* END SMARTSLIDER ################################################ */

}