@charset "UTF-8";
/***!  https://onepage-s.kares-webdesign.de/page-css/onepager-s.css  !***/


/* ========================================== BASIS ========================================== */
 html {
     font-size: 16px;
     scroll-behavior: smooth;
}
 body {
     font-family: var(--font-body) !important;
     font-size: 1rem;
     line-height: 1.75;
     color: var(--text);
     background: var(--white);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
 #offcanvas-toggler{
     display: none !important;
}
/* ========================================== TYPOGRAFIE ========================================== */
 body h1, body h2, body h3, body h4, body h5, body h6 {
     font-family: var(--font-heading) !important;
     color: var(--dark);
}
 h1, .h1 {
     font-size: clamp(1.9rem, 2.5vw, 3rem) !important;
     line-height: 1.1 !important;
     font-weight: 800 !important;
     letter-spacing: -0.03em;
     margin-bottom: 1.25rem;
}
 h2, .h2 {
     font-size: clamp(2rem, 3vw, 3rem) !important;
     line-height: 1.1 !important;
     font-weight: 800 !important;
     letter-spacing: -0.03em;
     margin-bottom: 1.25rem;
}
 h3, .h3 {
     font-size: clamp(1.4rem, 2vw, 1.9rem) !important;
     line-height: 1.25 !important;
     font-weight: 700 !important;
     margin-bottom: 1rem;
}
 h4, .h4 {
     font-size: 1.25rem !important;
     line-height: 1.35 !important;
     font-weight: 700 !important;
     margin-bottom: .875rem;
}
 h5, .h5 {
     font-size: 1.125rem !important;
     line-height: 1.4 !important;
     font-weight: 700 !important;
     margin-bottom: .75rem;
}
 h6, .h6 {
     font-weight: 700 !important;
     line-height: 1.4 !important;
     letter-spacing: 0.08em !important;
     text-transform: uppercase !important;
     color: var(--accent) !important;
     margin-bottom: 0.75rem !important;
}
 p {
     margin-bottom: 1.5rem;
}
.article-list .article .article-header h1 a:hover, .article-list .article .article-header h1 a:active, .article-list .article .article-header h1 a:focus, .article-list .article .article-header h2 a:hover, .article-list .article .article-header h2 a:active, .article-list .article .article-header h2 a:focus, .article-list .article .article-header h4 a:hover, .article-list .article .article-header h4 a:active, .article-list .article .article-header h4 a:focus{
    color: var(--accent);
}

/* ==================================================
   HERO SUBHEADING
================================================== */

h6 {

    display: inline-flex !important;

    align-items: center !important;

    gap: .75rem !important;

    padding: .65rem 1rem !important;

    margin-bottom: 1.5rem !important;

    border-radius: 999rem !important;

    background: rgba(var(--accent-rgb), .10) !important;

    color: var(--accent) !important;

    font-size: .85rem !important;

    font-weight: 700 !important;

    letter-spacing: .12em !important;

    text-transform: uppercase !important;
}

h6::before {

    content: "" !important;

    width: .5rem !important;

    height: .5rem !important;

    border-radius: 50% !important;

    background: var(--accent) !important;

    flex-shrink: 0 !important;
}

/* ========================================== Offcanvas ========================================== */
/* ==========================================
   OFFCANVAS
========================================== */

.offcanvas-menu{

    background:#fff !important;


}

/* Logo */

.offcanvas-menu .logo{

    margin-bottom:.5rem;

}

.offcanvas-menu .logo img{

    height:42px !important;

}

/* Close */

.close-offcanvas{

    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    transition:.3s;

}

.close-offcanvas:hover{

    background:rgba(var(--accent-rgb),.10);

}

.close-offcanvas .burger-icon span{

    background:var(--primary) !important;

}

/* Innenabstand */

.offcanvas-inner{

    padding:0 1rem 0 1rem !important;

}

/* Menü */

.offcanvas-menu .mod-menu{

    margin:1rem 0 2rem;

}

.offcanvas-menu .mod-menu>li{

    margin:.25rem 0;

}
.offcanvas-menu .p-3{
    padding-left: 1.8rem !important;
}
.offcanvas-menu .mod-menu>li>a{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:.9rem 1rem !important;

    font-size:1.2rem !important;

    font-weight:600 !important;

    color:var(--text) !important;

    border-radius:14px;

    transition:.3s;

}

/* Hover */

.offcanvas-menu .mod-menu>li>a:hover{

    color:var(--primary) !important;

    background:rgba(var(--accent-rgb),.08);

    padding-left:1.4rem !important;

}

/* Aktiver Menüpunkt */

.offcanvas-menu .mod-menu>li.active>a,
.offcanvas-menu .mod-menu>li.current>a{

    background:rgba(var(--accent-rgb),.12);

    color:var(--primary) !important;

}

/* Untermenü */

.offcanvas-menu .menu-child{

    margin:.3rem 0 .8rem 1.2rem;

    border-left:2px solid rgba(var(--accent-rgb),.30);

    padding-left:1rem;

}

.offcanvas-menu .menu-child li{

    margin:.25rem 0;

}

.offcanvas-menu .menu-child a{

    display:block;

    padding:.55rem 0;

    font-size:1rem;

    color:var(--text-light);

    transition:.3s;

}

.offcanvas-menu .menu-child a:hover{

    color:var(--primary);

    transform:translateX(5px);

}

/* Pfeil */

.offcanvas-menu .menu-toggler{

    color:var(--accent) !important;

}

/* Kontakt */

.sp-contact-info{

    margin:2rem 0 1.5rem !important;

    padding:0.8rem 1rem !important;

    background:var(--section-bg);

    border-radius:18px;

    list-style:none;

}

.sp-contact-info li{

    display:flex;

    align-items:center;

    gap:.75rem;

    margin:.75rem 0;

    font-size:1rem;

}

.sp-contact-info span{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(var(--accent-rgb),.12);

    color:var(--accent);

}

.sp-contact-info a{

    color:var(--text);

    text-decoration:none;

}

.sp-contact-info a:hover{

    color:var(--primary);

}

/* Social */

.social-icons{

    display:flex;

    gap:.9rem;

    margin-top:1.5rem;

    padding:0;

    list-style:none;

}

.social-icons a{

    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--section-bg);

    color:var(--primary);

    transition:.3s;

}

.social-icons a:hover{

    background:var(--accent);

    color:#fff;

    transform:translateY(-4px);

}

/* Trennlinie */

.offcanvas-menu .sp-module{

    position:relative;

}

.offcanvas-menu .sp-module::after{

    content:"";

    display:block;

    height:1px;

    margin-top:1.8rem;

    background:var(--border);

}
body.ltr .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler, body.ltr .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler{
    right: 0;
}
/* ==========================================
   DESKTOP DROPDOWN
========================================== */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  box-shadow: none !important;

}
.sp-dropdown{



    background:#fff !important;

    border:1px solid var(--border) !important;

    border-radius:18px !important;

    overflow:hidden !important;

    box-shadow:
        0 18px 40px rgba(var(--black-rgb),.08),
        0 4px 10px rgba(var(--black-rgb),.04) !important;

    padding:.6rem 0 !important;

    min-width:280px !important;

}

/* Menüeinträge */

.sp-dropdown-items{

    padding:0 !important;

}

.sp-dropdown-items>li{

    margin:0 !important;

}

.sp-dropdown-items>li>a{

    display:flex !important;

    align-items:center;

    padding:1rem 1.5rem !important;

 

    font-weight:600 !important;

    color:var(--text) !important;

    transition:.25s;

    position:relative;

}

/* Linker Farbstreifen */

.sp-dropdown-items>li>a::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:4px;

    height:0;

    border-radius:0 3px 3px 0;

    background:var(--accent);

    transition:.25s;

}

/* Hover */

.sp-dropdown-items>li>a:hover{

    background:rgba(var(--accent-rgb),.08) !important;

    color:var(--primary) !important;

    padding-left:2rem !important;

}

.sp-dropdown-items>li>a:hover::before{

    height:60%;

}

/* Aktiver Menüpunkt */

.sp-dropdown-items>.current-item>a,
.sp-dropdown-items>.active>a{

    color:var(--accent) !important;

    background:rgba(var(--accent-rgb),.10) !important;

}

.sp-dropdown-items>.current-item>a::before,
.sp-dropdown-items>.active>a::before{

    height:70%;

}

/* Abstand zwischen Einträgen */

.sp-dropdown-items>li+li{

    border-top:1px solid rgba(var(--black-rgb),.05);

}
/* ========================================== LINKS ========================================== */
 a {
     color: var(--primary);
     text-decoration: none;
     transition: var(--transition);
}
 a:hover {
     color: var(--primary-dark);
     text-decoration: none;
}
/* ========================================== BUTTONS ========================================== */
/* ================================================== STANDARD BUTTON ================================================== */
/* ==========================================
   BLOG - WEITERLESEN
========================================== */

.blog .readmore {
    margin-top: 2rem;
}

.blog .readmore a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;

    padding: .8rem 1.3rem;

    border-radius: 999px;

    background: rgba(var(--accent-rgb), .10);
    color: var(--accent);

    font-weight: 700;
    font-size: .95rem;

    transition: .3s ease;
}

.blog .readmore a::after {
    content: "→";
    transition: .3s ease;
}

.blog .readmore a:hover {
    background: var(--accent);
    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(var(--accent-rgb), .25);
}

.blog .readmore a:hover::after {
    transform: translateX(.35rem);
}
.article-list .article .readmore a:hover, .article-list .article .readmore a:active, {
    color: #fff;
}
.article-list .article .readmore a:focus{
    color: inherit;
}
 .sppb-btn-primary {
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     padding: 0.95rem 1.75rem !important;
     border: none !important;
     border-radius: 0.875rem !important;
     background: var(--accent) !important;
     color: var(--white) !important;
     font-weight: 600 !important;
     line-height: 1 !important;
     text-decoration: none !important;
     transition: all .3s ease !important;
     box-shadow: 0 10px 30px rgba(15, 23, 42, .15) !important;
}
 .sppb-btn-primary:hover {
     background: var(--primary) !important;
     color: var(--white) !important;
     text-decoration: none !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 15px 40px rgba(15, 23, 42, .20) !important;
}
.sppb-btn-primary i{
    transform: rotate(-45deg);
    margin-left: 0.8rem !important; 
}
/* ==================================================
   PAGE TITLE
================================================== */
.home #sp-page-title{
    display: none;
}
#sp-page-title {
    position: relative;
    overflow: hidden;
 
    background: var(--dark);
}

.sp-page-title {
       padding: 10rem 0 5rem; 
}

#sp-page-title::before {
    content: "";
    position: absolute;
    top: -15rem;
    right: -10rem;

    width: 35rem;
    height: 35rem;

    border-radius: 50%;

    background: rgba(var(--primary-rgb), 0.3);

    z-index: 1;
}

#sp-page-title::after {
    content: "";
    position: absolute;
    bottom: -12rem;
    left: -8rem;

    width: 28rem;
    height: 28rem;

    border-radius: 50%;

    background: rgba(var(--accent-rgb), .08);

    z-index: 1;
}

#sp-page-title .container {
    position: relative;
    z-index: 2;
}
.sp-page-title{
    position: relative !important;
    overflow: hidden !important;
    background: none;
}

.sp-page-title::before{
    content: "";
    position: absolute;
    inset: 0;

  background: rgba(8,23,44,.70);

    z-index: 1;
}

.sp-page-title > .container{
    position: relative;
    z-index: 2;
}



/* ==================================================
   MODAL
================================================== */

.white-popup-block {

    background: var(--white) !important;

    max-width: 800px !important;

    width: calc(100% - 2rem) !important;

    margin: auto !important;

    border-radius: 2rem !important;

    overflow: hidden !important;

    box-shadow:
        0 2rem 6rem rgba(var(--primary-rgb), .25) !important;

    position: relative !important;
}

/* Inhalt */

.white-popup-block .modal-inner-block {

    padding: 3rem !important;

    font-size: 1.125rem !important;

    line-height: 1.8 !important;

    color: var(--text-color) !important;
}

/* Überschrift im Modal */

.white-popup-block h3 {

    font-size: 2rem !important;

    margin-bottom: 1.5rem !important;

    color: var(--primary) !important;
}

/* Liste */

.white-popup-block ul {

    margin: 1.5rem 0 !important;

    padding-left: 1.5rem !important;
}



/* Schließen-Button */

.white-popup-block .mfp-close {

    width: 3rem !important;

    height: 3rem !important;

    line-height: 3rem !important;

    font-size: 2rem !important;

    color: var(--primary) !important;

    top: 1rem !important;

    right: 1rem !important;

    opacity: 1 !important;

    transition: .3s ease !important;
}

.white-popup-block .mfp-close:hover {

    transform: rotate(90deg) !important;

    color: var(--accent) !important;
}

/* Hintergrund */

.mfp-bg {

    background: rgba(5, 18, 48, .85) !important;

    backdrop-filter: blur(8px) !important;
}


/* ================================================== BEWERBUNGS BUTTON ================================================== */
/* ================================================== BEWERBUNGS BUTTONS ================================================== */
 .sppb-btn-bewerben, .sppb-btn-whatsapp, .initiativ-btn {
     text-align: left;
     padding: 0.95rem 1.75rem !important;
     border: none !important;
     border-radius: 0.875rem !important;
     background: var(--accent) !important;
     color: var(--white) !important;
     font-weight: 700 !important;
     line-height: 1 !important;
     text-decoration: none !important;
     transition: all .3s ease !important;
     box-shadow: 0 10px 30px rgba(var(--accent-rgb),.25) !important;
}
 .sppb-btn-bewerben i, .initiativ-btn i {
     font-size: 1.5rem !important;
     display: block;
     position: relative;
     top: 3px;
     float: left;
     margin-right: 8px !important;
     border-right: 1px solid #eee;
     padding-right: 8px;
}
 .sppb-btn-bewerben span, .initiativ-btn span{
     font-style: italic !important;
     font-weight: normal;
     font-size: 0.9rem;
     text-transform: none;
     text-align: left !important;
}
 .sppb-btn-bewerben:hover, .sppb-btn-whatsapp:hover, .initiativ-btn:hover {
     color: var(--white) !important;
     text-decoration: none !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 15px 40px rgba(var(--accent-rgb),.35) !important;
}
 .sppb-btn-bewerben:hover, .initiativ-btn:hover {
     color: var(--white) !important;
     text-decoration: none !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 15px 40px rgba(var(--accent-rgb),.35) !important;
}
/* ========================================== HERO STELLEN BUTTON ========================================== */
 .sppb-btn-dark{
     text-align:left;
     padding:0.95rem 1.75rem !important;
     border:none !important;
     border-radius:0.875rem !important;
     background:var(--secondary) !important;
     color:var(--white) !important;
     font-weight:700 !important;
     line-height:1 !important;
     text-decoration:none !important;
     transition:all .3s ease !important;
     box-shadow: 0 10px 30px rgba(var(--secondary-rgb), .25) !important;
}
 .sppb-btn-dark i{
     font-size:1.5rem !important;
     display:block;
     position:relative;
     top:3px;
     float:left;
     margin-right:8px !important;
     border-right:1px solid rgba(255,255,255,.25);
     padding-right:8px;
}
 .sppb-btn-dark span{
     font-style:italic !important;
     font-weight:400;
     font-size:0.9rem;
     text-transform:none;
     text-align:left !important;
     opacity:.9;
}
 .sppb-btn-dark:hover{
     background:var(--third) !important;
     color:var(--white) !important;
     text-decoration:none !important;
     transform:translateY(-2px) !important;
     box-shadow: 0 15px 40px rgba(var(--secondary-rgb), .35) !important;
}
/* ========================================== HELFERKLASSEN ========================================== */
 .text-center {
     text-align: center;
}
 .text-muted {
     color: var(--text-light) !important;
}
 .shadow-card {
     background: var(--white);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
}
/* ==========================================
   LEISTUNGEN
========================================== */

#leistungen p{
margin-bottom: 0px;
}


/* ==================================================
   HEADER
================================================== */
#offcanvas-toggler{
   display: none !important;
}
#sp-header {
box-shadow: none;
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;

    z-index: 9999 !important;

    background: transparent !important;

    transition: var(--transition) !important;
}

.sub #sp-header{
    background: #fff !important;
}

/* ==================================================
   LOGO
================================================== */

#sp-logo img {

    height: 2.75rem !important;

    width: auto !important;

    transition: var(--transition) !important;
}

/* ==================================================
   NAVIGATION
================================================== */

.sp-megamenu-parent {

    display: flex !important;

    align-items: center !important;

    gap: 2rem !important;
}

.sp-megamenu-parent > li {

    margin: 0 !important;
}

.sp-megamenu-parent > li > a {

    position: relative !important;

    font-family: var(--font-heading) !important;

    font-size: 0.95rem !important;

    font-weight: 600 !important;

    color: var(--text) !important;

    padding: 0.5rem 0 !important;

    transition: var(--transition) !important;
}

.sp-megamenu-parent > li > a:hover {

    color: var(--primary) !important;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a{
    font-size: 0.9rem;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a{
    color: var(--accent);
}
.sp-dropdown-main{
    width: 340px !important;
}
/* ==================================================
   HOVER LINIE
================================================== */

.sp-megamenu-parent > li > a::after {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;

    bottom: -0.35rem !important;

    width: 0 !important;

    height: 0.125rem !important;

    background: var(--cta) !important;

    transition: var(--transition) !important;
}

.sp-megamenu-parent > li > a:hover::after,
.sp-megamenu-parent > li.active > a::after {

    width: 100% !important;
}

/* ==================================================
   AKTIVER MENÜPUNKT
================================================== */

.sp-megamenu-parent > li.active > a {

    color: var(--primary) !important;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span{
    line-height: 100%; 
}
/* ==================================================
   TELEFON BUTTON
================================================== */
/* ==================================================
   HEADER PHONE
================================================== */
/* ==================================================
   HEADER VERTICAL ALIGN
================================================== */

#sp-sp-header .row {

    align-items: center !important;
}

#sp-logo,
#sp-menu,
#sp-user4 {

    display: flex !important;

    align-items: center !important;
}

#sp-user4 .sp-column {

    width: 100% !important;

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    height: 100% !important;
}

/* SP Page Builder Wrapper neutralisieren */

#sp-user4 .sppb-section,
#sp-user4 .sppb-row-container,
#sp-user4 .sppb-row,
#sp-user4 .sppb-row-column,
#sp-user4 .sppb-column {

    margin: 0 !important;

    padding: 0 !important;

    min-height: auto !important;

    align-items: center !important;
}
.header-phone {

    flex: 0 0 auto !important;

    margin-left: auto !important;
}

.header-phone-inner {

    display: flex !important;

    align-items: center !important;

    gap: 1rem !important;
}

.header-phone-icon {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 3rem !important;

    height: 3rem !important;

    border-radius: 50% !important;

    background: rgba(var(--accent-rgb), .12) !important;

    color: var(--accent) !important;

    flex-shrink: 0 !important;

    transition: var(--transition) !important;
}

.header-phone-icon i {

    font-size: 1rem !important;
}

.header-phone-content {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    gap: .15rem !important;
}

.header-phone-label {

    display: block !important;

    font-size: .8rem !important;

    line-height: 1 !important;

    color: var(--text-light) !important;

    font-weight: 500 !important;
}

.header-phone-number {

    font-family: var(--font-heading) !important;

    font-size: 1.2rem !important;

    font-weight: 700 !important;

    line-height: 1.1 !important;

    color: var(--primary) !important;

    text-decoration: none !important;

    transition: var(--transition) !important;
}

.header-phone-number:hover {

    color: var(--accent) !important;
}

.header-phone:hover .header-phone-icon {

    transform: scale(1.05) !important;
}

@media (max-width: 991px) {

    .header-phone {

        display: none !important;
    }
}

/* ==================================================
   STICKY HEADER
================================================== */

#sp-header.header-sticky,
#sp-header.sticky {

    position: fixed !important;

    top: 1rem !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

width: calc(100% - 2rem) !important;
max-width: 82rem !important;

    background: rgba(var(--white-rgb), .92) !important;

    backdrop-filter: blur(1rem) !important;

    -webkit-backdrop-filter: blur(1rem) !important;

    border: 0.0625rem solid var(--border) !important;

    border-radius: 1.25rem !important;

    box-shadow: var(--shadow) !important;
}

#sp-header.header-sticky .container-inner,
#sp-header.sticky .container-inner {

    min-height: 5rem !important;
}

/* ==================================================
   STICKY LOGO
================================================== */

#sp-header.header-sticky #sp-logo img,
#sp-header.sticky #sp-logo img {

    height: 2.4rem !important;
}

/* ==================================================
   HEADER EINBLENDUNG
================================================== */

#sp-header.header-sticky,
#sp-header.sticky {

    animation: headerFadeIn .35s ease forwards !important;
}

@keyframes headerFadeIn {

    from {

        opacity: 0;

        transform: translateX(-50%) translateY(-1rem);
    }

    to {

        opacity: 1;

        transform: translateX(-50%) translateY(0);
    }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 991px) {

    #sp-header {

        position: fixed !important;

        background: rgba(var(--white-rgb), .96) !important;

        backdrop-filter: blur(.75rem) !important;

        -webkit-backdrop-filter: blur(.75rem) !important;

        box-shadow: var(--shadow) !important;
    }

    #sp-header .container-inner {

        min-height: 4.75rem !important;
    }

    #sp-logo img {

        height: 2.2rem !important;
    }

    .header-phone {

        display: none !important;
    }

    #offcanvas-toggler {

        margin-left: auto !important;
    }
}




/* ==================================================
   HERO
================================================== */

#start {

    position: relative !important;

    overflow: hidden !important;

 

    background: var(--section-bg-alt) !important;
}

/* ==================================================
   HINTERGRUND DEKO
================================================== */

#start::before {

    content: "" !important;

    position: absolute !important;

    top: -15rem !important;

    right: -10rem !important;

    width: 40rem !important;

    height: 40rem !important;

    border-radius: 50% !important;

    background: rgba(var(--primary-rgb), .04) !important;

    z-index: 1 !important;
}




/* ==================================================
   EYEBROW
================================================== */
#start h1{
    border-left: 5px solid var(--accent);
    padding-left: 1rem;
}



/* ==================================================
   HEADLINE
================================================== */

#start h1 {


    margin-bottom: 2rem !important;
}

/* ==================================================
   TEXT
================================================== */

#start p {

    max-width: 34rem !important;

    color: var(--text-light) !important;

    font-size: 1.125rem !important;

    margin-bottom: 2rem !important;
}

/* ==================================================
   BUTTON
================================================== */

#start .sppb-btn {

    min-height: 3.5rem !important;

    padding: 1rem 2rem !important;

    border-radius: 1rem !important;

    box-shadow: var(--shadow) !important;

    transition: var(--transition) !important;
}

#start .sppb-btn:hover {

    transform: translateY(-0.125rem) !important;
}



/* ==================================================
   HERO BILDER
================================================== */

#start .img-main {

    position: relative !important;

    z-index: 2 !important;

    animation: heroFloatLarge 8s ease-in-out infinite !important;
}

#start .img-main img {

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: cover !important;

    border-radius: 3rem 0 3rem 0 !important;

    box-shadow: var(--shadow) !important;
}

/* ==================================================
   KLEINES BILD
================================================== */

#start .img-small {

    position: absolute !important;

    left: -2rem !important;

    bottom: -3rem !important;

    width: 42% !important;

    z-index: 3 !important;

    animation: heroFloatSmall 6s ease-in-out infinite !important;
}

#start .img-small img {

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: cover !important;

    border-radius: var(--radius) !important;

    border: .5rem solid var(--white) !important;

    box-shadow: var(--shadow) !important;
}

/* ==================================================
   FLOATING EFFECT
================================================== */

@keyframes heroFloatLarge {

    0%,100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-0.5rem);
    }
}

@keyframes heroFloatSmall {

    0%,100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(0.5rem);
    }
}



/* ==================================================
   BEWERTUNGEN / TRUST SECTION
================================================== */

#bewertungen {

    position: relative !important;
padding: 0px 3rem !important;

    z-index: 20 !important;
}

#bewertungen .sppb-container-inner {

    background: var(--dark) !important;

    border-radius: calc(var(--radius) * 2) !important;

    padding: 1rem 0px !important;
    margin: 0px;

    box-shadow: 0 2rem 4rem rgba(var(--primary-rgb), .15) !important;

    overflow: hidden !important;

    position: relative !important;
}

/* Hintergrund Effekt */

#bewertungen .sppb-container-inner::before {

    content: "" !important;

    position: absolute !important;

    top: -10rem !important;

    right: -10rem !important;

    width: 20rem !important;

    height: 20rem !important;

    border-radius: 50% !important;

    background: rgba(var(--accent-rgb), .08) !important;

    pointer-events: none !important;
}

#bewertungen .sppb-container-inner::after {

    content: "" !important;

    position: absolute !important;

    bottom: -8rem !important;

    left: -8rem !important;

    width: 16rem !important;

    height: 16rem !important;

    border-radius: 50% !important;

    background: rgba(var(--white-rgb), .03) !important;

    pointer-events: none !important;
}

/* ==================================================
   LINKE SPALTE
================================================== */

#bewertungen h4 {

    color: var(--white) !important;

    font-size: clamp(1.8rem, 2vw, 2.5rem) !important;

    margin-bottom: 1rem !important;
    text-align: left;
}

#bewertungen h4::before {

    content: "★★★★★" !important;

    display: block !important;

    color: var(--accent) !important;

    font-size: 2rem !important;

    letter-spacing: .2rem !important;

    margin-bottom: 1rem !important;
}

/* ==================================================
   GOOGLE REVIEW WIDGET
================================================== */
#bewertungen .grp-reviews-review-text{
    font-size: 0.9rem;
}
#bewertungen .grp-reviews-review {

    background: rgba(var(--white-rgb), .05) !important;

    border: 1px solid rgba(var(--white-rgb), .08) !important;

    border-radius: var(--radius) !important;

    backdrop-filter: blur(10px) !important;

    transition: var(--transition) !important;
}

#bewertungen .grp-reviews-review:hover {

    transform: translateY(-0.35rem) !important;

    background: rgba(var(--white-rgb), .08) !important;
}

/* Autor */

#bewertungen .grp-reviews-review-author-name span {

    color: var(--white) !important;

    font-weight: 600 !important;
}

/* Datum */

#bewertungen .grp-reviews-review-date {

    color: rgba(var(--white-rgb), .55) !important;
}

/* Bewertungstext */

#bewertungen .grp-reviews-review-text {

    color: rgba(var(--white-rgb), .82) !important;

    line-height: 1.8 !important;
}

/* Google Icon */

#bewertungen .grp-reviews-review-fb-link i {

    opacity: .5 !important;
}

/* Sterne */

#bewertungen .grp-reviews-review-rating {

    color: var(--accent) !important;
}

/* Mehr Anzeigen */

#bewertungen .grp-text-expand-btn {

    color: var(--accent) !important;

    font-weight: 600 !important;
}
#bewertungen .grp-theme-default .grp-reviews-container {
    background: transparent !important;
}
#bewertungen .grp-text-expand.grp-has-more::after{
    background: none;
}
#bewertungen .sppb-addon-text-block{
    text-align: left;
}
/* ==================================================
   LOAD MORE BUTTON
================================================== */

#bewertungen .grp-widget-load-more-btn {

    background: rgba(var(--white-rgb), .08) !important;

    border-radius: var(--radius) !important;

    color: var(--white) !important;

    transition: var(--transition) !important;
}

#bewertungen .grp-widget-load-more-btn:hover {

    background: var(--accent) !important;

    color: var(--dark) !important;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 991px) {

    #bewertungen {

        margin-top: -3rem !important;
    }

    #bewertungen .sppb-container-inner {

        padding: 2rem !important;
    }
}



/* ==================================================
   LEISTUNGEN
================================================== */

/* ==================================================
   KARTEN
================================================== */

#leistungen .service-grid .sppb-column {

    background: var(--white) !important;

    border-radius: 2rem !important;

    overflow: hidden !important;

    height: 100% !important;

    position: relative !important;

    transition: var(--transition) !important;

    box-shadow:
        0 1rem 2.5rem rgba(var(--primary-rgb), .06) !important;
}

/* kleine Akzentlinie */

#leistungen .service-grid .sppb-column::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: .35rem !important;

    background: var(--accent) !important;

    transform: scaleX(0) !important;

    transform-origin: left !important;

    transition: var(--transition) !important;
}

/* Hover */

#leistungen .service-grid .sppb-column:hover {

    transform: translateY(-0.25rem) !important;

    box-shadow:
        0 2rem 4rem rgba(var(--primary-rgb), .12) !important;
}

#leistungen .service-grid .sppb-column:hover::before {

    transform: scaleX(1) !important;
}

/* ==================================================
   BILD
================================================== */

#leistungen .service-grid .sppb-addon-single-image {

    overflow: hidden !important;
}

#leistungen .service-grid .sppb-addon-single-image img {

    width: 100% !important;

    aspect-ratio: 16 / 10 !important;

    object-fit: cover !important;

    transition: 0.6s ease !important;
}

#leistungen .service-grid .sppb-column:hover img {

    transform: scale(1.05) !important;
}

/* ==================================================
   CONTENT
================================================== */

#leistungen .service-grid .sppb-addon-text-block {

    padding: 1rem 2rem 0rem 2rem !important;
}

/* große Nummer im Hintergrund */

#leistungen .service-grid h3::before {

    position: absolute !important;

    top: -1.5rem !important;
    right: 0 !important;

    font-size: 5rem !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    color: rgba(var(--primary-rgb), .04) !important;

    z-index: 0 !important;
}

#leistungen .sppb-row-column:nth-child(1) h3::before {
    content: "01" !important;
}

#leistungen .sppb-row-column:nth-child(3) h3::before {
    content: "02" !important;
}

#leistungen .sppb-row-column:nth-child(4) h3::before {
    content: "03" !important;
}

#leistungen .sppb-row-column:nth-child(5) h3::before {
    content: "04" !important;
}

#leistungen .sppb-row-column:nth-child(6) h3::before {
    content: "05" !important;
}

#leistungen .sppb-row-column:nth-child(7) h3::before {
    content: "06" !important;
}

#leistungen .service-grid h3 {

    position: relative !important;

    z-index: 2 !important;
}

#leistungen .service-grid p {

    color: var(--text-light) !important;

    margin-bottom: 1rem !important;
}

/* ==================================================
   BUTTON
================================================== */

#leistungen .service-grid .sppb-button-wrapper {

    padding: 0 2rem 2rem !important;
}

#leistungen .service-grid .sppb-btn {

    width: 100% !important;

    justify-content: center !important;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 991px) {



    #leistungen .service-grid h3::before {

        font-size: 4rem !important;
    }
}

/* ==================================================
   ÜBER UNS
================================================== */

#ueber-uns {

    position: relative;
    overflow: hidden;
}

/* ==================================================
   LISTEN ALS GRID
================================================== */

#ueber-uns ul {

    list-style: none;
    margin: 0;
    padding: 0;
}

#ueber-uns li {

    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

#ueber-uns li::before {

    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 700;
}

/* ==================================================
   BILDSPALTE
================================================== */

#ueber-uns .sppb-row-column:last-child {

    position: relative;
}

/* ==================================================
   GROSSES BILD
================================================== */

#ueber-uns .img-main {

    position: relative !important;

    z-index: 2 !important;

    animation: heroFloatLarge 8s ease-in-out infinite !important;
}

#ueber-uns .img-main .sppb-addon-single-image-container {

    overflow: hidden !important;

    border-radius: 3rem 0 3rem 0 !important;
}

#ueber-uns .img-main img {

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: cover !important;

    border-radius: 3rem 0 3rem 0 !important;

    box-shadow: var(--shadow) !important;
}

/* ==================================================
   KLEINES BILD
================================================== */





/* Kleines Bild */
#ueber-uns .img-small {

    position: absolute !important;

    right: -11rem !important; /* weiter nach rechts */
    bottom: -3rem !important;

width: 250px;

    z-index: 10 !important;

    animation: heroFloatSmall 6s ease-in-out infinite !important;
}

/* Wrapper */
#ueber-uns .img-small .sppb-addon-content,
#ueber-uns .img-small .sppb-addon-single-image-container {

    overflow: hidden !important;
    border-radius: 2rem !important;
}

/* Bild selbst */
#ueber-uns .img-small img {

    display: block !important;

    width: 100% !important;
    height: auto !important;

    border-radius: 2rem !important;

    border: 8px solid #fff !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.12) !important;
}






/* ==================================================
   FLOATING EFFECT
================================================== */

@keyframes heroFloatLarge {

    0%,100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-0.5rem);
    }
}

@keyframes heroFloatSmall {

    0%,100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(0.5rem);
    }
}

/* ==================================================
   BUTTON
================================================== */

#ueber-uns .sppb-btn {

    margin-top: 2rem;
}

/* ==================================================
   DEKO ELEMENTE
================================================== */

#ueber-uns::before {

    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background: rgba(var(--accent-rgb), .05);
}

#ueber-uns::after {

    content: "";

    position: absolute;

    bottom: -150px;
    left: -150px;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: rgba(var(--primary-rgb), .03);
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 991px) {

    #ueber-uns {

        padding: 6rem 0;
    }
#ueber-uns .sppb-btn {

    margin-top: 0rem;
}
    #ueber-uns .img-small {

        position: relative !important;

      right: -7rem !important;
        bottom: 150px !important;

        width: 40% !important;

        margin: -4rem 0 0 auto !important;
    }
}


/* ==================================================
   REFERENZEN
================================================== */







#referenzen p {
    color: var(--text-light) !important;
}

/* ==================================================
   FEATURE BOXEN LINKS
================================================== */

#referenzen .addon-root-feature {
    margin-top: 2rem !important;
}

#referenzen .sppb-addon-feature .sppb-media {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
}

#referenzen .sppb-icon-container {
    width: 3rem !important;
    height: 3rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 1rem !important;
    background: rgba(var(--accent-rgb), .12) !important;
    color: var(--accent) !important;
    font-size: 1.25rem !important;
}

#referenzen .sppb-feature-box-title {
    font-size: 1.6rem !important;
    margin-bottom: .35rem !important;
}

#referenzen .sppb-feature-box-title span {
    display: block !important;
}

#referenzen .sppb-addon-text p {
    margin-bottom: 0 !important;
    font-size: .95rem !important;
}

/* ==================================================
   FILTER BUTTONS
================================================== */

.ba-gallery .category-filter{
    margin-top: 0px !important;
}
#referenzen .category-filter .ba-btn {
    padding: .8rem 1.35rem !important;
    border-radius: 1rem !important;
    border: .0625rem solid var(--border) !important;
    background: var(--white) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
}

#referenzen .category-filter .ba-btn:hover,
#referenzen .category-filter .ba-filter-active {
    background: var(--dark) !important;
    color: var(--white) !important;
    border-color: var(--dark) !important;
    transform: translateY(-.125rem) !important;
}

/* ==================================================
   GALERIE
================================================== */

#referenzen .ba-gallery-content-wrapper {
    position: relative !important;
}

#referenzen .ba-gallery-items {
    overflow: hidden !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 1rem 2.5rem rgba(var(--primary-rgb), .08) !important;
    transition: var(--transition) !important;
}

#referenzen .ba-gallery-items:hover {
    transform: translateY(-.35rem) !important;
    box-shadow: 0 2rem 4rem rgba(var(--primary-rgb), .14) !important;
}

#referenzen .ba-image {
    overflow: hidden !important;
    border-radius: 1.5rem !important;
}

#referenzen .ba-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: .6s ease !important;
}

#referenzen .ba-gallery-items:hover img {
    transform: scale(1.06) !important;
}

/* ==================================================
   CAPTION OVERLAY
================================================== */

#referenzen .ba-caption {
    background: linear-gradient(
        180deg,
        rgba(var(--primary-rgb), 0) 0%,
        rgba(var(--primary-rgb), .82) 100%
    ) !important;
}

#referenzen .ba-caption-content {
    padding: 1.25rem !important;
}

#referenzen .image-category {
    display: inline !important;
    padding: .65rem .8rem !important;
    border-radius: 999rem !important;
    background: var(--accent) !important;
    color: var(--white) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
}

/* ==================================================
   LIGHTBOX
================================================== */

#referenzen .modal-scrollable {
    backdrop-filter: blur(.75rem) !important;
}

#referenzen .ba-modal {
    border-radius: 2rem !important;
    overflow: hidden !important;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 991px) {



    #referenzen .sppb-row-column:first-child {
        position: relative !important;
        top: auto !important;
        margin-bottom: 3rem !important;
    }

    #referenzen .category-filter {
        justify-content: flex-start !important;
    }
}

/* ==================================================
   VORTEILE
================================================== */



/* ==================================================
   BOXEN GRUNDLAYOUT
================================================== */

#vorteile .advbox {
    transition: .4s ease;
}

#vorteile .advbox .sppb-addon-feature {

    background: #ffffff;
    border-radius: 2rem;

    padding: 3rem 2.5rem;

    text-align: center;

    height: 100%;

    box-shadow:
        0 20px 50px rgba(var(--primary-rgb), .08);

    border: 1px solid rgba(var(--primary-rgb), .05);

    transition: .4s ease;

    position: relative;

    overflow: hidden;
}

/* ==================================================
   AKZENTLINIE OBEN
================================================== */

#vorteile .sppb-addon-feature::before {

    content: "";

    position: absolute;

    top: 2rem;
    left: 50%;

    transform: translateX(-50%);

    width: 3rem;
    height: 4px;

    border-radius: 10px;

    background: var(--accent);
}

/* ==================================================
   ICON
================================================== */

#vorteile .sppb-img-container {

    display: flex !important;

    justify-content: center;
    align-items: center;

    width: 110px;
    height: 110px;

    margin: 2rem auto 2rem !important;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(var(--accent-rgb), .08),
            rgba(var(--accent-rgb), .03)
        );
}

#vorteile .sppb-img-container img {

    width: 70px;
    height: auto;

    transition: .4s ease;
}

/* ==================================================
   TITEL
================================================== */

#vorteile .sppb-feature-box-title {

    font-size: 2.2rem;
    line-height: 1.2;

    margin-bottom: 1rem;

    color: var(--primary);
}

/* ==================================================
   TEXT
================================================== */

#vorteile .sppb-addon-text {

    color: var(--text-light);

    font-size: 1rem;
    line-height: 1.8;
}

/* ==================================================
   STAFFELUNG
================================================== */

#vorteile .advbox-one {

    transform: translateY(50px);
}

#vorteile .advbox-two {

    transform: translateY(0);
}

#vorteile .advbox-three {

    transform: translateY(50px);
}

/* ==================================================
   MITTLERE BOX HERVORHEBEN
================================================== */

#vorteile .advbox-two .sppb-addon-feature {

    background: var(--primary);

    box-shadow:
        0 35px 80px rgba(var(--primary-rgb), .25);

    border: none;
}

#vorteile .advbox-two .sppb-feature-box-title,
#vorteile .advbox-two .sppb-addon-text {

    color: #fff;
}

#vorteile .advbox-two .sppb-img-container {

    background:
        rgba(255,255,255,.08);
}

/* ==================================================
   HOVER
================================================== */

#vorteile .advbox:hover {

    transform: translateY(-10px);
}

#vorteile .advbox-two:hover {

    transform: translateY(-15px);
}

#vorteile .advbox:hover .sppb-img-container img {

    transform: scale(1.08);
}

/* ==================================================
   DEKO HINTERGRUND
================================================== */

#vorteile::before {

    content: "";

    position: absolute;

    top: 150px;
    left: -180px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        rgba(var(--accent-rgb), .04);

    z-index: 0;
}

#vorteile::after {

    content: "";

    position: absolute;

    bottom: 0;
    right: -180px;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background:
        rgba(var(--primary-rgb), .03);

    z-index: 0;
}

#vorteile .sppb-row {
    position: relative;
    z-index: 2;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 991px) {

    #vorteile .advbox-one,
    #vorteile .advbox-two,
    #vorteile .advbox-three {

        transform: none;

        margin-bottom: 2rem;
    }

    #vorteile .advbox:hover,
    #vorteile .advbox-two:hover {

        transform: translateY(-8px);
    }

    #vorteile .sppb-addon-feature {

        padding: 2.5rem 2rem;
    }

    #vorteile .sppb-feature-box-title {

        font-size: 1.8rem;
    }
}



/* ==================================================
   CTA SECTION
================================================== */
#cta {

    position: relative;

    overflow: hidden;

    padding: 8rem 0;

    background: var(--primary) !important;
}

/* ==================================================
   GLOW LINKS
================================================== */

#cta::before {

    content: "";

    position: absolute;

    width: 40rem;
    height: 40rem;

    top: -20rem;
    left: -20rem;

    border-radius: 50%;

    background:
        rgba(var(--accent-rgb), .12);

    filter: blur(6rem);
}

/* ==================================================
   GLOW RECHTS
================================================== */

#cta::after {

    content: "";

    position: absolute;

    width: 35rem;
    height: 35rem;

    right: -15rem;
    bottom: -15rem;

    border-radius: 50%;

    background:
        rgba(var(--white-rgb), .04);

    filter: blur(5rem);
}

/* ==================================================
   HEADLINE
================================================== */

#cta h2 {

    color: #fff;

    font-size: clamp(3rem,5vw,4.5rem);

    line-height: 1.05;

    margin-bottom: 2rem;
}

/* ==================================================
   TEXT
================================================== */

#cta p {

    color:
        rgba(255,255,255,.82);

    font-size: 1.15rem;

    line-height: 1.9;
}

/* ==================================================
   USP LISTE
================================================== */

#cta ul {

    list-style: none;

    margin: 0;

    padding: 0;
}

#cta li {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1.25rem;

    padding: 1rem 1.25rem;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 1rem;

    backdrop-filter: blur(10px);

    color: #fff;

    font-size: 1.1rem;

    transition: .35s ease;
}

#cta li:hover {

    transform:
        translateX(8px);

    background:
        rgba(255,255,255,.08);

    border-color:
        rgba(var(--accent-rgb), .25);
}

#cta li::before {

    content: "✓";

    width: 2.3rem;

    height: 2.3rem;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--accent);

    color: #fff;

    font-weight: 700;

    font-size: 1rem;
}

/* ==================================================
   CTA SPALTE
================================================== */

.cta-action {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}

/* ==================================================
   ANIMIERTER PFEIL
================================================== */

.cta-action::before {

    content: "↓";

    position: absolute;

    top: -6rem;

    left: 50%;

    transform: translateX(-50%);

    color: var(--accent);

    font-size: 3rem;

    font-weight: 700;

    animation: arrowBounce 2s infinite;
}

@keyframes arrowBounce {

    0%,100% {

        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {

        transform:
            translateX(-50%)
            translateY(12px);
    }
}

/* ==================================================
   BUTTON
================================================== */

.cta-action .sppb-btn {

    position: relative;

    z-index: 2;

    background: var(--accent);

    color: #fff;

    font-size: 1.2rem;

    font-weight: 700;

    padding: 1.4rem 2.8rem;

    border-radius: 1rem;

    box-shadow:
        0 15px 40px rgba(var(--accent-rgb), .35);

    transition: .35s ease;
}

/* ==================================================
   PULSE RING
================================================== */

.cta-action .sppb-btn::before {

    content: "";

    position: absolute;

    inset: -12px;

    border-radius: inherit;

    border: 2px solid rgba(var(--accent-rgb), .35);

    animation: pulseRing 2.5s infinite;

    z-index: -1;
}

@keyframes pulseRing {

    0% {

        transform: scale(1);

        opacity: .8;
    }

    100% {

        transform: scale(1.25);

        opacity: 0;
    }
}

/* ==================================================
   BUTTON HOVER
================================================== */

.cta-action .sppb-btn:hover {

    transform:
        translateY(-5px)
        scale(1.03);

    box-shadow:
        0 25px 60px rgba(var(--accent-rgb), .5);
}

.cta-action .sppb-btn i {

    margin-left: .7rem;
}

/* ==================================================
   SHAPE FARBE
================================================== */

#cta .sppb-shape-container svg path {

    fill: var(--light);
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 991px) {

    #cta {

        text-align: center;

        padding: 6rem 0;
    }

    #cta ul {

        margin: 2rem 0;
    }

    #cta li {

        text-align: left;
    }

    .cta-action {

        margin-top: 3rem;
    }

    .cta-action::before {

        display: none;
    }
}




/* ==================================================
   TIMELINE V2 - MINIMAL PREMIUM
================================================== */


/* ==================================================
   GROSSE DEKO-KREISE
================================================== */

.timeline::before {
    content: "";
    position: absolute;
    left: -22rem;

    width: 55rem;
    height: 55rem;

    border-radius: 50%;

    background: rgba(var(--white-rgb), .025);

    z-index: 0;
}

.timeline::after {
    content: "";
    position: absolute;

    right: -20rem;
    bottom: -18rem;

    width: 48rem;
    height: 48rem;

    border-radius: 50%;

    background: rgba(var(--accent-rgb), .05);

    z-index: 0;
}

/* ==================================================
   MITTELLINIE
================================================== */

.timeline .sppb-addon-timeline-wrapper::before {

    width: 2px !important;

    background: linear-gradient(
        to bottom,
        rgba(var(--accent-rgb), .15),
        rgba(var(--accent-rgb), .6),
        rgba(var(--accent-rgb), .15)
    ) !important;
}

/* ==================================================
   PUNKTE
================================================== */

.timeline .timeline-badge::after{
    background-color: var(--accent) !important;
}
.timeline .sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-badge::before{
 border: 3px solid var(--accent) !important;
}

/* ==================================================
   DATUM
================================================== */

.timeline .timeline-date {

    color: rgba(var(--white-rgb), .55) !important;

    font-size: .95rem;

    font-weight: 600;

    letter-spacing: .05em;
}

/* ==================================================
   KARTEN
================================================== */

.timeline .timeline-panel {

    background: rgba(var(--white-rgb), .97);

    border-radius: 1.5rem;

    padding: 1.5rem;

    border: 1px solid rgba(var(--primary-rgb), .05);

    box-shadow: var(--shadow);

    transition: .35s;

    overflow: hidden;
}

.timeline .timeline-panel:hover {

    transform: translateY(-8px);

    box-shadow:
        0 30px 60px rgba(var(--black-rgb), .18);
}

/* ==================================================
   BILDER
================================================== */

.timeline .timeline-panel img {

    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    border-radius: 1rem;

    margin: 1rem 0 1.25rem;

    transition: .35s;
}

.timeline .timeline-panel:hover img {

    transform: scale(1.04);
}

/* ==================================================
   TITEL
================================================== */

.timeline .title {

    font-size: 1.45rem;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: .4rem;
}

/* ==================================================
   TEXT
================================================== */

.timeline .details {
font-size: 1rem !important;
    color: var(--text-light);

    line-height: 1.8;
}

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel .title{
    font-size: 1.5rem;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-date{
    font-size: 1.2rem;
}
/* ==================================================
   KARTENABSTAND
================================================== */

.timeline .timeline-movement {

    margin-bottom: 2.5rem;
}

/* ==================================================
   PFEILE DER STANDARDTIMELINE AUSBLENDEN
================================================== */

.timeline .timeline-panel:before,
.timeline .timeline-panel:after {

    display: none !important;
}

/* ==================================================
   HINTERGRUNDGLANZ IN DEN KARTEN
================================================== */

.timeline .timeline-panel {

    position: relative;
}

.timeline .timeline-panel::before {

    content: "";

    position: absolute;

    top: -6rem;
    right: -6rem;

    width: 12rem;
    height: 12rem;

    border-radius: 50%;

    background: rgba(var(--accent-rgb), .05);

    pointer-events: none;
}
/* ==================================================
   MOBILE
================================================== */

@media (max-width:991px) {
  .timeline .timeline-movement {

    margin-bottom: 0rem;
}  
}



/* ==================================================
   BLOG
================================================== */

.article-full-image img{
    width: 100% !important;
}

.blog h2, .blog .h2 {
  font-size: clamp(1rem, 2vw, 2rem) !important;

}

/* ==================================================
   BLOG
================================================== */



/* ==================================================
   SIDEBAR BOXEN
================================================== */

.sidebar .sidebox{

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        var(--section-bg) 100%
    ) !important;

    border:1px solid var(--border) !important;

    border-radius:22px !important;

    overflow:hidden !important;

    margin-bottom:35px !important;

    box-shadow:
        0 18px 45px rgba(var(--black-rgb),.06) !important;

    transition:.35s ease !important;

}

.sidebar .sidebox:hover{

    transform:translateY(-6px) !important;

    box-shadow:
        0 30px 60px rgba(var(--black-rgb),.08) !important;

}

/* ==================================================
   BOX INHALT
================================================== */

.sidebar .sidebox .sppb-addon{

    padding:0rem 2rem 1rem !important;

}

/* ==================================================
   DUNKLER HEADER
================================================== */

.sidebar .sidebox .sppb-addon-header{

    margin:-20px -35px 30px !important;

    padding:24px 35px !important;

    background:var(--dark) !important;

    position:relative !important;

}

.sidebar .sidebox .sppb-addon-header::after{

    content:"" !important;

    position:absolute !important;

    left:35px !important;

    bottom:0 !important;

    width:70px !important;

    height:4px !important;

    background:var(--cta) !important;

    border-radius:999px !important;

}

.sidebar .sidebox .sppb-addon-title{

    margin:0 !important;

    color:var(--white) !important;


    font-weight:700 !important;

    line-height:1.3 !important;
padding: 1rem 1rem 0rem 1rem !important;
}

/* ==================================================
   ANSPRECHPARTNER
================================================== */

.sidebar .sppb-person-image img{

    width:100% !important;

    display:block !important;

    border-radius:14px !important;

    margin-bottom:20px !important;

}

.sidebar .sppb-person-name{

    display:block !important;

    font-size:1.35rem !important;

    font-weight:700 !important;

    color:var(--primary) !important;


}

.sidebar .sppb-person-designation{

    display:block !important;

    color:var(--text-light) !important;

    margin-bottom:25px !important;

}

.sidebar .sppb-btn{

    width:100% !important;

}
.box-ansprechpartner .sppb-person-email{

    display:flex !important;

    align-items:center !important;

    gap:1rem !important;

    font-size:1rem !important;

    font-weight:600 !important;

    color:var(--primary) !important;

    text-decoration:none !important;

    transition:.3s ease !important;

}

.box-ansprechpartner .sppb-person-email::before{

    content:"\f0e0" !important;

    font-family:"Font Awesome 6 Free" !important;

    font-weight:900 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:2.8rem !important;

    height:2.8rem !important;

    flex-shrink:0 !important;

    border-radius:50% !important;

    background:rgba(var(--accent-rgb),.12) !important;

    color:var(--accent) !important;

    font-size:1rem !important;

}

.box-ansprechpartner .sppb-person-email:hover{

    color:var(--accent) !important;

}
.box-ansprechpartner .sppb-addon-person .sppb-person-information > span.sppb-person-designation, .box-ansprechpartner .sppb-addon-person .sppb-person-information > a.sppb-person-email{
    font-size: 0.9rem;
}
/* ==================================================
   NAVIGATION
================================================== */

.sidebar ul{

    list-style:none !important;

    margin:0 !important;

    padding:0 !important;

}

.sidebar ul li{

    margin-bottom:10px !important;

}

.sidebar ul li:last-child{

    margin-bottom:0 !important;

}

.sidebar ul li a{

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    text-decoration:none !important;

    background:rgba(var(--primary-rgb),.04) !important;

    color:var(--primary) !important;

    border:1px solid rgba(var(--primary-rgb),.08) !important;

    border-radius:12px !important;

    padding:15px 18px !important;

    font-weight:600 !important;

    transition:.3s ease !important;

}

.sidebar ul li a::after{

    content:"→" !important;

    font-size:18px !important;

    transition:.3s ease !important;

}

.sidebar ul li a:hover{

    background:var(--primary) !important;

    color:var(--white) !important;

    transform:translateX(6px) !important;

}

.sidebar ul li a:hover::after{

    transform:translateX(5px) !important;

}

/* ==================================================
   DOWNLOADS
================================================== */

/* ==================================================
   DOWNLOADS
================================================== */

.box-download .sppb-addon-feature{

    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:none !important;
    box-shadow:none !important;

}

.box-download .sppb-media{

    display:flex !important;
    align-items:center !important;
    gap:1rem !important;

    padding:1.1rem 0 !important;

    transition:.3s ease !important;

}

/* ---------- Trennstrich ---------- */

.box-download .sppb-addon-wrapper:not(:last-child){

    border-bottom:1px solid rgba(var(--primary-rgb),.08) !important;

    margin-bottom:.3rem !important;

}
.box-download .sppb-addon-wrapper:nth-of-type(1){
    border: 0px !important;
}

.box-download .addon-root-heading + .addon-root-feature .sppb-media{
    padding-top:0rem !important;
}
/* ---------- ICON ---------- */

.box-download .sppb-icon{

    width:2.3rem !important;
    height:2.3rem !important;

    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:rgba(var(--accent-rgb),.10) !important;

    flex-shrink:0 !important;

    transition:.3s ease !important;

}

/* PDF-Icon */

.box-download .sppb-icon i{

    color:var(--accent) !important;
    font-size:1.15rem !important;

    transition:.3s ease !important;

}
.box-download .sppb-addon-feature p{
    margin-bottom: 0px; 
}
/* ---------- TEXT ---------- */

.box-download .sppb-media-body{

    flex:1 !important;
    min-width:0 !important;

}

.box-download .sppb-feature-box-title{

    padding:0 !important;

    font-weight:700 !important;
    line-height:1.3 !important;

}
.sidebar .box-download .sppb-media .sppb-addon-title{
    padding-left: 0px !important;
}
.box-download .sppb-feature-box-title a{

    color:var(--primary) !important;
    text-decoration:none !important;

}
.box-download .sppb-addon-feature .sppb-media > .pull-left {
  margin-right: 0px;
}
.box-download .sppb-addon-text{

    font-size:.92rem !important;
    color:var(--text-light) !important;
    line-height:1.5 !important;

}

/* ---------- PFEIL ---------- */

.box-download .sppb-media::after{

    content:"→";

    font-size:1.45rem !important;

    color:var(--text-light) !important;

    margin-left:auto !important;

    transition:.3s ease !important;

}

/* ---------- HOVER ---------- */

.box-download .sppb-media:hover .sppb-icon{

    background:var(--accent) !important;

}

.box-download .sppb-media:hover .sppb-icon i{

    color:#fff !important;

}

.box-download .sppb-media:hover .sppb-feature-box-title a{

    color:var(--accent) !important;

}

.box-download .sppb-media:hover::after{

    color:var(--accent) !important;

    transform:translateX(.15rem);

}

#grp-widget-2 .grp-widget-load-more-container{
    display: none;
}

/* ==================================================
   VORTEILE
================================================== */

.content-adv{

    position:relative !important;

    padding:2rem !important;


    background:var(--section-bg) !important;

    border:1px solid rgba(var(--primary-rgb),.06) !important;

    border-radius:2rem !important;

}

/* Dekokreise */

.content-adv::before{

    content:"";

    position:absolute;

    top:-9rem;
    right:-9rem;

    width:22rem;
    height:22rem;

    border-radius:50%;

    background:rgba(var(--primary-rgb),.03);

}

.content-adv::after{

    content:"";

    position:absolute;

    bottom:-10rem;
    left:-8rem;

    width:20rem;
    height:20rem;

    border-radius:50%;

    background:rgba(var(--accent-rgb),.05);

}
.content-adv .sppb-media > .pull-left{
    padding-top: 5px;
}
.content-adv .sppb-container-inner{

    position:relative;
    z-index:2;

}

/* Überschrift */

.content-adv h3{

    margin-bottom:2rem !important;

    color:var(--primary) !important;

}

/* Feature-Abstände */

.content-adv .addon-root-feature{

    margin-bottom:2rem !important;

}

/* Layout */

.content-adv .sppb-media{

    display:flex !important;

    align-items:flex-start !important;

    gap:1rem !important;

}

/* Icon-Kreis */

.content-adv .sppb-icon{

    width:3.8rem !important;
    height:3.8rem !important;

    border-radius:50% !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    background:rgba(var(--accent-rgb),.10) !important;

    flex-shrink:0 !important;

    transition:.35s ease !important;

}

/* Icon */

.content-adv .sppb-icon i{

    color:var(--accent) !important;

    font-size:1.5rem !important;

    transition:.35s ease !important;

}

/* Titel */

.content-adv .sppb-feature-box-title{

    margin-bottom:.45rem !important;

    color:var(--primary) !important;

}

/* Text */

.content-adv .sppb-addon-text{

    color:var(--text-light) !important;


}

/* Hover */

.content-adv .addon-root-feature:hover .sppb-icon{

    background:var(--accent) !important;

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(var(--accent-rgb),.25);

}

.content-adv .addon-root-feature:hover .sppb-icon i{

    color:#fff !important;

}

.content-adv .addon-root-feature:hover .sppb-feature-box-title{

    color:var(--accent) !important;

}
/* ==================================================
   TEXT + BILD
================================================== */




/* Deko-Fläche hinter dem Bild */

.content-text-bild .sppb-addon-single-image-container::before{

    content:"";

    position:absolute;

    top:1.5rem;
    left:1.5rem;

    width:100%;
    height:100%;

    background:rgba(var(--accent-rgb),.08);

    border-radius:2rem;

    z-index:0;

}

/* Bild */

.content-text-bild img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    border-radius:1.5rem !important;

    border:8px solid #fff !important;

    box-shadow:
        0 25px 60px rgba(var(--primary-rgb),.12);

    transition:.4s ease !important;

}

/* Hover */

.content-text-bild img:hover{

    transform:translateY(-8px);

    box-shadow:
        0 35px 70px rgba(var(--primary-rgb),.18);

}




/* ==================================================
   MOBILE
================================================== */

@media (max-width:991px) {

    .sidebar{

        position:relative !important;

        top:auto !important;

        padding-left:0 !important;

        margin-top:50px !important;

    }

}
/* ==================================================
   KONTAKT
================================================== */


/* ==================================================
   DEKO
================================================== */

#kontakt::before {
    content: "" !important;
    position: absolute !important;
    top: -10rem !important;
    left: -10rem !important;
    width: 24rem !important;
    height: 24rem !important;
    border-radius: 50% !important;
    background: rgba(var(--accent-rgb), .06) !important;
}

#kontakt::after {
    content: "" !important;
    position: absolute !important;
    right: -10rem !important;
    bottom: -10rem !important;
    width: 24rem !important;
    height: 24rem !important;
    border-radius: 50% !important;
    background: rgba(var(--primary-rgb), .04) !important;
}

/* ==================================================
   KONTAKTBOXEN
================================================== */

#kontakt .sppb-addon-feature {
    height: 100% !important;
    margin-bottom: 2rem;
}

#kontakt .sppb-addon-feature .sppb-addon-content {
    height: 100% !important;
}

#kontakt .sppb-media {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
    height: 100% !important;
    min-height: 9.5rem !important;
    padding: 1.5rem !important;
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 1rem 2.5rem rgba(var(--primary-rgb), .05) !important;
    border: .0625rem solid rgba(var(--primary-rgb), .04) !important;
    transition: var(--transition) !important;
}

#kontakt .sppb-media:hover {
    transform: translateY(-.35rem) !important;
    box-shadow: var(--shadow) !important;
}

/* ==================================================
   ICONS
================================================== */

#kontakt .sppb-icon-container {
    width: 4rem !important;
    height: 4rem !important;
    min-width: 4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 1.25rem !important;
    background: rgba(var(--accent-rgb), .12) !important;
    color: var(--accent) !important;
    margin-bottom: 0.5rem;
}

#kontakt .sppb-icon-container i {
    font-size: 1.5rem !important;
    color: var(--accent) !important;
}

/* ==================================================
   KONTAKTDATEN TEXTE
================================================== */

#kontakt .sppb-feature-box-title {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    margin-bottom: .5rem !important;
    color: var(--primary) !important;
}

#kontakt .sppb-addon-feature .sppb-addon-text,
#kontakt .sppb-addon-feature .sppb-addon-text p {
    color: var(--text) !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

#kontakt .sppb-addon-feature a {
    color: var(--text) !important;
    text-decoration: none !important;
}

#kontakt .sppb-addon-feature a:hover {
    color: var(--accent) !important;
}

/* ==================================================
   FORMULARBEREICH
================================================== */

#kontakt .sppb-row-column:last-child {
    position: relative !important;
}

#kontakt .sppb-addon-form-builder {
    position: relative !important;
    padding: 2.5rem 0.5rem 2.5rem 0.5rem !important;
    background: var(--white) !important;
    border-radius: 2rem !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
    border: .0625rem solid rgba(var(--primary-rgb), .04) !important;
}

#kontakt .sppb-addon-form-builder::before {
    content: "" !important;
    position: absolute !important;
    top: -8rem !important;
    right: -8rem !important;
    width: 18rem !important;
    height: 18rem !important;
    border-radius: 50% !important;
    background: rgba(var(--accent-rgb), .10) !important;
    filter: blur(4rem) !important;
    z-index: 0 !important;
}

#kontakt .sppb-addon-form-builder form {
    position: relative !important;
    z-index: 2 !important;
}


/* ==================================================
   INPUTS
================================================== */

#kontakt .sppb-form-control {
    width: 100% !important;
    min-height: 3.5rem !important;
    padding: 0 1rem !important;
    border-radius: .9rem !important;
    border: .0625rem solid var(--border) !important;
    background: var(--bg-light) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    transition: var(--transition) !important;
}

#kontakt textarea.sppb-form-control {
    min-height: 10rem !important;
    padding-top: 1rem !important;
    resize: vertical !important;
}

#kontakt .sppb-form-control::placeholder {
    color: var(--text-light) !important;
}

#kontakt .sppb-form-control:focus {
    border-color: var(--accent) !important;
    background: var(--white) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--accent-rgb), .14) !important;
    outline: none !important;
}

/* ==================================================
   FORMULAR BUTTON
================================================== */

#kontakt .sppb-form-builder-btn {
    margin-top: .5rem !important;
}

#kontakt .sppb-form-builder-btn .sppb-btn {
    width: 100% !important;
    padding: 1rem 2rem !important;
    border-radius: 999rem !important;
    border: none !important;
    background: var(--accent) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    transition: var(--transition) !important;
    box-shadow: 0 1rem 2rem rgba(var(--accent-rgb), .22) !important;
}

#kontakt .sppb-form-builder-btn .sppb-btn:hover {
    background: var(--cta-hover) !important;
    transform: translateY(-.2rem) !important;
    box-shadow: 0 1.25rem 2.5rem rgba(var(--accent-rgb), .30) !important;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 991px) {

 

    #kontakt .sppb-row-column:last-child {
        margin-top: 3rem !important;
    }

    #kontakt .sppb-addon-form-builder {
        padding: 2rem !important;
    }

    #kontakt .sppb-addon-form-builder-form {
        grid-template-columns: 1fr !important;
    }

    #kontakt .sppb-form-builder-field-4,
    #kontakt .sppb-addon-form-builder-form > .sppb-form-group:nth-last-of-type(1),
    #kontakt .sppb-form-builder-btn {
        grid-column: auto !important;
    }
}
/* ==================================================
   OPENSTREETMAP
================================================== */

.jmg-youtube-dsgvo-notification.position_4.style_3.custom_1 .notification{
color: #333 !important;
}
.notification h2{
color: #fff !important; font-weight: bold;font-size: 1rem !important;}
.jmg-openstreetmap-dsgvo-notification{
    display: flex;
align-items: center;
justify-content: center;
}
.jmg-openstreetmap-dsgvo-notification .notification{
    font-family: inherit !important;
}
.jmg-openstreetmap-dsgvo-notification .overlay{
    background: rgba(0,0,0,0.7);
    padding: 30px 15px 0px 15px !important;
    border-radius: 30px;
}
.jmg-openstreetmap-dsgvo-notification .notification, .jmg-openstreetmap-dsgvo-notification .notification h2{
    color: #fff;
    text-align: center;
}

.notification a{
    color: var(--light);
    text-decoration: underline;
}
/* ==================================================
   FOOTER
================================================== */

#sp-bottom,
#sp-footer {
    position: relative;
    overflow: hidden;

    background: var(--primary) !important;
    color: rgba(var(--white-rgb), .75);
}

/* ==================================================
   FOOTER TOP
================================================== */



/* Glows */

#sp-bottom::before {
    content: "";

    position: absolute;

    top: -12rem;
    left: -12rem;

    width: 26rem;
    height: 26rem;

    border-radius: 50%;

    background: rgba(var(--accent-rgb), .08);

    filter: blur(6rem);
}

#sp-bottom::after {
    content: "";

    position: absolute;

    right: -12rem;
    bottom: -12rem;

    width: 28rem;
    height: 28rem;

    border-radius: 50%;

    background: rgba(var(--white-rgb), .03);

    filter: blur(6rem);
}

#sp-bottom .container,
#sp-footer .container {
    position: relative;
    z-index: 2;
}

/* ==================================================
   LOGO
================================================== */

#sp-bottom img {
    max-width: 16rem;
    height: auto;

    border-radius: .75rem;

    margin-bottom: 1.5rem;
}

#sp-bottom p {
    color: rgba(var(--white-rgb), .72);
    line-height: 1.9;
}

/* ==================================================
   TITLES
================================================== */

#sp-bottom .sp-module-title {
    display: inline-flex;

    align-items: center;
    gap: .65rem;

    padding: .9rem 1.4rem;

    border-radius: 999px;

    background: rgba(var(--accent-rgb), .10);

    color: var(--accent);

    font-size: .95rem;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;

    margin-bottom: 2rem;
}

#sp-bottom .sp-module-title::before {
    content: "●";

    font-size: .65rem;

    color: var(--accent);
}

/* ==================================================
   NAVIGATION + RECHTLICHES
================================================== */

#footer-wrap .subnav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer-wrap .subnav li, #footer-wrap .rechtliches .nobutton {
    margin-bottom: .65rem !important;
}

#footer-wrap .subnav li, #footer-wrap .multipage-rechtliches li {
    margin-bottom: .65rem !important;
}

#footer-wrap .subnav a,
#footer-wrap .rechtliches .sppb-btn {
    position: relative;

    display: inline-block !important;

    padding: 0 0 0 .9rem !important;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: rgba(var(--white-rgb), .72) !important;

    font-size: 1rem !important;
    font-weight: 500 !important;

    line-height: 1.5 !important;

    text-decoration: none !important;

    transition: .3s ease;
}


/* Kleine Accent-Linie */

#footer-wrap .subnav a::before,
#footer-wrap .rechtliches .sppb-btn::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: .35rem;
    height: .35rem;

    border-radius: 50%;

    background: var(--accent);

    transform: translateY(-50%) scale(0);

    transition: .3s ease;
}

#footer-wrap .subnav a:hover,
#footer-wrap .rechtliches .sppb-btn:hover {
    color: var(--white) !important;

    transform: translateX(.25rem);
}

#footer-wrap .multipage-rechtliches li:hover {
    color: var(--white) !important;
    transition: .3s ease;
    transform: translateX(.25rem);
}

#footer-wrap .multipage-rechtliches li::marker {
color: var(--accent);
}


#footer-wrap .subnav a::before,
#footer-wrap .rechtliches .sppb-btn:before {
    transform: translateY(-50%) scale(1);
}

/* ==================================================
   SOCIAL ICONS
================================================== */

#footer-wrap .social-icons {
    display: flex;

    gap: 1rem;

    padding: 0;
    margin: 0;

    list-style: none;
}

#footer-wrap .social-icons a {
    width: 3.25rem;
    height: 3.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(var(--white-rgb), .05);

    color: var(--white);

    transition: .3s ease;
}

#footer-wrap .social-icons a:hover {
    background: var(--accent);

    color: var(--primary);

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(var(--accent-rgb), .20);
}

/* ==================================================
   COPYRIGHT
================================================== */

#sp-footer {
  font-size: 1rem;
}

#sp-footer,
#sp-footer p,
#sp-footer .copyright,
#sp-footer .sp-copyright {
    color: rgba(var(--white-rgb), .55);
}

.sp-copyright {
    display: block !important;

    text-align: center !important;

    font-size: .95rem;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 991px) {

    #sp-bottom {
        padding: 4rem 0 2rem;
        text-align: center;
    }

    #sp-bottom .sp-module {
        margin-bottom: 2.5rem;
    }


    .sp-copyright {
        text-align: left !important;
           padding: 0 1rem;
    }
 
}



@media screen and (max-width: 1400px) {

    #sp-user4{
       display: none !important; 
    }
    
    #sp-menu.col-lg-6 {
    flex: 0 0 auto;
    width: 75%;
        padding-left: 3rem;
  }
       .box-download .sppb-media{
        display: block !important;
    }
    .box-download .pull-left{
        width: 100% !important;
    }
    .box-download .sppb-media-body{
        overflow: visible !important;
        } 
}

@media screen and (max-width: 1200px) {
    .box-download .sppb-media{
        display: flex !important;
    }
    .box-download .pull-left{
        width: auto !important;
    }
    .box-download .sppb-media-body{
        overflow: hidden !important;
        }
}
@media screen and (max-width: 991px) {
 #cta p {

font-size: 1rem;
    }
   

    #vorteile .sppb-addon-feature {
        text-align: left !important;
    }

    #vorteile .sppb-addon-content {
        text-align: left !important;
    }

    #vorteile .sppb-img-container {

        width: 70px !important;
        height: 70px !important;

        margin: 1.5rem 0 1.5rem 0 !important;

        justify-content: center !important;
    }

    #vorteile .sppb-img-container img {

        width: 48px !important;
    }

    #vorteile .sppb-addon-feature::before {

        left: 3.3rem !important;
        transform: none !important;
    }
.white-popup-block {

    max-width: 100% !important;

}
    .white-popup-block .modal-inner-block {
  padding: 0rem !important;
  font-size: 1rem !important;
}
       #kontakt .sppb-row-column:last-child {
        margin-top: 0rem !important;
    }
    #referenzen .sppb-feature-box-title span {
  display: inline !important;
}
    .ba-gallery .category-filter, .ba-gallery .row-fluid{
    margin: 0px !important;
}
    #start p{
        font-size: 1rem !important;
    }
    .grp-reviews-container-inner {
  padding: 0px;
}
    #start .img-main{
        text-align: left;
    }
    #start .img-small{
        right: 0 !important;
        left: 350px !important;
    }
    .sp-megamenu-parent{
        display: none !important;
    }
    #offcanvas-toggler{
        display: inherit !important;
    }
    #sp-logo.col-lg-3{
        width: 70%;
    }
        #sp-menu.col-lg-6 {
    width: 30% !important;
        padding-left: 0rem;
  }
    #sp-menu{
        display: block !important;
    }
  #sp-header.header-sticky, #sp-header.sticky {
  position: fixed !important;
  top: 0rem !important;
  left: inherit !important;
  transform: inherit !important;
  width:100% !important;
  max-width: 82rem !important;
  background: rgba(var(--white-rgb), .92) !important;
  backdrop-filter: blur(1rem) !important;
  -webkit-backdrop-filter: blur(1rem) !important;
  border: 0.0625rem solid var(--border) !important;
  border-radius: inherit !important;
  box-shadow: var(--shadow) !important;
}
}

@media screen and (max-width: 767px) {
    .sp-page-title {
    padding: 5rem 0 1.8rem;
}
    .sp-page-title .container{
        padding: 0 2rem !important;
    }
    .mod-breadcrumbs.px-3{
        padding-left: 0px !important;
    }
    .ba-gallery{
        padding: 0px !important;
    }
    #start .img-small{
        right: 0 !important;
        left: 320px !important;
    }
    
    #start .img-small {
    bottom: 0rem !important;

}
    
       .cta-action {

        margin-top: 1rem;
    }

    
    #bewertungen {

  
padding: 0px 1.5rem !important;


}
    #ueber-uns .img-small {

    right: -3rem !important; /* weiter nach rechts */
    bottom: 9rem !important;

width: 250px;

    z-index: 10 !important;

    animation: heroFloatSmall 6s ease-in-out infinite !important;
}
    
    
    
}

@media screen and (max-width: 575px) {
  #sp-header {
    height: 50px;
  }
 #kontakt .sppb-addon-form-builder {
    padding: 2rem 0rem !important;
  }
}
@media screen and (max-width: 400px) {
    .kontakt-sc .sppb-row-column{
        max-width: 100% !important;
    flex-basis: 100% !important;
    }  
   .content-adv .sppb-icon{

    width:2.8rem !important;
    height:2.8rem !important;
    } 
    .content-adv .sppb-icon i{
        font-size: 1rem !important;
    }
    .content-adv .pull-left{
        margin-right: 5px;
    }
}