/* marcellus-regular - latin */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  src: url('../../../fonts/marcellus/marcellus-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../../fonts/marcellus/marcellus-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../fonts/marcellus/marcellus-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../fonts/marcellus/marcellus-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../../fonts/marcellus/marcellus-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../fonts/marcellus/marcellus-v13-latin-regular.svg#Marcellus') format('svg'); /* Legacy iOS */
}

body.ltr .sp-megamenu-parent > li.sp-has-child > a::after {
  font-family: "Font Awesome 6 Free";
  content: "\f078";   /* chevron-down */
  font-weight: 900;
}

/* =========================================
   OFFCANVAS (Mobile Menü): Pfeil / Toggler fix (Font Awesome)
   ========================================= */

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent.menu-parent-open > a > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent.menu-parent-open > .menu-separator > .menu-toggler::after {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important; /* Solid */
  content: "\f078" !important; /* chevron-down */
  speak: none;
  display: inline-block;
}

body {
  font-family: 'Marcellus', sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
}

/* Version 6 */

.article-details > div {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Shaper! */
.com-content.view-article .sp-module {
  display: block;
  margin-top: 100px;
}
/* —— */

#sp-main-body {
  padding: 20px 0;
}

.newsscoller {
  margin-top: 80px;
}

/* Articles Carousel: Datum ausblenden */
.sppb-articles-carousel-meta-date{
  display: none !important;
}

/* opacity handle + layout (konsolidiert) */
.sp-page-title {
  /* aus dem früheren Block (nicht überschrieben) */
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
  background-attachment: scroll;

  /* aus dem späteren Block (überschreibt padding/text-align/opacity) */
  display: flex;
  align-items: flex-end;        /* Titel nach unten */
  justify-content: flex-start;  /* Titel nach links */
  padding: 60px 0;              /* finaler Wert */
  text-align: left !important;  /* finaler Wert */
  margin-top: 0px;
  opacity: 0.7;

  /* später separat gesetzt -> hier integriert */
  background-color: #992628;
}

/* news scroller */
/*
.wayne-corp-service-box .sppb-media > div.pull-left {
  padding: 30px;
  border-right: 1px solid rgba(153, 38, 40, 0.3);
  flex: 0 0 auto;
  margin: 0;
  transition: 0.3s;
}
*/

.sppb-media-content {
  flex: 0 0 auto;
  margin-left: 20px;
  border-left: 1px solid rgba(122, 31, 38, 0.7);
  padding-left: 20px;
}

/* Mandantenbogen */
/* Content Top – Abstand für Mandantenbogen Intro */
#sp-main-body .sp-module.mandantenbogen-intro{
  margin-top: 110px;
}

/* STARTSEITE */
/* #column-wrap-id-1651166718205 {
  margin-top: -400px !important;
}
*/

/* TOP: LOGO + MENÜ */

/* =========================================
   HEADER: Logo über Menü – global (alle Screens)
   ========================================= */

/* Header-Row darf umbrechen */
#sp-header .container-inner > .row {
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Logo: erste Zeile */
#sp-header #sp-logo {
  order: 1;
}

/* Desktop-Logo */
#sp-logo .logo-image{
  height: 60px;
  width: auto;
  margin-left: -5px;
}

/* Mobile-Logo */
@media (max-width: 991.98px){
  #sp-logo .logo-image-phone{
    height: 60px;   /* oder größer */
    width: auto;
    margin-left: -5px;
    margin-top: 15px;
  }
}

@media (max-width: 991.98px){
  #menu-right #offcanvas-toggler{
    position: relative;
    top: 25px;          /* <-- genau deine gewünschte Tiefe */
    margin-top: 0 !important;
  }
}

/* Rechter Bereich (Suche, Burger etc.) bleibt oben rechts */
#sp-header #menu-right {
  order: 2;
  margin-left: auto;
  align-self: flex-start;
  position: relative;
  z-index: 2000; /* über dem Menü, damit das Suchfeld klickbar bleibt */
}

/* Menü: zweite Zeile, volle Breite */
#sp-header #sp-menu {
  order: 3;
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: -1.65rem;
}

/* =========================================================
   FIX: Bereich 993–1409px (wie <=992px verhalten)
   -> Megamenu ausblenden, Offcanvas/Burger nutzen
   -> Negative Menu-Margin entfernen, damit nichts überlappt
   ========================================================= */

/* Menü linksbündig erzwingen */
#sp-header #sp-menu .sp-column,
#sp-header #sp-menu .menu-with-offcanvas {
  justify-content: flex-start !important;
}

/* =========================================
   PAGE TITLE – links unten mit Padding
   ========================================= */

#sp-header.full-header {
  padding-left: 120px;
  padding-right: 45px;
  padding-top: 20px;
}

/* =========================================
   HEADER: deckend (nicht transparent) + sticky sauber
   (zusammengeführt, vorher doppelt)
   ========================================= */

#sp-header{
  width: 100%;
  position: relative;
  z-index: 999;                 /* höher, damit wirklich oben */
  animation: spFadeIn .5s;

  background: #ffffff;          /* DECKEND */
  opacity: 1 !important;        /* sicherstellen */

  /* Wichtig: NICHT auf feste Höhe zwingen, sonst kollidiert dein 2-zeiliges Layout */
  height: auto !important;
  min-height: 110px;            /* behält deine Basis-Höhe */
}

/* Sticky-Varianten: Helix/Velvet nutzt je nach Setup eine dieser Klassen */
#sp-header.header-sticky,
#sp-header.is-sticky,
body.sticky-header #sp-header{
  background: #ffffff;          /* DECKEND auch im Sticky-Zustand */
  box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* optische Trennung beim Überlagern */
}

.sp-megamenu-parent > li > a {
  font-family: inherit !important;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  display: inline-block;
  padding: 0 3px;
  line-height: 60px;
  font-size: 1.1rem;
  margin: 0px 10px;
}

/* Container gibt uns die "schönen Ränder" */
.sp-page-title .container {
  width: 100%;
  margin: 0 auto;

  /* padding: top  right  bottom  left */
  padding: clamp(60px, 10vw, 140px)  /* oben: Hero-Höhe */
           clamp(24px, 5vw, 80px)    /* rechts: Seitenrand */
           clamp(40px, 6vw, 100px)   /* unten: Luft nach unten */
           clamp(24px, 5vw, 80px);   /* links: Seitenrand */
}

/* Titel selbst */
.sp-page-title-heading {
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px 0;  /* kleiner Abstand nach unten */
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Default (Desktop) */
.sp-page-title-heading {
  font-size: clamp(2rem, 4vw, 3rem) !important;
}

/* Tablets */
@media (max-width: 992px) {
  .sp-page-title-heading {
    font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
  }
}

/* Phones */
@media (max-width: 576px) {
  .sp-page-title-heading {
    font-size: clamp(1.2rem, 4vw, 2rem) !important;
  }
}

.kb-logo-pos {
  margin-left: clamp(2rem, 4vw, 3rem) !important;
}

.sp-column d-flex justify-content-between {
  width: 0px !important;
}

/* 1. Logo-Spalte: kein rechtes Padding */
#sp-header #sp-logo {
  padding-right: 0;
}

/* 2. Menü-Spalte direkt rechts vom Logo: kein linkes Padding */
#sp-header #sp-logo + .sp-column {
  padding-left: 0;
}

/* 3. Eigentlichen Abstand zwischen Logo und Menü steuern */
#sp-header #sp-logo + .sp-column #sp-menu {
  margin-left: clamp(2rem, 4vw, 3rem);
}

/* —————— */

body,
.sp-preloader {
  background-color:#ffffff;
  color:#3b3939
}
.sp-preloader>div {
  background:#992628
}
.sp-preloader>div:after {
  background:#ffffff
}
#sp-top-bar {
  background:rgba(255, 255, 255, 0.8);
  color:#aaaaaa
}
#sp-top-bar a {
  color:#aaaaaa
}

a {
  color:#992628
}

/* ACTIVE */

a:hover,
a:focus,
a:active {
  color: #fb2950
}

.tags>li {
  display:inline-block
}

.tags>li a {
  background:rgba(153, 38, 40, 0.1);
  color:#992628
}

.tags>li a:hover {
  background:#c6363c
}

.article-social-share .social-share-icon ul li a {
  color:#3b3939
}

.article-social-share .social-share-icon ul li a:hover,
.article-social-share .social-share-icon ul li a:focus {
  background:#992628
}

.sp-megamenu-parent>li>a {
  color:#252525
}

.sp-megamenu-parent>li:hover>a {
  color:#c6363c
}

.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.active:hover>a {
  color:#d62035;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background:#c6363c
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
  color:#f7f7f7
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover {
  color:#ffffff
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a {
  color:#ffffff
}

.sp-megamenu-parent .sp-mega-group>li>a {
  color:#f7f7f7
}

#offcanvas-toggler>.fa {
  color:#252525
}

#offcanvas-toggler>.fa:hover,
#offcanvas-toggler>.fa:focus,
#offcanvas-toggler>.fa:active {
  color:#c6363c
}

.offcanvas-menu {
  background-color:#c6363c;
  color:#f7f7f7
}

.offcanvas-menu .offcanvas-inner .sp-module ul>li a,
.offcanvas-menu .offcanvas-inner .sp-module ul>li span {
  color:#f7f7f7
}

.offcanvas-menu .offcanvas-inner .sp-module ul>li a:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul>li a:focus,
.offcanvas-menu .offcanvas-inner .sp-module ul>li span:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul>li span:focus {
  color:#ffffff
}

.offcanvas-menu .offcanvas-inner .sp-module ul>li.menu-parent>a>.menu-toggler,
.offcanvas-menu .offcanvas-inner .sp-module ul>li.menu-parent>.menu-separator>.menu-toggler {
  color:rgba(247, 247, 247, 0.5)
}

.offcanvas-menu .offcanvas-inner .sp-module ul>li ul li a {
  color:rgba(247, 247, 247, 0.8)
}

.btn-primary,
.sppb-btn-primary {
  border-color:#992628;
  background-color:#992628
}

.btn-primary:hover,
.sppb-btn-primary:hover {
  border-color:#c6363c;
  background-color:#c6363c
}

ul.social-icons>li a:hover {
  color:#992628
}

.layout-boxed .body-innerwrapper {
  background:#ffffff
}

.sp-module ul>li>a {
  color:#3b3939
}

.sp-module ul>li>a:hover {
  color:#992628
}

.sp-module .latestnews>div>a {
  color:#3b3939
}

.sp-module .latestnews>div>a:hover {
  color:#992628
}

.sp-module .tagscloud .tag-name:hover {
  background:#992628
}

.search .btn-toolbar button {
  background:#992628
}

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

#sp-footer,
#sp-bottom {
    background: #292626;
    color: #e6e6e6;
}

#sp-footer a,
#sp-bottom a {
    color: #ddd;
}


/* Menüschrift Bottom 2 + Bottom 3 */
#sp-bottom2 .mod-menu a,
#sp-bottom3 .mod-menu a {
    font-size: 1.2rem !important;
}


/* =========================================================
   DESKTOP-AUSRICHTUNG
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Bottom 2
     * Erster Menüpunkt bündig mit Beginn der Adresse
     */
    #sp-bottom2 .sp-module-content {
        padding-top: 84px;
    }


    /*
     * Bottom 3
     *
     * Titel und Menü werden unabhängig positioniert.
     * Dadurch beeinflusst "Service-Links" nicht mehr
     * die vertikale Position der Menüeinträge.
     */
    #sp-bottom3 .sp-module {
        position: relative;
        min-height: 100%;
    }


    /*
     * "Service-Links" nach unten setzen,
     * sodass die Unterkante ungefähr mit
     * "Mit Recht am Markt" / Logo abschließt.
     */
    #sp-bottom3 .sp-module-title {
        position: absolute;
        top: 88px;
        left: 0;
        margin: 0;
    }


    /*
     * Menü unabhängig vom Titel positionieren.
     * Ziel: Düsseldorfer Tabelle bündig mit "Über mich".
     */
    #sp-bottom3 .sp-module-content {
        padding-top: 150px;
    }

}


#sp-footer a,
#sp-bottom a {
  color:#ddd;
}

#sp-footer a:hover,
#sp-footer a:active,
#sp-footer a:focus,
#sp-bottom a:hover,
#sp-bottom a:active,
#sp-bottom a:focus {
  color:#c6363c
}

#sp-bottom .sp-module-content .latestnews>li>a>span {
  color:#e6e6e6
}

.sp-comingsoon body {
  background-color:#992628
}

.pagination>li>a,
.pagination>li>span {
  color:#3b3939
}

.pagination>li>a:hover,
.pagination>li>a:focus,
.pagination>li>span:hover,
.pagination>li>span:focus {
  color:#3b3939
}

.pagination>.active>a,
.pagination>.active>span {
  border-color:#992628;
  background-color:#992628
}

.pagination>.active>a:hover,
.pagination>.active>a:focus,
.pagination>.active>span:hover,
.pagination>.active>span:focus {
  border-color:#992628;
  background-color:#992628
}

.error-code,
.coming-soon-number {
  color:#992628
}

/* Scroller / Carrussell Fix */
.sppb-articles-carousel-meta-category {
    display: none !important;
}

/* Max Width Fix */
/* =========================================
   Bootstrap container max-width überschreiben
   ========================================= */

/* =========================================
   HOTFIX: Container NICHT auf 0 collapsen lassen
   ========================================= */

/* global: Container dürfen wieder normal breit sein */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  max-width: 90% !important;   /* oder: none, siehe Hinweis unten */
}

/* ========= */

@media (max-width: 740px) {
  .one .owl-carousel .owl-refresh .owl-item:first-child {display: block !important; margin-bottom: 10px; visibility: visible;}
  .one .customNavigation {visibility: hidden; display: none;}
  .owl-carousel .owl-stage {visibility: visible;}
  .owl-carousel.owl-loading {opacity: 1;}
}

/* =========== Customization =========== */

.wayne-corp-service-box {
  color: #303030;
}

.wayne-corp-service-box .sppb-addon-title {
  font-weight: bold !important;
  font-size: 1.4rem !important;
}

/* Feedback-Box – rechts floatend, leicht abgerundete Ecken */
.mm-feedback-box{
  float: right;
  width: clamp(260px, 28vw, 340px);
  margin: 0 0 1.2rem 1.5rem;         /* Abstand zum Fließtext links/unten */
  padding: 1.2rem 1.2rem 1rem 1.2rem;
  background: #fff;
  border: 3px solid #b73238;          /* Akzentfarbe anpassbar */
  border-radius: 6px;                 /* GANZ leicht abgerundet */
  position: relative;                 /* Anker für das Badge */
  box-sizing: border-box;
}

/* Text in der Box */
.mm-feedback-box p {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
  font-size: 0.9rem;  /* neu */
      z-index: 10;
  }

/* PNG-Badge, das über der rechten oberen Ecke „hovert“ */
.mm-feedback-badge{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(10%, -40%);     /* Über den Rand hinaus schieben */
  width: 100px;                        /* bei Bedarf anpassen */
  height: auto;
	z-index: 20;
}

/* Float auf mobilen Breiten aufheben */
@media (max-width: 640px){
  .mm-feedback-box{
    float: none;
    width: auto;
    margin: 0 0 1rem 0;
  }
  .mm-feedback-badge{
    transform: translate(8%, -22%);
    width: 84px;
  }
}

/* optionales Clear-Utility (nur nutzen, wenn gebraucht) */
.mm-clear{ clear: both; }

/* Logo responsive */

@media (max-width: 992px) {
  #sp-header.full-header {
    padding-left: 20px !important;
    padding-right: 45px;
    padding-top: 0px;
  }
}

@media (max-width: 576px) {
  #sp-logo .sp-logo .logo {
    height: 60px;
  }
}

@media (max-width: 1410px) {
  #sp-header #menu-right input.form-control {
    margin-bottom: 17px;
  }
}

/* ===============================================
   FOOTER BOTTOM 1–4: Padding + Linkfarben (Menü + Eigener Inhalt)
   Voraussetzung:
   - In den Modulen steht bei "CSS-Klasse Modul": footer-bottom1 ... footer-bottom4
   - In Menü-Modulen steht bei "CSS-Klasse Menü": menu-bottom1 ... menu-bottom4
     -> Joomla macht daraus im UL: menufooter-menu-bottom1 ... menufooter-menu-bottom4
   ========================================= */

/* 1) Padding */
.sp-module.footer-bottom1,
.sp-module.footer-bottom2,
.sp-module.footer-bottom3,
.sp-module.footer-bottom4 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* 2) Textfarbe in "Eigener Inhalt" (Bottom1 etc.) */
#sp-bottom .sp-module.footer-bottom1,
#sp-bottom .sp-module.footer-bottom2,
#sp-bottom .sp-module.footer-bottom3,
#sp-bottom .sp-module.footer-bottom4{
  color: #eeeeee !important;
}

/* Titel im Modul */
#sp-bottom .sp-module.footer-bottom1 .sp-module-title,
#sp-bottom .sp-module.footer-bottom2 .sp-module-title,
#sp-bottom .sp-module.footer-bottom3 .sp-module-title,
#sp-bottom .sp-module.footer-bottom4 .sp-module-title{
  color: #eeeeee !important;
}

/* Fließtext im Modul */
#sp-bottom .sp-module.footer-bottom1 .sp-module-content,
#sp-bottom .sp-module.footer-bottom2 .sp-module-content,
#sp-bottom .sp-module.footer-bottom3 .sp-module-content,
#sp-bottom .sp-module.footer-bottom4 .sp-module-content{
  color: #eeeeee !important;
}

/* 3) Links (gilt für ALLES im Modul: Menü + Eigener Inhalt) */
#sp-bottom .sp-module.footer-bottom1 a,
#sp-bottom .sp-module.footer-bottom2 a,
#sp-bottom .sp-module.footer-bottom3 a,
#sp-bottom .sp-module.footer-bottom4 a{
  color: #eeeeee !important;
}

#sp-bottom .sp-module.footer-bottom1 a:hover,
#sp-bottom .sp-module.footer-bottom2 a:hover,
#sp-bottom .sp-module.footer-bottom3 a:hover,
#sp-bottom .sp-module.footer-bottom4 a:hover{
  color: #b62833 !important;
}

/* =========================================
   FOOTER BOTTOMS – Mobile Abstände reduzieren
   ========================================= */

@media (max-width: 992px) {
  .com-content.view-article .sp-module {
    margin-top: 5px;
  }

  .sp-module.footer-bottom1,
  .sp-module.footer-bottom2,
  .sp-module.footer-bottom3,
  .sp-module.footer-bottom4 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #sp-bottom .sp-module .sp-module-title {
    margin-bottom: 10px;
  }
}

/* ======================================================== */

/* Footer-Spalte links: Inhalt nach unten schieben */
/* Footer-Row soll in der Höhe "strecken", damit untenbündig überhaupt Sinn ergibt */
#sp-footer .row{
  align-items: stretch;
}

/* Linke Footer-Spalte: Inhalt nach unten drücken */
#sp-footer #sp-footer1 .sp-column{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Das eigentliche Element nach unten + 48px Luft */
#sp-footer #sp-footer1 .sp-copyright{
  margin-top: auto;       /* untenbündig */
  padding-bottom: 48px;   /* Abstand nach unten */
  display: block;
}

/* footer-obligatorisch */

#sp-footer .sp-module.footer-obligatorisch {
  margin-bottom: 48px;
}

/* Footer: Modul "footer-obligatorisch" – Linkfarben */
#sp-footer .sp-module.footer-obligatorisch a,
#sp-bottom  .sp-module.footer-obligatorisch a{
  color: #e9e9e9 !important;
}

#sp-footer .sp-module.footer-obligatorisch a:hover,
#sp-bottom  .sp-module.footer-obligatorisch a:hover{
  color: #b62833 !important;
}

#sp-footer .sp-copyright{
  font-family: inherit !important;
  font-weight: 400;
}

/* Content Bottom Full Page */

/* =========================================
   CONTENT-BOTTOM: volle Breite (100vw) trotz Container
   (konsolidiert: background/border-top nicht doppelt)
   ========================================= */

.sp-module-content-bottom{
  background-color: #d8d8d8;
  border-top: 1px solid rgb(138, 43, 45);

  /* auf volle Viewportbreite ziehen */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* innen wieder „normal“ arbeiten (keine 90%-Container-Bremse) */
.sp-module-content-bottom .container,
.sp-module-content-bottom .container-sm,
.sp-module-content-bottom .container-md,
.sp-module-content-bottom .container-lg,
.sp-module-content-bottom .container-xl{
  max-width: none !important;
  width: 100%;
}

/* =========================================
   SP Page Builder – Articles Carousel
   Kategorie im CONTENT-BOTTOM ausblenden
   ========================================= */
.sp-module-content-bottom .sppb-articles-carousel-meta-category{
  display: none !important;
}


/* falls durch 100vw ein horizontaler Scrollbalken auftaucht */
html, body{
  overflow-x: hidden;
}