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

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  background: #861922;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: #861922;
}
#offcanvas-toggler > i {
  color: #000000;
}
#offcanvas-toggler > i:hover {
  color: #861922;
}
.btn-primary,
.sppb-btn-primary {
  border-color: #1c98cc;
  background-color: #861922;
}
.btn-primary:hover,
.sppb-btn-primary:hover {
  border-color: #177aa4;
  background-color: #1a8bba;
}
ul.social-icons > li a:hover {
  color: #861922;
}
.sp-page-title {
  background: #861922;
}
.layout-boxed .body-innerwrapper {
  background: #ffffff;
}
.sp-module ul > li > a {
  color: #000000;
}
.sp-module ul > li > a:hover {
  color: #861922;
}
.sp-module .latestnews > div > a {
  color: #000000;
}
.sp-module .latestnews > div > a:hover {
  color: #861922;
}
.sp-module .tagscloud .tag-name:hover {
  background: #861922;
}
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a,
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a:hover {
  background: #861922;
}
.search .btn-toolbar button {
  background: #861922;
}
.post-format {
  background: #861922;
}
.voting-symbol span.star.active:before {
  color: #861922;
}
.sp-rating span.star:hover:before,
.sp-rating span.star:hover ~ span.star:before {
  color: #1a8bba;
}
.entry-link,
.entry-quote {
  background: #861922;
}
blockquote {
  border-color: #861922;
}
.carousel-left:hover,
.carousel-right:hover {
  background: #861922;
}
#sp-footer {
  background: #861922;
  font-family: verdana;
  font-size: 16px;
  line-height: 28px;
}
#sp-bottom {
  font-family: verdana;
  font-size: 16px;
  line-height: 28px;
}
  
.sp-comingsoon body {
  background-color: #861922;
}
.pagination > li > a,
.pagination > li > span {
  color: #000000;
}
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
  color: #000000;
}
.pagination > .active > a,
.pagination > .active > span {
  border-color: #861922;
  background-color: #861922;
}
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  border-color: #861922;
  background-color: #861922;
}
/*
 * Artisteer -> Helix Ultimate / SP Page Builder
 * Bereinigte Übernahme der relevanten Gestaltung aus template.css + custom.css
 *
 * Empfohlene Verwendung:
 * - Seiten-/Bereichs-Wrapper: artisteer-content
 * - Helle Kachel: art-kachel
 * - Bordeaux-Kachel: art-kachel-2
 * - Innenabstand links/rechts: jb-rand
 * - Großer Button: art-button
 * - Dunkle/weiße Listenpunkte in Bordeaux-Flächen: art-li-2
 */

:root {
  --art-bordeaux: #861922;
  --art-bordeaux-visited: #70151c;
  --art-text: #323232;
  --art-dark: #1f1f1f;
  --art-gray: #aaaaaa;
  --art-light-gray: #cccccc;
  --art-white: #ffffff;
  --art-body-font: Georgia, "Times New Roman", Times, serif;
  --art-heading-font: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------
   Inhalt / Typografie
   Im SP Page Builder am besten einer Section/Row die Klasse
   "artisteer-content" geben.
   --------------------------------------------------------- */
.artisteer-content {
  color: var(--art-text);
  font-family: var(--art-body-font);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
}

.artisteer-content p {
  margin: 13px 0;
}

.artisteer-content a,
.artisteer-content a:link {
  color: #000;
  text-decoration: none;
}

.artisteer-content a:visited {
  color: var(--art-bordeaux-visited);
}

.artisteer-content a:hover,
.artisteer-content a:focus {
  color: #424242;
  text-decoration: none;
}

.artisteer-content h1,
.artisteer-content h2,
.artisteer-content h3,
.artisteer-content h4,
.artisteer-content h5,
.artisteer-content h6 {
  font-family: var(--art-heading-font);
  font-style: normal;
  line-height: 1.2;
  margin: 10px 0 0;
}

.artisteer-content h1 {
  color: var(--art-bordeaux);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
}

.artisteer-content h2 {
  color: var(--art-bordeaux);
  font-size: 22px;
  font-weight: 400;
}

.artisteer-content h3 {
  color: var(--art-bordeaux);
  font-size: 18px;
  font-weight: 700;
}

.artisteer-content h4,
.artisteer-content h5 {
  color: #292929;
  font-size: 18px;
  font-weight: 400;
}

.artisteer-content h6 {
  color: #000;
  font-size: 13px;
  font-weight: 400;
}

/* Listen: ohne Artisteer-Bild postbullets.png, dafür CSS-Punkt */
.artisteer-content ul,
.artisteer-content ol {
  margin: 1em 0 1em 2.2em;
  padding: 0;
}

.artisteer-content li {
  color: var(--art-text);
  font-family: var(--art-body-font);
  font-size: 18px;
  line-height: 22px;
  margin-top: 15px;
}

.artisteer-content ul {
  list-style: none;
}

.artisteer-content ul > li {
  position: relative;
}

.artisteer-content ul > li::before {
  content: "•";
  font-size: 1.9em;
  position: absolute;
  left: -0.7em;
  color: var(--art-bordeaux);
  font-weight: 700;
}

.artisteer-content ol {
  list-style-position: outside;
}

.artisteer-content blockquote {
  margin: 10px 0 0 25px;
  padding: 10px 10px 10px 20px;
  border-left: 4px solid var(--art-bordeaux);
  background: var(--art-light-gray);
  color: #333;
  font-family: var(--art-body-font);
  font-style: italic;
  text-align: left;
}

/* Tabellen innerhalb des gekapselten Inhalts */
.artisteer-content table {
  width: 100%;
  border-collapse: collapse;
}

.artisteer-content th,
.artisteer-content td {
  padding: 7px;
  vertical-align: top;
  text-align: left;
}

.artisteer-content th {
  text-align: center;
  vertical-align: middle;
}

/* ---------------------------------------------------------
   Kachel 1 – weiß / Bordeaux
   CSS Class im Addon/Container: art-kachel
   --------------------------------------------------------- */
.art-kachel {
  width: 100%;
  min-height: 220px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  background: var(--art-white);
  color: var(--art-bordeaux);
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}

a.art-kachel,
a.art-kachel:link,
a.art-kachel:visited,
button.art-kachel,
input.art-kachel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-decoration: none;
  color: var(--art-bordeaux);
  cursor: pointer;
}

.art-kachel:hover,
.art-kachel:focus,
.art-kachel.active,
.art-kachel.active:hover {
  background-color: var(--art-gray);
  color: var(--art-text) !important;
}

/* ---------------------------------------------------------
   Kachel 2 – Bordeaux / weiß
   CSS Class im Addon/Container: art-kachel-2
   --------------------------------------------------------- */
.art-kachel-2 {
  width: 100%;
  min-height: 220px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  background: var(--art-bordeaux);
  color: var(--art-white);
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}

a.art-kachel-2,
a.art-kachel-2:link,
a.art-kachel-2:visited,
button.art-kachel-2,
input.art-kachel-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-decoration: none;
  color: var(--art-white);
  cursor: pointer;
}

.art-kachel-2:hover,
.art-kachel-2:focus,
.art-kachel-2.active,
.art-kachel-2.active:hover {
  background-color: var(--art-gray);
  color: var(--art-text) !important;
}

/* Weißer Listenpunkt auf dunkler Kachel */
ul.art-li-2,
.art-li-2 ul {
  list-style: none;
}

ul.art-li-2 > li,
.art-li-2 ul > li {
  position: relative;
}

ul.art-li-2 > li::before,
.art-li-2 ul > li::before {
  content: "•";
  position: absolute;
  left: -1.1em;
  color: #fff;
}

/* ---------------------------------------------------------
   Horizontaler Innenabstand
   --------------------------------------------------------- */
.jb-rand {
  padding-left: 10%;
  padding-right: 10%;
}

/* ---------------------------------------------------------
   Artisteer Button
   Klasse kann direkt im SP Page Builder Button-Addon unter
   CSS Class ergänzt werden: art-button
   --------------------------------------------------------- */
.art-button,
a.art-button,
button.art-button,
input.art-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 50px;
  border: 0;
  border-radius: 28px;
  box-sizing: border-box;
  background: var(--art-bordeaux);
  color: #fff !important;
  font-family: var(--art-heading-font);
  font-size: 24px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.art-button:hover,
.art-button:focus {
  background: #ababab;
  color: var(--art-dark) !important;
}

.art-button.active,
.art-button.active:hover {
  background: var(--art-bordeaux);
  color: #dedede !important;
}

/* Alte custom.css hatte 200px Seitenpadding am Button.
   Optional nur auf großen Bildschirmen aktivieren mit zusätzlicher Klasse
   "art-button-wide". */
.art-button.art-button-wide {
  padding-left: 200px;
  padding-right: 200px;
}

/* ---------------------------------------------------------
   Optionaler Footer-Look
   Einer Helix/SPPB Footer-Section die Klasse artisteer-footer geben.
   --------------------------------------------------------- */
.artisteer-footer {
  padding: 40px;
  border-top: 1px dotted var(--art-bordeaux);
  background: var(--art-gray);
  color: #1a1a1a;
  font-family: var(--art-heading-font);
  font-size: 16px;
  line-height: 1.75;
  text-align: left;
}

.artisteer-footer a,
.artisteer-footer a:link,
.artisteer-footer a:visited {
  color: #1a1a1a;
  text-decoration: none;
}

.artisteer-footer a:hover,
.artisteer-footer a:focus {
  color: var(--art-text);
}

/* ---------------------------------------------------------
   Responsive Anpassungen – ersetzt Artisteers feste Desktopbreite
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
  .jb-rand {
    padding-left: 6%;
    padding-right: 6%;
  }

  .art-button.art-button-wide {
    padding-left: 80px;
    padding-right: 80px;
  }
}

@media (max-width: 767.98px) {
  .artisteer-content {
    font-size: 17px;
  }

  .art-kachel,
  .art-kachel-2 {
    min-height: 180px;
  }

  .jb-rand {
    padding-left: 20px;
    padding-right: 20px;
  }

  .art-button,
  a.art-button,
  button.art-button,
  input.art-button,
  .art-button.art-button-wide {
    width: 100%;
    min-height: 52px;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 20px;
  }

  .artisteer-footer {
    padding: 30px 20px;
  }
}
.social-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.social-logos a {
  display: inline-flex;
}

.social-logos img {
  display: block;
  margin: 0;
}