html{
    height: 100%;
}
body {
    position: relative;
    margin: 0;
    min-height: 100%;
    background-color: var(--bg_secondary_25);
    color: var(--text_body);
    font-family: 'M Plus 2', sans-serif;
    font-weight: 400;
    font-size: var(--text_size_body);
    line-height: 1.5em;
}
* {
    box-sizing: border-box;
}


/* ********* Layout ********* */
.content {
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--padding) var(--padding_large) var(--padding_large);
    background-color: var(--bg_primary);
    /* Flex-Spalte: main fuellt den Rest der Viewport-Hoehe, statt per min-height-Rechnung
       (frueher calc(100vh - 12.5rem)) Header/Breadcrumb/Paddings nachzurechnen. Die Rechnung
       stimmte nie exakt und erzeugte auf kurzen Seiten 16-75px Scrollbar. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content > .container{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.content > main,
.content > .container > main{
    flex: 1 0 auto;
}

header.content-header{
    display: block;
    padding: 0;
    margin-bottom: var(--padding);
}

.content-header h3,
.content-header h2,
.content-header h1{
    margin-bottom: var(--padding);
}

header.content-header.xsmall,
.content-header.xsmall .heading1,
.content-header.xsmall .heading1.xl,
.content-header.xsmall .heading3,
.content-header.xsmall h3,
.content-header.xsmall h3.xl,
.content-header.xsmall h2,
.content-header.xsmall h2.xl,
.content-header.xsmall h1.xl,
.content-header.xsmall h1{
    margin-bottom: var(--padding_xsmall);
}
header.content-header.small,
.content-header.small .heading1,
.content-header.small .heading1.xl,
.content-header.small .heading3,
.content-header.small h3,
.content-header.small h3.xl,
.content-header.small h2,
.content-header.small h2.xl,
.content-header.small h1.xl,
.content-header.small h1{
    margin-bottom: var(--padding_small);
}

section:not(:last-child){
    margin-bottom: var(--padding_xlarge);
}

.section-header.row {
    justify-content: space-between;
    align-items: center;
}
section .title,
section .description{
    margin-left: var(--padding);
    margin-right: var(--padding);
}

.row{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    column-gap: var(--padding);
    row-gap: var(--padding_small);
    margin-bottom: var(--padding);
}
.row:has(.form-group){
    row-gap: 0;
}
.row.hidden,
.row.noMarginB,
.row .card{
    margin-bottom: 0;
}
.row.right,
section.row{
    justify-content: flex-end;
    margin-bottom: 2rem;
}
.row.center{
    justify-content: center;
}
.col-1,
.col-2,
.col-3,
.col-4 {
    min-height: 2.5rem;
}

.col-4 {
    width: 25%;
    display: inline-block;
}
.row .col-4{
    width: calc(25% - 0.75rem);
}
.col-3of4{
    width: 75%;
    display: inline-block;
}
.row .col-3of4{
    width: calc(75% - 0.75rem);
}
.col-3{
    width: 33.33%;
    display: inline-block;
}
.row .col-3{
    width: calc(33% - 0.5rem);
}
.col-2of3{
    width: 66.66%;
    display: inline-block;
}
.row .col-2of3{
    width: calc(66.66% - 0.5rem);
}
.col-1{
    width: 100%;
}
.col-2{
    width: 50%;
    display: inline-block;
}
.row .col-2{
    width: calc(50% - 0.5rem);
}

.grow{
    flex: 1;
}
.grid{
    display: grid;
    column-gap: var(--padding);
    row-gap: var(--padding_xsmall);
    margin-bottom: var(--padding); 
}

@media only screen and (min-width: 1441px){
    .content{
        padding-bottom: var(--padding_xlarge);
        padding-left: var(--padding_xlarge);
        padding-right: var(--padding_xlarge);
        border: solid 1px var(--border_color_shadow);
        border-top-width: 0;
        border-bottom-width: 0;
    }
}
@media only screen and (max-width: 1024px){ 
    .content {
        padding: 1.25rem var(--padding);
    }
    .row{
       row-gap: 0.75rem;
    }
    .col-3,
    .col-4 {
        width: 50%;
    }
    .row .col-3,
    .row .col-4{
        width: calc(50% - 0.75rem);
    }
}
@media only screen and (max-width: 768px){ 
    section:not(:last-child){
        margin-bottom: var(--padding_large);
    }
    .row .col-3,
    .row .col-4,
    .row .col-2,
    .col-4, .col-3, .col-2 {
        width: 100%;
    }
}
@media only screen and (max-width: 544px){
    section.row{
        justify-content: center;
        flex-direction: column;
    }
    section .title,
    section .description{
        margin-left: 0;
        margin-right: 0;
    }
}



/* ********* Links ********* */
a{
    color: var(--text_body);
}
a:hover, a:focus, a:active,
a.button:hover, a.button:focus, a.button:active{
    text-decoration: none;
    transition: all 0.3s;
    color: var(--bg_icon_primary);
}
a.primary{
    background-color: var(--bg_icon_primary);
    color: var(--color_white) !important;
}
a.primary:hover{
    background-color: var(--bg_icon_primary_hover);
}
a.secondary{
    background-color: var(--bg_icon_secondary);
}
a.secondary:hover{
    background-color: var(--bg_icon_secondary_hover);
    color:  var(--color_white) !important;
}


/* ********* Header ********* */
header{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--padding);
    margin-bottom: 3rem;
    position: relative;
    padding-right: var(--padding);
}
header.mobile{
    max-width: 15rem;
    margin: 0 auto;
    line-height: 1.3em;
    padding: 0;
}

header.mobile a {
  margin-bottom: var(--padding);
}

header aside{
    min-height: 5.5rem;
}
header img:not(.icon){
    width: 4rem;
    display: block;
    margin: 0 1rem
}
header .wordmark{
    position: absolute;
    top: 3rem;
    left: 4rem;
    max-width: 6rem;
    text-align: left;
    display: grid; 
    color: var(--text_subtitle);
}
header .wordmark small{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
header title{
    display: block;
    color: var(--color_twuxtech);
    font-family: 'Mulish', sans-serif;
    font-size: var(--text_size_title);
    line-height: 1.3em;
    font-weight: 900;
    background: var(--color_twuxtech_gradient);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
header .mainMenu .button.more,
header .mainMenu a.button{
    padding-top: 7px;
    padding-bottom: 8px;
    transition: all 0.3s;
    line-height: 1rem;
    height: 2rem;
}
header .mainMenu .button.more:hover,
header.mobile a.button:hover,
header .mainMenu a.button:hover{
    background-color: var(--bg_icon_primary);
}
header .mainMenu .button i{
    color: var(--color_white);
    font-size: .72rem;
    transition: transform .15s;
}
li.more:has(nav:not(.hidden)) .button.more i {
  transform: rotate(180deg);
}
header.mobile .button.more,
header .mainMenu .button.more{
    border-top-right-radius: var(--border_radius_small);
    border-bottom-right-radius: var(--border_radius_small);
    border-left: 1px solid rgba(255, 255, 255, .28);
    height: var(--padding_large);
    padding-left: 9px;
    padding-right: 9px;
}
header .mainMenu i {
    font-size: 1.5rem;
    line-height: 1.5em;
    max-width: 1.5rem;
    transition: all 0.3s;
}
header .mainMenu i,
header .mainMenu img.icon{
    vertical-align: center;
}
header .mainMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0; /* no whitespaces between li-tags */
}
header .mainMenu li{
    display: inline-block;
    vertical-align: middle;
    padding: 0 var(--padding) 0 0;
    margin-left: var(--padding);
    font-size: var(--text_size_body);
}
header .mainMenu li.more,
header .mainMenu li:first-child{
    margin-left: 0;
}
header .mainMenu li:has(+ li.more),
header .mainMenu li:last-child{
    padding-right: 0;
}
header.mobile a.button:has(+ .more),
header .mainMenu li:has(+ li.more) a.button{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
header .mainMenu li.border {
    border-left: solid 2px var(--border_color_light);
    height: var(--padding_large);
}
main{
    padding: 0 var(--padding);
    min-height: 0;
    z-index: 1;
    position: relative;
}
main[content-data="install"] {
    max-width: 56.25rem;
    margin: 0 auto;
}
header #searchbox input:not([id^="tomselect"])[type="search"]{
    background-position: 9px 9px; 
    padding: var(--padding_small) 0.75rem var(--padding_small) var(--padding_large);
    height: 2rem;
}
@media only screen and (max-width: 1024px){
    header {
        padding-right: 0;
    }
    header .mainMenu li{
        padding-right: var(--padding_small);
        margin-left: var(--padding_small);
    }
    header .mainMenu li.border {
        padding-left: 0;
    }
}
@media only screen and (max-width: 768px){
    main{
        padding-left: var(--padding_small);
        padding-right: var(--padding_small);
    }
    header{
        margin-bottom: var(--padding);
        flex-wrap: wrap;
        row-gap: 1.5rem;
    }
    header .mainMenu {
        order: 1;
    }
    header .mainMenu li.desktop + li.border {
        margin-left: 0;
        border-width: 0;
    }
    header .search{
        order: 2;
        flex-basis: 100%;
        max-width: inherit;
    }
    header #searchbox{
        max-width: 32rem;
        margin: auto;
    }
    header.mobile a.button{
        background-color: var(--bg_icon_primary_hover);
        transition: all 0.3s;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        width: 100%;
    }

    header .wordmark small{
        -webkit-line-clamp: 1;
    }
}
@media only screen and (max-width: 544px) {
    main{
        padding-left: 0;
        padding-right: 0;
    }
    header{
        column-gap: var(--padding_small);
        padding-right: 0;
    }
    header img:not(.icon) {
        margin-left: 0;
    }
    header .wordmark {
        left: 3.25rem;
    }

    header nav li span {
        display: none;
    }
}


/* ********* Special Classes ********* */
.center{
    text-align: center;
}
.hidden{
    display: none !important;
    opacity: 0;
}
.mobile {
    display: none !important;
}
.noMarginB{
    margin-bottom: 0 !important;
}
.loader {
  width: 3.75rem;
  aspect-ratio: 6;
  background: radial-gradient(circle closest-side,var(--text_body) 90%,#0000) 0/calc(100%/4) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: l1 1s steps(5) infinite;
}
@keyframes l1 {to{clip-path: inset(0 -34% 0 0)}}

@media only screen and (max-width: 768px){
    .desktop {
        display: none !important;
    }
    .mobile {
        display: block !important;
    }
}

.borderGradient:after {
    content:"";
    background: var(--border_gradient_gray);
    display: block;
    height:1px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.paddingB{
    padding-bottom: var(--padding);
}
.paddingB2{
    padding-bottom: var(--padding_large);
}

/* ********* search results ********* */
.search{
    position: relative;
    flex: 1;
    max-width: 32rem;
}
dialog#results{
    display: flex;
    width: 768px;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background-color: var(--bg_primary);
    gap: 1.375rem;
    padding: var(--padding) var(--padding) var(--padding) var(--padding_small);
}
dialog#results .title{
    color: var(--text_subtitle);
    font-size: var(--text_size_title);
    font-weight: 500;
    line-height: 1.3em;

    margin-bottom: var(--padding);
    padding: 0 var(--padding);
}
dialog#results a{
    text-decoration: none;
}
dialog#results ol,
dialog#results ul{
    padding: 0;
    margin: 0;
}
dialog#results li{
    list-style: none;
}
dialog#results i{
    margin-right: 0.625rem;
}
dialog#results .content_right{
    flex:2;
}
dialog#results button{
    border-radius: 0;
    font-size: var(--text_size_small);
    line-height: 1.3em;
    text-align: left;
}
dialog#results button:hover{
    cursor: pointer;
    color: var(--bg_icon_primary);
}
dialog#results #filters-clear button,
dialog#results #filters-section li{
    box-sizing: border-box;
    padding: var(--padding_small) var(--padding);
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(204, 204, 204,.1));
    min-width: 12.5rem;
    width: 100%;
    margin-bottom: var(--padding_small);
}
dialog#results #filters-section li:last-child{
    margin-bottom: 0;
}
dialog#results #filters-section li.inactive i,
dialog#results #filters-section li.inactive{
    color: var(--bg_icon_secondary);
}
dialog#results #filters-clear button:disabled,
dialog#results #filters-section li.selected i,
dialog#results #filters-section li.selected{
    color: var(--color_white);
    background-color: var(--bg_icon_primary);
}
dialog#results #filters-clear button:hover,
dialog#results #filters-section li:not(.inactive):hover{
    background-color: var(--bg_icon_primary_hover);
    color: var(--color_white);
    cursor: pointer;
}
dialog#results #filters-section label{
    margin-bottom: 0;
}
dialog#results #filters-section .count::before{
    content:"(";
    margin-left: 0.25rem;
}
dialog#results #filters-section .count::after{
    content:")";
}
dialog#results #filters-section button.showMore:disabled{
    display: none;
}

dialog#results #results-section .title{
    margin-bottom: 1.5rem;
}
dialog#results #results-section li{
    display: grid;
    grid-template-columns: 1rem 1fr;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    grid-template-areas: "icon result";
    font-size: var(--text_size_title);
    font-weight: 500;
    margin-bottom: var(--padding);
}
dialog#results #results-section i{
    color: var(--text_subtitle);
    font-size: 13px;
    grid-area: icon;
    margin-top: 0.125rem;
}
dialog#results #results-section span{
    grid-area: result;
}
dialog#results #results-section small{
    font-size: var(--text_size_body);
    font-weight: 400;
}
dialog#results #results-section mark{
    color: var(--bg_icon_primary_hover);
    background-color: transparent;
    margin-right: 0.25rem;
}
#results-pagination {
    margin: 0 auto;
    text-align: center;
}
#results-pagination li{
    display: inline-block;
    padding: var(--padding_small);
}
#results-pagination a{
    font-weight: 500;
    text-decoration: none;
}
#results-pagination a:hover{
    color: var(--text_link_hover);
}
#results-pagination .ais-Pagination-item--disabled{
    color: var(--text_inactive);
}
#results-pagination .ais-Pagination-item--selected a{
    color: var(--text_highlight_twux);
}


/* ********* Card ********* */
.card{
    -webkit-box-shadow: 0px 2px 15px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 2px 15px 2px rgba(0,0,0,0.05);
    box-shadow: 0px 2px 15px 2px rgba(0,0,0,0.05);
    background-color: var(--bg_secondary_15);
    border: solid 1px var(--border_color_shadow);
    border-radius: var(--border_radius);
    padding: var(--padding) var(--padding) 1.5rem;
    margin-bottom: var(--padding_large);
    box-sizing: border-box;
    position: relative;
    z-index: 20;
    transition: all 0.3s;
}
.card-header:has(p){
    line-height: 1.5em;
    margin-bottom: var(--padding);
}
.card-header.row{
    justify-content: space-between;
    align-items: center;
}
.card-header .title{
    margin-bottom: var(--padding);
    font-size: var(--text_size_title);
    font-weight: 500;
}
.card-header .description{
    margin: 0 var(--padding_small) var(--padding);
    font-size: var(--text_size_small);
}
.card:not(.message) .card-body{
    margin: 0 var(--padding_small) var(--padding_large);
}
.card:not(.message) .card-body:last-child{
    margin-bottom: 0;
}

.card-body .row:last-child{
    margin-bottom: 0;
}
.card .link{
    color: var(--text_link_hover);
    transition: color 0.3s;
}
.card:hover .link{
    color: var(--text_link);
}

/* ** verlinkte Karte ** */
a.card{
    display: block;
    text-decoration: none;
}
a.card:hover .card-body,
a.card:focus .card-body,
a.card:active .card-body{
    color: var(--text_subtitle);
}
a.card .title{
    color: var(--text_body);
}


/* ** extra breite Karte ** */
.card.wide{
    margin-left: -1rem;
    margin-right: -1rem;
}

/* ** extra breite Karte ** */
.card.noShadow{
    box-shadow: none;
}

/* ** Question Karte ** */
.card.questions{
    padding: var(--padding_large);
}
.card.questions .row{
    justify-content: center;
    margin-bottom: var(--padding_large);
}

/* ** Dashboard Karte ** */ 
.card.dashboard:not(.message) .card-header{
    margin-bottom: var(--padding_small);
}
.card.dashboard:not(.message) .card-body{
    font-size: var(--text_size_small);
}
.card.dashboard:not(.message) .card-header i{
    width: var(--icon_size_medium);
    height: var(--icon_size_medium);
    font-size: var(--icon_size_medium);
    margin-right: 0.75rem;
}
.card.dashboard:not(.message) .card-header .title{
    margin-bottom: 0;
}

/* ** Welcome Karte ** */
.card.welcome{
    display: block;
    text-align: center;
    width: 20rem;
    padding: var(--padding_large);
}
.card.welcome:hover {
    border-color: var(--bg_icon_primary, #3C5B87);
    transform: translateY(-2px);
    box-shadow: 0px 2px 15px 2px rgba(0,0,0,0.1);
}
.card.welcome.single{
    margin: auto;
}
.card.welcome i[class^='fa-'].icon{
    font-size: 2.5rem;
    line-height: 1em;
    color: var(--bg_icon_primary_invert);
}
.card.welcome .title,
.card.welcome .card-header,
.card.welcome .description{
    margin-bottom: var(--padding_small);
}
.card.welcome .description{
    margin-left: 0;
    margin-right: 0;
}
.card.welcome .card-footer{
    font-weight: 500;
}
.card.welcome .card-footer a{
    color: var(--text_link);
    text-decoration: none;
}
.card.welcome .card-footer a:focus,
.card.welcome .card-footer a:active,
.card.welcome .card-footer a:hover{
    color: var(--text_link_hover);
}


@media only screen and (max-width: 1024px){ 
    /* .card{
          margin-bottom: 1.25rem;  
    } */
    .card.wide{
        margin-left: 0;
        margin-right: 0;
    }
}
@media only screen and (max-width: 768px){
    .card:not(.message) .card-body{
        margin-bottom: var(--padding);
    }
}
@media only screen and (max-width: 544px){
    .card-header .description,
    .card:not(.message) .card-body{
        margin-left: 0;
        margin-right: 0;
    }

    .card.welcome{
        padding: 1.25rem var(--padding);
    }
    .card.welcome i[class^='fa'].icon{
        font-size: 2rem;
    }
    .card.welcome .title{
        margin-top: 12px;
        margin-bottom: 8px;
    }
    .card.welcome p{
        margin-bottom: 8px;
    }
}


/* ********* Card Menu ********* */
.cardMenu {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 0 calc(var(--padding) * -1) calc(var(--padding) * -1);
  overflow-y: hidden;
  overflow-x: auto;
  max-height: 3.75rem;
}
.cardMenu + aside.background{
  height: var(--padding_large);
  background: linear-gradient(0deg, var(--bg_primary) 0%, var(--bg_secondary_25) 100%);
  margin: calc(var(--padding) * -1);
  margin-bottom: 0;
}
.cardMenu ul{
    padding: 0;
    margin: 0;
    white-space: nowrap;
    font-size: 0;
    padding-bottom: var(--padding);
}
.cardMenu hr{
  margin: 0 0 var(--padding);
  width: 100%;
  border-style: solid;
  border-color: var(--border_color_light);
  border-width: 0 0 1px 0;
}
.cardMenu li{
  font-size: var(--text_size_body);
  list-style: none;
  display: inline-block;
  padding: var(--padding_small) var(--padding) var(--padding_medium);
  color: var(--text_subtitle);
  border-style: solid;
  border-color: var(--border_color_light);
  border-radius: var(--border_radius_small) var(--border_radius_small) 0 0;
  border-width: 0 0 1px 0;
}
.cardMenu li:has(a.active){
  font-weight: 500;
  color: var(--text_info);
  border-width: 1px;
  border-bottom-color: light-dark(#FCFCFD, #555555);
  background-color: var(--bg_secondary_25);
  margin-bottom: -1px;
}
.cardMenu li a{
  text-decoration: none;
  color: var(--text_subtitle);
}
.cardMenu li a.active{
  color: var(--text_link_hover);
}
.cardMenu li i{
  margin-right: var(--padding_small);
}
@media only screen and (max-width: 768px){
    .cardMenu{
        margin-left: 0;
        margin-right: 0;
        margin-bottom: var(--padding);
        max-height: initial;
        overflow: initial;
    }
}


/* ********* Breadcrumb ********* */
.breadcrumb {
    margin-bottom: 2.5rem;
    padding: 0 var(--padding);
    font-size: var(--text_size_breadcrumb);
    line-height: 1rem;
    font-weight: 400;
}
.breadcrumb .home{
    background-image: url(../images/svg/home_gray.svg);
    display: block;
    width: 1rem;
    height: 1.2em;
}
.breadcrumb ol {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.breadcrumb ol li {
    display: inline-block;
    margin-right: 0.25rem;
    padding-right: 1rem;
    position: relative;
    vertical-align: middle;
    max-width: 18.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.breadcrumb ol li:last-child{
    color: var(--text_body);
    font-weight: 500;
}
.breadcrumb ol li:not(:last-child)::after {
    color: var(--text_subtitle);
    content: "\f105";
    font-family: "Font Awesome 7 Pro";
    font-size: 0.6rem;
    font-weight: 500;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.breadcrumb ol li a{
    color: var(--text_subtitle);
    text-decoration: none;
    transition: all 0.3s;
    line-height: 1.3em;
}
.breadcrumb ol li:hover a{
    text-decoration: underline;
    color: var(--text_body);
}
.breadcrumb + .row.mobile.button{
    width: 100%;
}

/* Dark Mode*/
html:has(meta[content="dark"]){
    .breadcrumb .home{
        background-image: url(../images/svg/home_white.svg);
    }
    .breadcrumb ol li:not(:last-child)::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='white'/%3E%3C/svg%3E");
    }
    .breadcrumb ol li a{
        color: var(--color_white);
    }
}
@media (prefers-color-scheme: dark) {
    .breadcrumb .home{
        background-image: url(../images/svg/home_white.svg);
    }
    .breadcrumb ol li:not(:last-child)::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='white'/%3E%3C/svg%3E");
    }
    .breadcrumb ol li a{
        color: var(--color_white);
    }
}
@media only screen and (max-width: 768px){
    .breadcrumb {
        margin-bottom: 1.5rem;
        padding-left: var(--padding_small);
        padding-right: var(--padding_small);
        line-height: 1.5em;
    }
}


/* ********* Heading ********* */
h1, h2, h3,
.heading1 {
    margin-top: 0;
    font-weight: 500;
}

h1, h2, h3.xl,
.heading1 {
    font-size: var(--text_size_title);
    line-height: 1.3em;
}
h1.xl, h2.xl,
.heading1.xl{
    font-size: 1.25rem;
    line-height: 1.5em;
    padding: 0;
    margin-bottom: 1.25rem;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    color: var(--text_highlight_twux);
    background: var(--color_twuxtech_gradient);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h3, h4,
.heading3 {
    font-size: var(--text_size_body);
    line-height: 1.3em;
    margin-bottom: var(--padding_small);
}
@media only screen and (max-width: 544px){
    h1.xl, h2.xl,
    .heading1.xl {
        margin-bottom: 0.75rem;
    }
}

.subtitle{
    color: var(--text_subtitle);
}
.subtitle p{
  margin-top: 0;
}
.subtitle ul{
  margin-top: 0;
  padding-left: var(--padding);
}

blockquote{
    border-left: var(--padding_xsmall) solid var(--border_color_light);
    margin-bottom: var(--padding_xsmall);
    margin-top: var(--padding_xsmall);
    padding-left: var(--padding);
}

/* ********* Elements ********* */
.pointer{
    cursor: pointer;
}
.pointer i.sort.desc::before{
    content: "\f0d7";
}
.pointer i.sort.asc::before{
    content: "\f0d8";
}

.observer:not(:last-child)::after{
    content: ", ";
}
pre{
    background-color: var(--color_gray_deep_dark);
    color: var(--color_white);
    line-height: 1.2em;
    padding: 1rem;
    margin: 0;
    width: 100%;
}

.ais-InfiniteHits-loadMore,
#loadMore{
    text-align: center;
}
.ais-InfiniteHits-loadMore:hover,
#loadMore:hover{
    cursor: pointer;
    text-decoration: underline;
}


/* ********* alert und card colors ********* */
myodo-alert{
    border: solid 1px var(--border_color_shadow);
    border-radius: var(--border_radius);
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--bg_secondary_15);
    color: var(--text_body);
    display: block;
}
myodo-alert header {
    margin-bottom: var(--padding_medium);
    font-size: var(--text_size_title);
    font-weight: 500;
    padding-right: 0;
}
myodo-alert header + div,
myodo-alert header + p {
    margin-top: 0;
    color: var(--text_body);
}
myodo-alert.bg-primary20 header + div,
myodo-alert.bg-primary20 header + p {
    color: var(--color_gray_deep_dark);
}
myodo-alert i{
    line-height: 1.5em;
}


/* ** gray ** */
.card.bg-gray40,
myodo-alert.bg-gray40 {
    border-color: var(--border_color_light);
}


/* ** red ** */
.card.bg-red20,
myodo-alert.error,
myodo-alert.bg-red20{
    border-color: var(--text_red);
}
myodo-alert.error i::before,
myodo-alert.bg-red20 i::before{
    content: "\!";
}


/* ** green ** */
.card.bg-green20,
myodo-alert.success,
myodo-alert.bg-green20 {
    border-color: var(--text_green);
}

myodo-alert.success i::before,
myodo-alert.bg-green20 i::before {
    content: "\f00c";
}


/* ** orange ** */
.card.bg-orange20,
myodo-alert.bg-orange20{
    border-color: var(--text_orange);
}
.card.bg-orange20 i::before,
myodo-alert.bg-orange20 i::before{
    content: "\f129";
}


/* ** primary ** */
.card.bg-primary20,
myodo-alert.bg-primary20{
    border-color: var(--text_info);
}
.card.bg-primary20 i::before,
myodo-alert.bg-primary20 i::before{
    content: "\f129";
}


/* *** Badges *** */
myodo-badge{
    border: solid 1px var(--border_color_light);
    border-radius: var(--border_radius);
    padding: var(--padding_small) var(--padding);
    max-width: max-content;
    display: inline-block;
    text-align: center;
    line-height: 1.5em;
    font-size: var(--text_size_body);
    font-weight: 500;
    letter-spacing: 0.25px;
}
myodo-badge i{
    margin-right: var(--padding_xsmall);
}
.badge-list{
    display: inline-flex;
    flex-wrap: wrap; 
    align-items: center; 
    gap: var(--padding_small);
}
myodo-badge.small{
    border-radius: var(--border_radius_small);
    padding: var(--padding_small);
    line-height: 1em;
    font-size: var(--text_size_small);
}
myodo-badge.tiny{
    border-radius: var(--border_radius_small);
    padding: var(--padding_xsmall);
    line-height: 1em;
    font-size: var(--text_size_small);
}

myodo-badge.bg-gray,
.bg-gray {
    background-color: var(--bg_icon_secondary);
}
myodo-badge.bg-gray40 {
    border-color: var(--border_color_light);
}
myodo-badge.bg-gray40,
.bg-gray40 {
    background-color: var(--bg_icon_passive);
    color: var(--text_inactive);
}

myodo-badge.bg-red {
    border-color: var(--bg_red);
    color: var(--color_white);
}
myodo-badge.bg-red20,
myodo-badge.bg-red40{
    border-color: var(--text_red);
}

myodo-badge.bg-green20,
myodo-badge.bg-green40{
    border-color: var(--text_green);
}
myodo-badge.bg-green {
    border-color: var(--bg_green);
}

myodo-badge.bg-orange20{
    border-color: var(--text_orange);
}
myodo-badge.bg-orange40,
myodo-badge.bg-orange {
    border-color: var(--bg_orange);
}

myodo-badge.bg-primary20{
    border-color: var(--text_link);
}
myodo-badge.bg-primary40,
myodo-badge.bg-primary{
    border-color: var(--bg_icon_primary);
}




/* *** myodo tags *** */
myodo-tag{
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--text_size_small);
    font-weight: 500;
    font-style: italic;
    white-space: nowrap;
    color: var(--text_subtitle);
    display: inline;
}
myodo-tag::before{
    content: '#';
}
myodo-tag.red{
    color: var(--text_red);
}
myodo-tag.green{
    color: var(--text_green);
}
myodo-tag.orange{
    color: var(--text_orange);
}
myodo-tag.primary{
    color: var(--bg_icon_primary);
}


/* *** background colors *** */
/* ** dark gray ** */
.bg-darkGray {
    background-color: var(--bg_darkGray);
    color: var(--color_white);
}
.bg-darkGray20 {
    background-color: var(--bg_darkGray20);
    color: var(--text_subtitle);
}
.bg-darkGray40 {
    background-color: var(--bg_darkGray40);
    color: var(--color_white);
}

/* ** gray ** */
.bg-gray{
    background-color: var(--bg_icon_secondary);
    color: var(--text_body);
}
.bg-gray20{
    background-color: var(--bg_secondary_50);
    color: var(--text_subtitle);
}
.bg-gray40{
    background-color: var(--bg_secondary);
    color: var(--text_subtitle);
}


/* ** primary ** */
.bg-primary {
    background-color: var(--bg_highlight);
    color: var(--color_white);
}
.bg-primary20{
    background-color: var(--bg_blue_light);
    color: var(--text_info);
}
.bg-primary40{
    background-color: var(--bg_icon_primary_invert);
    color: var(--color_white);
}


/* ** red ** */
.bg-red{
    background-color: var(--bg_red);
    color: var(--color_white);
}
.error,
.bg-red20{
    background-color: var(--bg_red_20);
    color: var(--text_red);
}
.bg-red40{
    background-color: var(--bg_red_40);
    color: var(--text_red);
}
.bg-red20 i,
.bg-red40 i{
    color: var(--text_red);
    font-family: 'Font Awesome 7 Pro';
}
.bg-red i{
    color: var(--color_white);
    font-family: 'Font Awesome 7 Pro';
}


/* ** green ** */
.bg-green{
    background-color: var(--bg_green);
    color: var(--color_white);
}
.success,
.bg-green20{
    background-color: var(--bg_green_20);
    color: var(--text_green);
}
.bg-green40{
    background-color: var(--bg_green_40);
    color: var(--text_green);
}
.bg-green i{
    color: var(--color_white);
    font-family: 'Font Awesome 7 Pro';
}
.bg-green20 i,
.bg-green40 i{
    color: var(--text_green);
}


/* ** orange ** */
.bg-orange{
    background-color: var(--bg_orange);
    color: var(--color_white);
}
.bg-orange20{
    background-color: var(--bg_orange_20);
    color: var(--text_orange);
}
.bg-orange40{
    background-color: var(--bg_orange_40);
    color: var(--text_highlight_twux);
}
.bg-orange i{
    color: var(--color_white);
    font-family: 'Font Awesome 7 Pro';    
}
.bg-orange20 i,
.bg-orange40 i{
    color: var(--text_orange);
    font-family: 'Font Awesome 7 Pro';
}