@import "/templates/shaper_helixultimate/css/font.min.css";

:root {
--dav-p1:#fdc300;
--dav-p2:#ef7d00;
--dav-p3:#e63312;
--dav-p4:#964091;
--dav-p5:#307bbf;
--dav-p6:#00a7e7;
--dav-p7:#31b7bc;
--dav-p8:#009953;
--dav-p9:#52ae32;
--dav-p10:#a2c617;
--dav-w1:#aba69e;
--dav-w2:#4a4740;
--dav-k1:#9ca5a3;
--dav-k2:#364450;
font-family:'Archivo','Montserrat',sans-serif;
font-display="swap";
--bs-font-sans-serif:Archivo,Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--bs-body-font-family:var(--bs-font-sans-serif)
}

div.row main#sp-component.col-lg-8 div.sp-column.card.shadow.round.kh-bg div.article-details div p span.badge.kh-p5 {
  position: absolute;
  top: -15px;
  left: 5px;
  cursor: default;
}

/* locate badge above heading */
span.badge.kh-p5, span.badge.kh-p4, span.badge.kh-p3
{
  position: absolute;
  top: -5px;
  left: 5px;
  cursor: default;
}

/* Footer immer unten, override sp-main-body */
#sp-main-body {
min-height:calc(100vh - 60px - 64px - 72px - 103px);
background-image: url("/images/logos/KH-CI/random_bg.php");
background-repeat: no-repeat;
background-size: contain;
background-attachment: inherit;
background-position: 50% 50%;
}

.sp-page-title {
padding:150px 0;
background-repeat:no-repeat!important;
background-position:center center;
background-size:cover!important
}

.sp-page-title .sp-page-title-heading {
font-size:3rem;
line-height:1;
background:#9ca5a3;
background:hsla(167,5%,65%,0.3);
color:var(--dav-p1)
}

/* Nicht nur Pfeil, sondern ganzen Text klickbar machen */
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,.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent li.menu-parent .menu-toggler,body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.nav-header>.menu-toggler {
width:100%;
text-align:right;
right:0
}


/* Weiterlesen Link als Button stylen */
.article-list .article .readmore a{
display: inline-block;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: 1px solid transparent;
margin: 10px 0 0;
padding: 4px 12px;
/* text-transform: lowercase; */
color: #fff;
background: var(--dav-p6);
border-radius: .25rem;
padding: .375rem .75rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* unscheinbaren Rand um Artikel entfernen */
.article-list .article{
border:none;
}

/* Text ohne Headerbild einrücken */
.article-header,.article-details > div[itemprop],.article-info{
padding-left: 0.85rem;
padding-right: 0.85rem;
}

.hyphens {
-webkit-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto
}

table.halle  > :not(caption) > * > * {
padding: .5rem .5rem;
border-bottom-width: 1px;
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.r-center {
font-size:large;
position:relative;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%)
}

.size-256 {
min-height:128px;
min-width:256px
}

.height-64 {
height:64px
}

.kh-text {
font-size:large;
font-weight:700;
color:#fff;
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
margin-left:3rem;
margin-top:3rem
}

.kh-bg {
background-color: rgba(255,255,255,0.95);
}

.kh-p1 {
background-color:var(--dav-p1)
}

.kh-p2 {
background-color:var(--dav-p2)
}

.kh-p3 {
background-color:var(--dav-p3)
}

.kh-p4 {
background-color:var(--dav-p4)
}

.kh-p5 {
background-color:var(--dav-p5)
}

.kh-p6 {
background-color:var(--dav-p6)
}

.kh-p7 {
background-color:var(--dav-p7)
}

.kh-p8 {
background-color:var(--dav-p8)
}

.kh-p9 {
background-color:var(--dav-p9)
}

.kh-p10 {
background-color:var(--dav-p10)
}

.kh-w1 {
background-color:var(--dav-w1)
}

.kh-w2 {
background-color:var(--dav-w2)
}

.kh-k1 {
background-color:var(--dav-k1)
}

.kh-k2 {
background-color:var(--dav-k2)
}

.kh-0 {
-webkit-mask:url(/images/logos/KH-CI/KH-0.svg) no-repeat;
mask:url(/images/logos/KH-CI/KH-0.svg) no-repeat;
-webkit-mask-size:contain;
mask-size:contain
}

.kh-80 {
-webkit-mask:url(/images/logos/KH-CI/KH-80.svg) no-repeat;
mask:url(/images/logos/KH-CI/KH-80.svg) no-repeat;
-webkit-mask-size:contain;
mask-size:contain
}

.kh-90 {
-webkit-mask:url(/images/logos/KH-CI/KH-90.svg) no-repeat;
mask:url(/images/logos/KH-CI/KH-90.svg) no-repeat;
-webkit-mask-size:contain;
mask-size:contain
}

.kh-170 {
-webkit-mask:url(/images/logos/KH-CI/KH-170.svg) no-repeat;
mask:url(/images/logos/KH-CI/KH-170.svg) no-repeat;
-webkit-mask-size:contain;
mask-size:contain
}

.kh-180 {
-webkit-mask:url(/images/logos/KH-CI/KH-180.svg) no-repeat;
mask:url(/images/logos/KH-CI/KH-180.svg) no-repeat;
-webkit-mask-size:contain;
mask-size:contain
}

.kh-260 {
-webkit-mask:url(/images/logos/KH-CI/KH-260.svg) no-repeat;
mask:url(/images/logos/KH-CI/KH-260.svg) no-repeat;
-webkit-mask-size:contain;
mask-size:contain
}

/* https://www.joomshaper.com/documentation/helix-framework/troubleshooting-faq */
/* fix right aligned offcanvas */
.burger-icon {
  width: 25px;
  cursor: pointer;
  margin-right: 5px;
  /* margin-top: 22px; */
}

#sp-menu.menu-with-social .sp-megamenu-wrapper {
    flex: auto;
    justify-content: space-between;
    display: flex !important;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
}

@media screen and (max-width: 992px) {
    #sp-header.full-header-left .menu-with-offcanvas #offcanvas-toggler,
    #sp-header.full-header-center .menu-with-offcanvas #offcanvas-toggler,
    #sp-header.header-with-modal-menu .menu-with-offcanvas #offcanvas-toggler,
    #sp-header.lg-header .menu-with-offcanvas #offcanvas-toggler,
    #sp-header.header-with-social .menu-with-offcanvas #offcanvas-toggler 
  {display: block !important;}
}