@import "custom_fonts.css";
.featured-article-badge {display: none; visibility: hidden;}

:root {
  --ksvrot: #d81027;
}

/* 
Content  Widgets  SocialIcons  HEADER  Accordeon  MEGAmenu  OFFcanvas  MenuTrenner  Bottom Footer
*/

body {
  font-family: 'Open Sans';
  font-size: 18px;
  color: #252525;
}

.container {
  padding-left: 30px;
  padding-right: 30px;
}

a img:hover {opacity:0.8;}

/* Content */
.article-list {
    .items-leading {
        .article {padding: 20px 0;}
        .article-header h2 {font-size: 2em;}
    }
    .article {
      margin-bottom: 30px;
      padding: 20px;
      border: none;
      border-radius: 0px;
    }
    .article.blog-items.cols-3 {
      box-shadow: 0 0 7px rgba(0,0,0,0.5);
      min-height: 25em;
    }
    .article .article-intro-image, .article .article-featured-video,
    .article .article-featured-audio, .article .article-feature-gallery,
    .article .article-intro-image img, .article .article-featured-video img,
    .article .article-featured-audio img, .article .article-feature-gallery img {
      border-radius: 0;
    }
}


/* Widgets */
.widget { /* bei Einbindung als Modul */
  margin: 100px 0 0;

  box-shadow: 0 0 7px rgba(0,0,0,0.5);
}
.fussballde_widget {
  clip-path: polygon(0 55px, 100% 55px, 100% 100%, 0% 100%);
  transform: translateY(-55px);
}
.fussballde_widget.no-clip {
  clip-path: none;
  transform: translateY(0);
}


/* SocialIcons */
.socicons {margin: 0 0 0 1em;}
.socicons img {
   height: min(25px, 8vw); width: auto;
   margin: 0 4px;
   display: inline-block;}
.socicons img:hover {opacity: 0.8;}

#sp-footer .socicons {filter: invert();}

@media (max-width: 700px) {
  .socicons {margin: 1em 0; display: block;}
  .socicons img {margin: 0 8px;}
}


/* HEADER */
#sp-top-bar {font-size: 1rem;}
ul.social-icons {padding-left: 5px;font-size: 1.2rem;}



/* Accordeon */
.ssl-outer {
  border: 0px!important;
  border-radius: 0px!important;
  margin-bottom: 0px!important;
}
.ssl-title {
  border-top: 1px dotted #000 !important;
  font-size: 1em;
  font-weight: 600;
  padding: 8px 0px 8px 10px;
  margin-bottom: 0;
  color: #000 !important;
}
.ssl-title:hover {
  background-color: rgba(0,0,0,0.1) !important;
  color: #000!important;
}

.ssl-title-open {
  background-color: rgba(0,0,0,0.1);
}
.ssl-title::after {
  content: url('/images/icons/angle-down.svg');
  width: 1em;
  height: auto;
  display: block;
  position: relative;
  float: right;
  opacity: 0.7;
  margin: 0 10px 0 0;
}
.ssl-title.ssl-title-open::after {
  content: url('/images/icons/angle-up.svg');
}

.ssl-content {
  border-top: 0px;
  padding: 8px 10px;
  max-width: 97%;
}


/* MEGAmenu*/
.sp-megamenu-parent > li {padding: 0 0.25em;}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span,
.offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span {
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: 600;
}
.sp-megamenu-parent > li > a::first-letter, .sp-megamenu-parent > li > span::first-letter,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent a::first-letter,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent span::first-letter {
  color: var(--ksvrot);
  font-size: 115%;
  font-weight: 700;
}
.sp-menu-heading:hover {color: var(--ksvrot);}

body.ltr .sp-megamenu-parent > li.sp-has-child > a::after,
body.ltr .sp-megamenu-parent > li.sp-has-child > span::after {
  display: none;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
  font-size: 0.9em;
  line-height: 1;
  padding: 8px 0;
  text-transform: uppercase;
}

body.ltr .sp-megamenu-parent li:last-child .sp-dropdown.sp-dropdown-main.sp-menu-right {
    left: inherit !important;
    right: 0 !important;
}

/* OFFcanvas */
.burger-icon {width: 35px;}
.burger-icon > span {height: 4px;}

.offcanvas-menu .logo-image {
  width: 220px;
  height: auto;
  padding-top: 5px;
}

.offcanvas-active .burger-icon > span:nth-child(1), 
#modal-menu-toggler.active .burger-icon > span:nth-child(1) {
  transform: translate(0, 10px) rotate(-45deg);
}
.offcanvas-active .burger-icon > span:nth-child(3), 
#modal-menu-toggler.active .burger-icon > span:nth-child(3) {
  transform: translate(0, -7px) rotate(45deg);
}

.offcanvas-menu {width: 350px;}
body.ltr.offcanvs-position-right .offcanvas-menu {right: -105%;}

.offcanvas-inner ul.menu ul li {margin: 5px 0;}

.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 > .nav-header > .menu-toggler::after {
  font-size: 60%;
}

/* Trikots */
.trikot {
  text-align: center;
  p:has(img) {margin: 0;}
  img {max-width: 100px; margin: auto;}

}

.herren-1 {
  .heim {
    img.hemd {background-color: var(--ksvrot);}
    img.hose {background-color: var(--ksvrot);}
    img.sock {background-color: var(--ksvrot);}
   }
  .auswaerts {
    .hemd {background-color: #333;}
    .hose {background-color: #333;}
    .sock {background-color: #333;}
   }
}
.herren-2 {
  .heim {
    img.hemd {background-color: #309CEC;}
    img.hose {background-color: #309CEC;}
    img.sock {background-color: #309CEC;}
   }
  .auswaerts {
    .hemd {background-color: #c9c9c9;}
    .hose {background-color: #333;}
    .sock {background-color: #c9c9c9;}
   }
}


/* MenuTrenner */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span.trenner {
  margin: -12px 0 -8px;
  display: block;
}
.offcanvas-inner ul.menu ul li.menu-divider {margin: -12px 0 -8px;}
span.menu-separator.trenner {font-weight: 300 !important;}

/* Bottom Footer */
.sp-module.navi {
    word-spacing: 0.35em;
}

/* ############################## 
   ############################## */

@media (max-width: 991px) {
  
  #sp-footer #sp-footer2 {text-align: left;}

}


@media (max-width: 575px) {

  #sp-header {height: 55px;}

}