*{box-sizing: border-box;}
html, body{
    margin:0;
    padding:0;

    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--small-font-size);
    line-height: 1.4;
}
.hidden{display:none}
.visual-hidden{opacity: 0;pointer-events: none;position: absolute;}

/* init variables */
:root{

    --extra-large-gap: min(0.123vw * 42 * 2, 42px);
    --large-gap: min(0.123vw * 28 * 2, 28px);
    --medium-gap: min(0.123vw * 21 * 2, 21px);
    --small-gap:  min(0.123vw * 10 * 2, 10px);
    --extra-small-gap:  min(0.123vw * 3 * 2, 3px);

    --large-padding: min(0.123vw * 42 * 2, 42px);
    --medium-padding: min(0.123vw * 28 * 2, 28px);
    --small-padding:  min(0.123vw * 21 * 2, 21px);
    --extra-small-padding:  min(0.123vw * 10 * 2, 10px);
}

/* global flex definitions */
.flex{display: flex;}
.flex-small-gap{gap: var(--small-gap);}
.flex-medium-gap{gap: var(--medium-gap);}
.flex-large-gap{gap: var(--large-gap);}
.flex-extra-large-gap{gap: var(--extra-large-gap);}
.flex-relative{display: flex; position: relative;}
.flex-wrap{display: flex; flex-wrap: wrap;}
.flex-reverse{flex-direction: row-reverse;}
.flex-grow{flex-grow: 1;}
.flex-stretch{align-items: stretch;align-content: stretch;}
.flex-no-shrink-no-stretch{flex-grow: 0;flex-shrink: 0;}
.flex-column{display: flex;flex-direction: column;}
.flex-v-center{align-items: center;}
.flex-v-top{align-items: flex-start;}
.flex-v-bottom{align-items: flex-end;}
.flex-h-center{justify-content: center;}
.flex-h-left{justify-content: flex-start;}
.flex-h-between{justify-content: space-between;}
.flex-h-right{justify-content: flex-end;}

@media(max-width: 768px){
    .flex-mobile-column{flex-direction: column;}
    .flex-mobile-small-gap{gap: var(--small-gap);}
    .flex-mobile-medium-gap{gap: var(--medium-gap);}
    .flex-mobile-large-gap{gap: var(--large-gap);}
    .flex-mobile-extra-large-gap{gap: var(--extra-large-gap);}


    .flex-mobile-column.flex-v-center{justify-content: center;}
    .flex-mobile-column.flex-v-top{justify-content: flex-start;}
    .flex-mobile-column.flex-v-bottom{justify-content: flex-end;}
    .flex-mobile-column.flex-h-center{align-items: center;}
    .flex-mobile-column.flex-h-left{align-items: flex-start;}
    .flex-mobile-column.flex-h-between{align-items: space-between;}
    .flex-mobile-column.flex-h-right{align-items: flex-end;}
}
/* global text */
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}

/* colors */
:root{
    --background-color: var(--source-background-color);
    --background-accent-color: var(--source-background-accent-color);
    --text-color: var(--source-text-color);
    --text-accent-color: var(--source-text-accent-color);
}
.turn-to-dark{
    --background-color: var(--dark-background-color);
    --background-accent-color: var(--dark-background-accent-color);
    --text-color: var(--dark-text-color);
    --text-accent-color: var(--dark-text-accent-color);
    background-color: var(--background-color);
    color: var(--text-color);
}
.turn-to-light{
    --background-color: var(--source-background-color);
    --background-accent-color: var(--source-background-accent-color);
    --text-color: var(--source-text-color);
    --text-accent-color: var(--source-text-accent-color);
    background-color: var(--background-color);
    color: var(--text-color);
}

.background-color{background-color: var(--background-color);}
.background-accent-color{background-color: var(--background-accent-color);}
.dark-background-color{background-color: var(--dark-background-color);}
.text-accent-color{color: var(--text-accent-color)}

a{color: var(--text-accent-color);transition: color 0.3s ease;}
a:hover,a:focus-visible{color: var(--text-color);}

/* margins and paddings */
.without-margin{margin:0;}
.small-padding{padding: var(--small-padding);}
.extra-small-padding{padding: var(--extra-small-padding);}

/* sort-arrows */
/* div.sort-arrows{ margin-top: -4px;} */
div.sort-arrows a.extra-small-icon{height:10px; overflow: hidden;cursor:pointer;display:flex}

/* hr lines */
hr.basic {
    height: 1px;
    background-color: var(--text-color);
    width: 100%;
    border: 0;
    opacity: 0.1;

}

/* Collapsible */
    platejan-collapsible-toggle{
        display: block;
        cursor: pointer;
    }
    .platejan-collapsible-content{
        height: 0px;
        overflow: hidden;
    }
    .platejan-collapsible-content.open{
        height: auto;
        overflow: auto;
    }
/* Ajax-Groups */
platejan-ajax-groups{display: none;}

/* Headings */
h1{font-size: var(--extra-large-font-size);}
h2{font-size: var(--large-font-size);}
h3{font-size: var(--medium-font-size);}
h4{font-size: var(--small-font-size);}
.line-heigh-as-h1{line-height: calc(1.4 * var(--large-font-size));}