/* Truedesign.eu CSS
*********************************************/
/*
** Festlegung der Grundfarben des Templates.
** Apollon Mustertemplate
** 11. Mai 2022, Ralph Striewe, Truedesign D-34414 Warburg
** Zuletzt angepasst: 6. April 2023
*/
/*
** DJ-Slider
*/
.sliderwrap,
.footerimagewrap {
  transform: unset;
  z-index: unset;
  width: 100%; }

.sliderwrap {
  margin-top: 40px;
  margin-bottom: 50px; }

.sliderwrap .slide-desc {
  display: none; }

.slide-desc-text-default {
  text-align: center; }
  .slide-desc-text-default h1,
  .slide-desc-text-default h2,
  .slide-desc-text-default h3,
  .slide-desc-text-default h4,
  .slide-desc-text-default h5,
  .slide-desc-text-default h6,
  .slide-desc-text-default p,
  .slide-desc-text-default a {
    color: white; }

.sliderposmobwrap .slide-desc-text-default h1,
.footerimagemob .slide-desc-text-default h1 {
  font-size: calc(var(--td-h1-size)*.4); }
.sliderposmobwrap .slide-desc-text-default h2,
.footerimagemob .slide-desc-text-default h2 {
  font-size: calc(var(--td-h2-size)*.4); }
.sliderposmobwrap .slide-desc-text-default h3,
.footerimagemob .slide-desc-text-default h3 {
  font-size: calc(var(--td-h3-size)*.4); }
.sliderposmobwrap .slide-desc-text-default p,
.sliderposmobwrap .slide-desc-text-default a,
.footerimagemob .slide-desc-text-default p,
.footerimagemob .slide-desc-text-default a {
  font-size: calc(var(--td-p-size)*.4); }

@media (min-width: 1200px) {
  .sliderwrap .slide-desc {
    display: block; } }
@media (min-width: 1400px) {
  .sliderwrap {
    top: -240px;
    margin: 0; } }
/*
** Chronoforms
*/
.ui.checkbox label,
.ui.checkbox small,
.ui.checkbox a,
.ui.checkbox p {
  text-align: left;
  color: var(--td-fontColor);
  font-size: 1rem !important;
  line-height: 20px; }
.ui.checkbox a {
  text-decoration: underline; }
.ui.checkbox a:hover {
  color: var(--td-signalfarbe); }
.ui.checkbox b,
.ui.checkbox strong {
  font-weight: 600; }

.ui.form .field > label,
.ui.button {
  font-weight: 600 !important; }

.chronowrap h3 {
  margin-top: 30px;
  color: var(--td-hellgrau);
  font-size: var(--td-p-size); }

.igui-slideshow-items {
  width: unset; }

.td-kopfbild,
.td-portrait {
  padding: 0; }
  .td-kopfbild img,
  .td-portrait img {
    width: 100%;
    height: auto; }

.td-kontakt-headline {
  margin-top: 20px;
  margin-bottom: 10px; }
  .td-kontakt-headline h2,
  .td-kontakt-headline p {
    color: var(--td-fontColor); }
  .td-kontakt-headline h2 {
    font-size: 28px; }
  .td-kontakt-headline p {
    font-size: 18px; }

.td-kopfbild {
  margin-bottom: 15px; }

.td-kontakt-komplett {
  padding: 0;
  width: 100%;
  border: 1px solid var(--td-firmenfarbe); }

.td-kontakt-beschreibung {
  padding: 20px;
  background-image: url("/images/skf-background.png");
  background-position: 135% -10%;
  background-repeat: no-repeat;
  background-size: 60%; }
  .td-kontakt-beschreibung h2 {
    font-size: 28px;
    color: var(--td-firmenfarbe); }
  .td-kontakt-beschreibung h4 {
    font-size: 18px;
    color: var(--td-fontColor);
    font-weight: 400; }
  .td-kontakt-beschreibung h4.td-taetigkeit {
    font-style: italic; }

span.fas {
  color: var(--td-firmenfarbe); }

.td-telefon::before {
  content: "\f095";
  display: inline-block;
  font-family: var(--td-fontawesome);
  font-weight: 900;
  padding-right: 5px; }

.td-email::before {
  content: "\f2b6";
  display: inline-block;
  font-family: var(--td-fontawesome);
  font-weight: 900;
  padding-right: 5px; }

.td-mobil::before {
  content: "\f10b";
  display: inline-block;
  font-family: var(--td-fontawesome);
  font-weight: 900;
  padding-right: 5px; }

ol.fa-ul {
  margin-top: 20px; }
  ol.fa-ul li {
    font-size: var(--td-p-size);
    margin-top: 5px;
    margin-bottom: 5px; }
    ol.fa-ul li span.fa-li {
      left: calc(var(--fa-li-width, 2em)*-0.5);
      position: relative;
      text-align: left;
      font-size: var(--td-p-size);
      color: var(--td-firmenfarbe); }
    ol.fa-ul li a {
      color: var(--td-fontColor); }

.td-sideinfo-wrapper {
  margin-bottom: 5px; }
  .td-sideinfo-wrapper .accordion-header .accordion-button {
    font-size: 22px;
    font-weight: 400;
    color: white;
    background-color: var(--td-firmenfarbe); }
  .td-sideinfo-wrapper .accordion-item {
    border: none; }
    .td-sideinfo-wrapper .accordion-item:first-of-type, .td-sideinfo-wrapper .accordion-item:last-of-type {
      border: none;
      border-radius: 0; }
    .td-sideinfo-wrapper .accordion-item .accordion-button.collapsed {
      border: none;
      border-radius: 0; }
  .td-sideinfo-wrapper .accordion-button {
    box-shadow: none;
    border-radius: 0; }
    .td-sideinfo-wrapper .accordion-button:focus {
      box-shadow: none; }
  .td-sideinfo-wrapper .accordion-button::after {
    color: white;
    filter: brightness(100) saturate(0); }

/*
** Menue
*/
nav li,
nav .menu-rechts {
  color: var(--td-aLinkColor); }
  nav li a,
  nav .menu-rechts a {
    font-size: var(--td-menu-size); }

ul.nav {
  width: 100%; }

.deeper.parent li {
  margin-left: 20px; }

.offcanvas-body ul {
  background-color: rgba(135, 15, 59, 0.5); }
.offcanvas-body li {
  border-bottom: 1px solid white; }
.offcanvas-body li:last-child {
  border: none; }

.point-through {
  pointer-events: all; }

.mm-toggler {
  cursor: pointer; }

.mm-toggler::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  padding-left: 15px; }

.deeper > ul {
  position: relative;
  z-index: 1023; }

.offcanvas {
  background-image: url("../images/menubanner.jpg");
  background-size: cover;
  background-repeat: no-repeat; }
  .offcanvas ul {
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px; }

.offcanvas-header {
  color: white;
  text-transform: uppercase;
  background-color: var(--td-firmenfarbe);
  padding-left: 65px; }
  .offcanvas-header .btn-close {
    background-color: white; }

.offcanvas-body {
  padding: 15px; }
  .offcanvas-body a,
  .offcanvas-body li,
  .offcanvas-body span {
    text-align: left;
    color: white; }
  .offcanvas-body ul {
    margin: 0; }

.navbar ul li ul {
  max-height: 1500px;
  overflow: hidden;
  transition: max-height 0.3s ease-out 0s; }

.mod-menu {
  line-height: 40px; }

.nav-item.active {
  font-weight: var(--td-fontBold); }
  .nav-item.active ul {
    font-weight: 400; }

.menu2bg {
  background-color: var(--td-firmenfarbe); }
  .menu2bg .mobibutton .btn {
    color: white; }
  .menu2bg li,
  .menu2bg a,
  .menu2bg .separator {
    color: var(--td-fontColor); }
    .menu2bg li:hover,
    .menu2bg a:hover,
    .menu2bg .separator:hover {
      color: var(--td-signalfarbe); }
  .menu2bg li ul li:hover {
    background-color: white; }

.menu1bg {
  z-index: 1022; }
  .menu1bg a {
    color: var(--td-fontColor); }
  .menu1bg a:hover {
    color: var(--td-firmenfarbe); }
  .menu1bg .menu-links.col-auto {
    flex: 1 0 auto; }
  .menu1bg .col-auto.menu-rechts {
    padding-top: 10px; }

.menu1bg,
.menu2bg {
  padding-top: 5px;
  padding-bottom: 5px; }

.menu2bg {
  z-index: 1021; }

.mobibutton {
  display: block; }

@media (min-width: 1400px) {
  .mobibutton {
    display: none; }

  .offcanvas-body .mod-menu {
    margin-left: 0; }

  .offcanvas {
    background-image: none; }

  .menu1bg .offcanvas-body ul {
    background: none; }

  .menu2bg li,
  .menu2bg a,
  .menu2bg .separator {
    color: white; }
  .menu2bg ul ul li,
  .menu2bg ul ul a,
  .menu2bg ul ul .separator {
    color: var(--td-fontColor); }

  .deeper > ul {
    position: absolute; }

  nav li,
  nav .menu-rechts {
    padding-top: 8px;
    padding-bottom: 8px; } }
/*
** Grundlegendes CSS nach der "mobile first" Methode.
*/
:root {
  --td-fontHeadline: var(--td-fontBody);
  --td-fontColor: var(--td-fontfarbe);
  --td-footerSize: 16px;
  --td-whiteTransp: rgba(255, 255, 255, 0.5);
  --td-whiteTransp-90: rgba(255, 255, 255, 0.9);
  --td-hellgrau: #f3f3f3;
  --td-h1-size: 60px;
  --td-h2-size: 38px;
  --td-h3-size: 28px;
  --td-p-size: 18px;
  --td-bc-size: 14px;
  --td-menu-size: 19px;
  --td-fontBold: 600;
  --td-fontawesome: "Fontawesome 6 Free";
  --farbe-facebook: #3b5998;
  --farbe-instagram: #3f729b; }

/*
** Grundlegendes CSS
*/
html {
  overflow-y: scroll;
  overflow-x: hidden; }

html,
body {
  font-family: var(--td-fontBody);
  font-weight: 400;
  font-size: 10px;
  color: var(--td-fontColor);
  margin: 0;
  padding: 0; }

strong {
  font-weight: var(--td-fontBold); }

.firmenfarbe {
  color: var(--td-firmenfarbe); }
  .firmenfarbe .fa-brands {
    font-weight: 900; }

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
label {
  text-align: left; }

h1 {
  font-size: calc(var(--td-h1-size)*.7);
  font-weight: var(--td-fontBold);
  color: var(--td-firmenfarbe); }

h2 {
  font-size: calc(var(--td-h2-size)*.7);
  color: var(--td-firmenfarbe);
  font-weight: var(--td-fontBold); }

h3 {
  font-size: calc(var(--td-h3-size)*.8);
  font-weight: var(--td-fontBold); }

h4,
h5,
h6 {
  font-size: calc(var(--td-p-size)*.9);
  font-weight: var(--td-fontBold); }

h4 {
  color: var(--td-firmenfarbe); }

h6 {
  font-style: italic; }

p,
a,
label {
  font-size: calc(var(--td-p-size)*.9);
  color: var(--td-fontColor);
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto; }

a {
  transition: color 0.7s;
  color: var(--td-aLinkColor);
  text-decoration: none; }

a:hover {
  color: var(--td-signalfarbe); }

ul {
  width: fit-content;
  list-style-position: outside; }
  ul li {
    font-size: var(--td-p-size);
    text-align: left; }

em {
  font-style: italic; }

button.carousel-control-prev:hover, button.carousel-control-next:hover {
  background: rgba(255, 255, 255, 0.4); }

.icons {
  display: none; }

.readmore .btn {
  font-size: var(--td-p-size); }
.readmore .btn-secondary {
  background-color: var(--td-signalfarbe);
  border: none;
  padding: 11px 17px;
  border-radius: 0; }
  .readmore .btn-secondary:hover {
    background-color: var(--td-firmenfarbe); }

.platzhalter {
  height: 10px; }

.btn {
  font-size: var(--td-p-size); }

.btn-secondary {
  background-color: var(--td-firmenfarbe);
  border: none;
  padding: 11px 17px;
  border-radius: 0; }
  .btn-secondary:hover {
    background-color: var(--td-signalfarbe); }

.btn.megabutton {
  width: 100%;
  height: auto;
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 24px;
  font-weight: 700;
  text-align: center; }

.startimage {
  position: relative; }

.headwrap {
  margin-top: 80px;
  background-color: white;
  min-height: 100px; }
  .headwrap p {
    margin-bottom: 0; }
  .headwrap div[class*="col-"] {
    min-height: 60px; }

.maincontent {
  margin-top: 20px; }

.starttext {
  margin-bottom: 60px; }

.system-unpublished {
  display: none; }

#frame {
  max-width: 600px; }

img {
  max-width: 100%;
  height: auto; }

.container-3xl {
  width: 100%;
  max-width: 1520px; }

.svg-inline--td-fa {
  margin-right: 10px; }

.article p {
  text-align: justify; }

.headerwrap {
  min-height: 10px;
  z-index: 99; }
  .headerwrap .innerhead {
    background-color: white;
    transform: translateX(-50%);
    margin-top: 0.6rem; }
    .headerwrap .innerhead div[class*="col-"] {
      padding-top: 5px;
      padding-bottom: 5px; }
  .headerwrap a,
  .headerwrap p {
    margin: 0; }
  .headerwrap .soc-item {
    padding-left: 5px;
    padding-right: 5px; }

.logorow {
  pointer-events: none; }
  .logorow .row {
    flex-direction: column; }
  .logorow .logopos {
    box-shadow: 0 0 20px var(--td-grauStd);
    background: white;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto; }
    .logorow .logopos img {
      pointer-events: all;
      max-width: 100%;
      height: auto;
      max-height: 240px;
      transition: max-height 0.3s; }
  .logorow .logopos:hover {
    box-shadow: 0 0 40px var(--td-grauStd); }

.sticky-top-50 {
  position: relative;
  top: 0;
  z-index: 1020; }

.content-teaser-wrap {
  margin-bottom: 60px; }
  .content-teaser-wrap .content-teaser-box {
    background-size: cover; }

.teaserwrap {
  margin-top: 60px; }
  .teaserwrap img {
    max-width: 100%; }

.teaserwrap h3 {
  font-size: 24px;
  color: white;
  text-transform: uppercase;
  min-height: 60px;
  padding-top: 20px;
  background-color: var(--td-firmenfarbe); }

.belowcontentwrap {
  margin-bottom: 60px; }

.beforefooterwrap {
  margin-top: 60px;
  margin-bottom: -60px;
  z-index: 2; }

.card {
  border: none;
  padding-left: 10px;
  padding-right: 10px; }
  .card:first-child {
    padding-left: 0; }
  .card:last-child {
    padding-right: 0; }
  .card .card-body {
    padding: 0; }
    .card .card-body .body-text {
      padding-left: 1rem;
      padding-right: 1rem; }

.zusatztext {
  min-height: 45px; }

.fussnote {
  background-color: var(--td-hellgrau);
  padding: 15px 10px; }

footer .footerimage {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%; }
footer .footerbar {
  background-color: var(--td-firmenfarbe);
  min-height: 60px;
  padding-top: 80px;
  padding-bottom: 15px; }
  footer .footerbar .row {
    padding-top: 15px;
    padding-bottom: 15px; }
  footer .footerbar div[class^=col-] {
    margin-top: auto;
    height: fit-content;
    width: fit-content; }
footer p,
footer a,
footer div {
  font-size: var(--td-footerSize);
  color: white;
  text-decoration: none;
  margin: 0; }
footer a:hover {
  color: var(--td-signalfarbe); }

.tdblog-items .page-header {
  position: relative;
  background-color: rgba(255, 255, 255, 0.3);
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 30px;
  margin-top: -118px; }
  .tdblog-items .page-header h1,
  .tdblog-items .page-header h2,
  .tdblog-items .page-header h3,
  .tdblog-items .page-header p,
  .tdblog-items .page-header a {
    color: white;
    margin: 0;
    line-height: normal;
    text-align: center; }
  .tdblog-items .page-header h2 {
    min-height: 88px;
    padding-left: 30px;
    padding-right: 30px; }
    .tdblog-items .page-header h2 a {
      font-size: calc(var(--td-h2-size)*.75); }
.tdblog-items .item-image {
  margin: 0; }
  .tdblog-items .item-image img {
    max-width: 100%; }

#backToTop {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: var(--td-firmenfarbe);
  color: var(--td-hellgrau);
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 32px;
  box-shadow: 4px 4px 8px var(--td-grauStd);
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  line-height: normal; }
  #backToTop:active, #backToTop:focus {
    background-color: var(--td-firmenfarbe); }
  #backToTop:hover {
    background-color: var(--td-signalfarbe); }
  #backToTop .svg-inline--td-fa {
    margin-right: 0; }

.trapez-schwarz {
  margin-bottom: 4px; }

/*
** Breadcrumbs
*/
.breadcrumb a,
.breadcrumb span {
  font-size: var(--td-bc-size);
  color: var(--td-fontColor);
  padding-right: 0;
  padding-left: 0; }
.breadcrumb .active span {
  color: var(--td-aLinkColor); }

.breadcrumb-item + .breadcrumb-item::before {
  padding-right: 5px; }

/*
** TDTeaser
*/
.td1list,
.td2list {
  margin-top: 60px; }

.outerteaser-wrap .td1item-title {
  font-size: var(--td-h3-size);
  text-transform: uppercase;
  color: white;
  background-color: var(--td-firmenfarbe);
  padding: 8px 5px 5px; }
.outerteaser-wrap .td1-image img {
  max-width: 100%; }

.innerteaser-wrap .content-teaser-box {
  filter: saturate(40%) contrast(40%) brightness(1.3);
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: filter 0.8s; }
.innerteaser-wrap .content-teaser-box:hover {
  filter: none; }
.innerteaser-wrap h1,
.innerteaser-wrap h2,
.innerteaser-wrap h3,
.innerteaser-wrap h4,
.innerteaser-wrap h5,
.innerteaser-wrap h6,
.innerteaser-wrap p {
  color: black;
  text-shadow: 0 0 10px white; }
.innerteaser-wrap a {
  position: relative;
  bottom: 6px;
  color: var(--td-aLinkColor); }
.innerteaser-wrap a:hover {
  color: var(--td-aLinkHover); }
.innerteaser-wrap h2 {
  font-weight: 400; }
.innerteaser-wrap h3 {
  font-weight: 600; }
.innerteaser-wrap .teaser-pic {
  margin-bottom: 0; }
  .innerteaser-wrap .teaser-pic img {
    max-width: 100%;
    height: auto;
    filter: grayscale(1) opacity(30%);
    transition: filter 0.5s; }
.innerteaser-wrap .teaser-pic img:hover {
  filter: none; }

.column-wrap {
  height: 200px; }

.bottom-btn img {
  height: 45px;
  width: auto; }

.bottom-button-text p,
.bottom-button-text a {
  font-size: 18px; }

/*
** Standard-Blog
*/
.blog-items .blog-item {
  border-bottom: 1px solid var(--td-grauStd);
  padding-bottom: 10px;
  margin-bottom: 10px; }
  .blog-items .blog-item .row {
    margin-top: 40px; }
  .blog-items .blog-item .page-header h2 a {
    font-size: var(--td-h2-size);
    color: var(--td-firmenfarbe);
    font-weight: var(--td-fontBold); }

.tdblog-items .tdblog-item img {
  filter: saturate(40%) contrast(40%) brightness(1.3);
  transition: filter 0.8s; }
.tdblog-items .tdblog-item img:hover {
  filter: none; }

.monsterchen {
  width: fit-content; }

.bigbuttons {
  background-color: var(--td-firmenfarbe);
  padding-top: 30px;
  padding-bottom: 30px; }

.fb-farbe {
  color: var(--farbe-facebook); }

.insta-farbe {
  color: var(--farbe-instagram); }

/*
** Bootstrap Anpassungen
*/
.form-control,
.btn {
  font-size: var(--td-p-size); }

.form-check-input {
  width: var(--td-p-size);
  height: var(--td-p-size); }

/*
** Akkordion
*/
#faqAkkordeon {
  margin-bottom: 5px; }
  #faqAkkordeon .accordion-header .accordion-button {
    font-size: 22px;
    font-weight: 400;
    color: var(--td-firmenfarbe);
    background-color: white; }
  #faqAkkordeon .accordion-item:first-of-type, #faqAkkordeon .accordion-item:last-of-type {
    border-radius: 0; }
  #faqAkkordeon .accordion-button {
    box-shadow: none;
    border-radius: 0; }
    #faqAkkordeon .accordion-button:focus {
      box-shadow: none; }
  #faqAkkordeon .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23870f3b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    color: #870f3b; }

@font-face {
  font-family: 'Londrina Solid';
  font-style: normal;
  font-weight: 400;
  src: url(../webfonts/londrina.woff2) format("woff2"); }
/*
** Media-Queries
*/
@media (min-width: 768px) {
  h1 {
    font-size: var(--td-h1-size); }

  h2 {
    font-size: var(--td-h2-size); }

  h3 {
    font-size: var(--td-h3-size); }

  h4,
  h5,
  h6 {
    font-size: var(--td-p-size); }

  p,
  a {
    font-size: var(--td-p-size); } }
@media (min-width: 992px) {
  .mainrow > div[class^="col"] {
    padding-left: calc(var(--bs-gutter-x) * 1.5);
    padding-right: calc(var(--bs-gutter-x) * 1.5); }
    .mainrow > div[class^="col"]:first-child {
      padding-right: calc(var(--bs-gutter-x) * 1.5); }
    .mainrow > div[class^="col"]:last-child {
      padding-left: calc(var(--bs-gutter-x) * 1.5); } }
@media (min-width: 1200px) {
  .tdblog-items .page-header h2 a {
    font-size: var(--td-h2-size); } }
@media (min-width: 1400px) {
  .sticky-top-50 {
    position: sticky;
    top: 58px; }

  .maincontent {
    margin-top: -170px; }

  .mod-menu {
    line-height: normal; }

  .logorow .logopos {
    margin-left: 0; }

  .offcanvas ul {
    flex-direction: row;
    padding-left: 0;
    padding-right: 0; }

  .d-3xl-none {
    display: none !important; }

  .d-3xl-block {
    display: block !important; }

  .navbar ul li ul {
    margin-top: 18px; }

  .menu1bg ul li {
    padding-right: 25px; }

  .menu2bg ul li {
    padding-right: 20px; }

  .nav ul {
    background: none; }
  .nav li {
    border: none; }
  .nav .deeper > ul {
    background-color: var(--td-whiteTransp-90); }

  .platzhalter {
    height: 250px; } }
@media (min-width: 1920px) {
  img {
    max-width: 1920px;
    height: auto; }

  .footerimage {
    max-width: 1920px;
    height: auto; } }