* {
    box-sizing: border-box;
}
html, body { 
    padding: 0; 
    margin: 0;
}
html {
    font-size: var( --font-size, 16px );
    min-height: 100%;
    display: grid;
}
body {
    font-size: 1em;
    font-weight: 400;
    font-family: var( --font-family );
    line-height: var( --font-line-height, 1.4 );
    color: var( --font-color, #000 );
    background-color: var( --background-color, #fff );
}

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

hr {
    border-color: var( --border-color );
    margin: 2em 0;
}

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-sticky { position: sticky; top: 0; }

.text-muted, .text-muted :is( a, a:focus ) { 
    color: var( --color-muted ); 
}

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

.lh-1 { line-height: 1; }
.lh-2 { line-height: 1.25; }
.lh-3 { line-height: 1.5; }
.lh-4 { line-height: 1.75; }
.lh-5 { line-height: 2; }

.d-none { display: none !important; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var( --color-primary ); }
.text-secondary { color: var( --color-secondary ); }
.text-success { color: var( --color-success ); }
.text-danger { color: var( --color-danger ); }
.text-info { color: var( --color-info ); }
.text-light { color: var( --color-light ); }
.text-dark { color: var( --color-dark ); }

.font-weight-regular { font-weight: 400; }
.font-weight-bold { font-weight: 700; }

a {
    font-size: var( --a-font-size, inherit );
    font-weight: var( --a-font-weight, inherit );
    color: var( --a-font-color, inherit );
    transition: color 300ms, opacity 300ms;
    text-decoration: var( --a-text-decoration );
    text-underline-offset: .15rem;
    
    &:hover {
        cursor: pointer;
        color: var( --a-hover-font-color, var( --a-font-color ) );
        text-decoration: var( --a-hover-text-decoration, var( --a-text-decoration ) );
    }
    &:focus {
        outline: 0;
        color: var( --a-focus-font-color, var( --a-hover-font-color ) );
        text-decoration: var( --a-focus-text-decoration, var( --a-hover-text-decoration, var( --a-text-decoration ) ) );
    }
}

p {
    margin: 0 0 1em 0;
}

h1, h2, h3, h4 {
    --h-line-height: 1.2;
    --h-margin: 0 0 1rem 0;
    
    font-size: var( --h-font-size );
    font-family: var( --h-font-family, inherit );
    font-weight: var( --h-font-weight, 700 );
    line-height: var( --h-line-height );
    margin: var( --h-margin );
}
h1 { --h-font-size: clamp(2rem, 6vw, 3rem); } /* Syntax: clamp(Minimum, Flexibler Wert, Maximum) */
h2 { --h-font-size: clamp(1.2rem, 6vw, 1.778rem); }
h3 { --h-font-size: clamp(1rem, 6vw, 1.333rem); }

/* Form Elements */
.form-group {
    margin-bottom: 1em;
}
.form-group > label {
    display: block;
    margin-bottom: .5em;
}
.form-group > small {
    display: block;
    color: var( --color-muted ); 
    margin-top: .5em;
}

.form-control {
    --input-background: var( --color-dark );
    --input-padding: .7em 1em;
    --input-border-width: 1px;
    --input-border: var( --input-border-width ) solid var( --border-color );
    --input-border-radius: .25em;
    --input-box-shadow-size: .2em;
    
    --input-hover-border: var( --input-border-width ) solid var( --border-color-light );
    --input-focus-border: var( --input-border-width ) solid var( --color-primary );
    --input-focus-box-shadow: 0 0 0 var( --input-box-shadow-size ) rgba( var( --color-primary-rgb ) / 30% );
    
    width: 100%;
    background: var( --input-background );
    box-shadow: var( --input-box-shadow );
    border: var( --input-border, 0 );
    border-radius: var( --input-border-radius, 0 );
    font-family: var( --font-family );    
    font-size: var( --input-font-size, 1em );
    color: var( --input-font-color, inherit );
    padding: var( --input-padding );
    transition: background 500ms, box-shadow 500ms, border 500ms, color 500ms;
    
    &:hover {
        outline: 0;
        background: var( --input-hover-background, var( --input-background ) );
        color: var( --input-hover-font-color, var( --input-font-color ) );
        border: var( --input-hover-border, var( --input-border, 0 ) );
        box-shadow: var( --input-hover-box-shadow, var( --input-box-shadow ) );
    }
    &:focus {
        outline: 0;
        background: var( --input-focus-background, var( --input-background ) );
        color: var( --input-focus-font-color, var( --input-font-color ) );
        border: var( --input-focus-border, var( --input-border, 0 ) );
        box-shadow: var( --input-focus-box-shadow, var( --input-box-shadow ) );
    }
}

/* Buttons */
.btn {
    --btn-background: none;
    --btn-padding: .889em 1.5em;
    --btn-font-size: inherit;
    --btn-font-weight: 700;
    --btn-border-width: 1px;
    --btn-border: var( --btn-border-width ) solid var( --border-color );
    --btn-border-radius: .25em;
    --btn-box-shadow-size: .2em;
    --a-line-height: 1.2;
    
    --btn-hover-border: var( --btn-border-width ) solid var( --color-primary );
    --btn-hover-box-shadow: 0 0 0 var( --btn-box-shadow-size ) rgba( var( --color-primary-rgb ) / 25% );

    --btn-focus-border: var( --btn-border-width ) solid var( --color-secondary );
    --btn-focus-box-shadow: 0 0 0 var( --btn-box-shadow-size ) rgba( var( --color-secondary-rgb ) / 25% );
    
    background: var( --btn-background );
    box-shadow: var( --btn-box-shadow );
    border: var( --btn-border, 0 );
    border-radius: var( --btn-border-radius, 0 );
    font-family: var( --font-family );
    font-size: var( --btn-font-size, 1em );
    font-weight: var( --btn-font-weight, inherit );
    line-height: var( --a-line-height );
    color: var( --btn-font-color, inherit );
    padding: var( --btn-padding );
    text-decoration: none;
    transition: background 500ms, box-shadow 500ms, border 500ms, color 500ms;
    
    &[command="close"] {
        display: block;
        width: 3em;
        padding: .5em;
        border-radius: 0;
        aspect-ratio: 1;
    }    
    &:hover {
        cursor: pointer;
        outline: 0;
        text-decoration: none;
        background: var( --btn-hover-background, var( --btn-background ) );
        color: var( --btn-hover-font-color, var( --btn-font-color ) );
        border: var( --btn-hover-border, var( --btn-border, 0 ) );
        box-shadow: var( --btn-hover-box-shadow, var( --btn-box-shadow ) );
    }
    &:focus {
        outline: 0;
        text-decoration: none;
        background: var( --btn-focus-background, var( --btn-hover-background ) );
        color: var( --btn-focus-font-color, var( --btn-hover-font-color ) );
        border: var( --btn-focus-border, var( --btn-hover-border, 0 ) );
        box-shadow: var( --btn-focus-box-shadow, var( --btn-hover-box-shadow ) );
    }
    &[disabled] {
        background: #444;
        border-color: #444;
        color: #888;
        box-shadow: none;
        cursor: not-allowed
    }
}
.btn.sm {
    --btn-font-size: .875em;
    --btn-padding: .625em 1em;
}
.btn.btn-primary {
    --btn-background: var( --color-primary );
    --btn-font-color: var( --color-primary-font-color );
    
    --btn-hover-background: var( --color-secondary );
    --btn-hover-border: var( --btn-border-width ) solid var( --color-secondary );
    --btn-hover-font-color: var( --color-secondary-font-color );
    --btn-hover-box-shadow: 0 0 0 var( --btn-box-shadow-size ) rgba( var( --color-secondary-rgb ) / 25% );
}

.btn.btn-secondary {
    --btn-background: var( --color-secondary );
    --btn-font-color: var( --color-secondary-font-color );
    
    --btn-hover-background: var( --color-primary );
    --btn-hover-border: var( --btn-border-width ) solid var( --color-primary );
    --btn-hover-font-color: var( --color-primary-font-color );
    --btn-hover-box-shadow: 0 0 0 var( --btn-box-shadow-size ) rgba( var( --color-primary-rgb ) / 25% );
}

/* Cards */
.card {
    --card-background: rgba( var( --color-muted-rgb ) / 2% );
    --card-border: 1px solid var( --border-color-dark );
    --card-border-radius: .5rem;
    --card-padding-x: 2em;
    --card-padding-y: 2em;
    --card-margin: 0 0 2rem 0;
    
    --card-title-font-size: inherit;
    --card-title-font-weight: 700;
    
    --card-headfoot-padding-y: 1.337rem;
    
    &.sm {
        --card-padding-x: 1em;
        --card-padding-y: 1em;
        --card-headfoot-padding-y: .75rem;
        --card-margin: 0 0 .0rem 0;
    }
    
    border: var( --card-border, 0 );
    border-radius: var( --card-border-radius );
    background: var( --card-background, none );
    font-size: var( --card-font-size, inherit );
    color: var( --card-font-color, inherit );
    margin: var( --card-margin, 0 );    
}
.card-header,
.card-footer {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1em;
    padding: var( --card-headfoot-padding-y, var( --card-padding-y ) ) var( --card-headfoot-padding-x, var( --card-padding-x ) );
}

.card-header {
    border-bottom: var( --card-border, 0 );
}
.card-title {
    font-size: var( --card-title-font-size, inherit );
    font-weight: var( --card-title-font-weight, inherit );
}

.card-body {
    padding: var( --card-padding-y ) var( --card-padding-x );
}
.card-footer {
    border-top: var( --card-border, 0 );
    justify-content: end;
}

.card-danger {
    --card-background: var( --color-danger );
    --card-font-color: var( --color-danger-font-color );
    --card-border: 1px solid var( --color-danger );    
    --color-muted: var( --card-font-color );
}
.card-success {
    --card-background: var( --color-success );
    --card-font-color: var( --color-success-font-color );
    --card-border: 1px solid var( --color-success );
    --color-muted: var( --card-font-color );
}
.card-warning {
    --card-background: var( --color-warning );
    --card-font-color: var( --color-warning-font-color );
    --card-border: 1px solid var( --color-warning );
    --color-muted: var( --card-font-color );
}
.card-info {
    --card-background: var( --color-info );
    --card-font-color: var( --color-info-font-color );
    --card-border: 1px solid var( --color-info );
    --color-muted: var( --card-font-color );
}

/* Alerts */
.alert {
    --alert-padding: .667em;
    --alert-border-radius: .25em;
    --alert-border: 1px solid var( --border-color );
    
    padding: var( --alert-padding );
    background: var( --alert-background, none );
    border: var( --alert-border, 0 );
    font-size: var( --alert-font-size, inherit );
    color: var( --alert-font-color, inherit );
    border-radius: var( --alert-border-radius, 0 );
    text-align: center;
}
.card > .alert {
    --alert-border-radius: 0;
}

.alert-danger {
    --alert-background: var( --color-danger );
    --alert-font-color: var( --color-danger-font-color );
    --alert-border: 0;
}
.alert-success {
    --alert-background: var( --color-success );
    --alert-font-color: var( --color-success-font-color );
    --alert-border: 0;
}
.alert-warning {
    --alert-background: var( --color-warning );
    --alert-font-color: var( --color-warning-font-color );
    --alert-border: 0;
}
.alert-info {
    --alert-background: var( --color-info );
    --alert-font-color: var( --color-info-font-color );
    --alert-border: 0;
}

/* Badges */
.badge {
    --badge-background: var( --color-dark );
    --badge-font-color: var( --color-dark-font-color );
    --badge-font-weight: bold;
    --badge-border: 1px solid var(--border-color);
    --badge-border-radius: .25em;
    --badge-font-size: .85rem;
    --badge-padding: .5em 1em;
    
    border: var( --badge-border, 0 );
    background: var( --badge-background, none );
    font-size: var( --badge-font-size, inherit );
    font-weight: var( --badge-font-weight, inherit );
    color: var( --badge-font-color, inherit );
    padding: var( --badge-padding );
    border-radius: var( --badge-border-radius );
    line-height: 1;
    display: inline-block;
    
    &.w-100 {
        text-align: center;
    }
    
    &.bg-primary {
        --badge-background: var( --color-primary );
        --badge-font-color: var( --color-primary-font-color );
        --border-color: var( --badge-background );
    }
    &.bg-secondary {
        --badge-background: var( --color-secondary );
        --badge-font-color: var( --color-secondary-font-color );
        --border-color: var( --badge-background );
    }
    &.bg-danger {
        --badge-background: var( --color-danger );
        --badge-font-color: var( --color-danger-font-color );
        --border-color: var( --badge-background );
    }
    &.bg-success {
        --badge-background: var( --color-success );
        --badge-font-color: var( --color-success-font-color );
        --border-color: var( --badge-background );
    }
    &.bg-warning {
        --badge-background: var( --color-warning );
        --badge-font-color: var( --color-warning-font-color );
        --border-color: var( --badge-background );
    }    
}

/* Dialog */
dialog {
    --dialog-background: #252D34;
    --dialog-font-color: var( --font-color );
    --dialog-font-size: .875em;
    --dialog-box-shadow: 0 0 5rem rgba( 0 0 0 / 10%);
    --dialog-border: 0;
    
    --dialog-padding-x: 2rem;
    --dialog-padding-y: 2rem;
    
    width: 100%;
    max-width: 95%;
    
    border: var( --dialog-border );
    background: var( --dialog-background );
    color: var( --dialog-font-color );
    font-size: var( --dialog-font-size, 1em );
    line-height: var( --dialog-line-height, inherit );
    padding: var( --dialog-padding-y ) var( --dialog-padding-x );
    box-shadow: var( --dialog-box-shadow );
}
dialog::backdrop {
    background-color: rgba( 0 0 0 / 20% );
    backdrop-filter: blur(.5em);
}
dialog button[command="close"] {
    position: absolute;
    top: 0;
    right: 1em;
}

/* Gaps */
.g-0 { gap: 0rem !important; }
.g-xs { gap: .25rem !important; }
.g-sm { gap: .5rem !important; }
.g-1 { gap: 1rem !important; }
.g-2 { gap: 2rem !important; }
.g-3 { gap: 3rem !important; }
.g-4 { gap: 4rem !important; }
.g-5 { gap: 5rem !important; }
.g-6 { gap: 6rem !important; }
.g-7 { gap: 7rem !important; }
.g-8 { gap: 8rem !important; }
.g-9 { gap: 9rem !important; }
.g-10 { gap: 10rem !important; }
.g-11 { gap: 11rem !important; }
.g-12 { gap: 12rem !important; }

/* Flexbox */
.d-flex { display: flex; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

.align-start { align-items: start; }
.align-center { align-items: center; }
.align-end { align-items: end; }

.align-self-start { align-self: start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: end; }

.justify-start { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-spacebetween { justify-content: space-between; }

.flex-auto { flex: auto; }
.flex-fill { flex: 1; }

/* Padding */
.p-0 { padding: 0 !important; }
.pt-0, .py-0 { padding-top: 0 !important; }
.pr-0, .px-0 { padding-right: 0 !important; }
.pb-0, .py-0 { padding-bottom: 0 !important; }
.pl-0, .px-0 { padding-left: 0 !important; }

.p-1 { padding: 0.25rem !important; }
.pt-1, .py-1 { padding-top: 0.25rem !important; }
.pr-1, .px-1 { padding-right: 0.25rem !important; }
.pb-1, .py-1 { padding-bottom: 0.25rem !important; }
.pl-1, .px-1 { padding-left: 0.25rem !important; }

.p-2 { padding: 0.5rem !important; }
.pt-2, .py-2 { padding-top: 0.5rem !important; }
.pr-2, .px-2 { padding-right: 0.5rem !important; }
.pb-2, .py-2 { padding-bottom: 0.5rem !important; }
.pl-2, .px-2 { padding-left: 0.5rem !important; }

.p-3 { padding: 1rem !important; }
.pt-3, .py-3 { padding-top: 1rem !important; }
.pr-3, .px-3 { padding-right: 1rem !important; }
.pb-3, .py-3 { padding-bottom: 1rem !important; }
.pl-3, .px-3 { padding-left: 1rem !important; }

.p-4 { padding: 1.5rem !important; }
.pt-4, .py-4 { padding-top: 1.5rem !important; }
.pr-4, .px-4 { padding-right: 1.5rem !important; }
.pb-4, .py-4 { padding-bottom: 1.5rem !important; }
.pl-4, .px-4 { padding-left: 1.5rem !important; }

.p-5 { padding: 3rem !important; }
.pt-5, .py-5 { padding-top: 3rem !important; }
.pr-5, .px-5 { padding-right: 3rem !important; }
.pb-5, .py-5 { padding-bottom: 3rem !important; }
.pl-5, .px-5 { padding-left: 3rem !important; }

.p-8 { padding: 8rem !important; }
.pt-8, .py-8 { padding-top: 8rem !important; }
.pr-8, .px-8 { padding-right: 8rem !important; }
.pb-8, .py-8 { padding-bottom: 8rem !important; }
.pl-8, .px-8 { padding-left: 8rem !important; }

/* Margin */
.mr-auto { margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }

.m-0 { margin: 0 !important; }
.mt-0, .my-0 { margin-top: 0 !important; }
.mr-0, .mx-0 { margin-right: 0 !important; }
.mb-0, .my-0 { margin-bottom: 0 !important; }
.ml-0, .mx-0 { margin-left: 0 !important; }

.m-1 { margin: 0.25rem !important; }
.mt-1, .my-1 { margin-top: 0.25rem !important; }
.mr-1, .mx-1 { margin-right: 0.25rem !important; }
.mb-1, .my-1 { margin-bottom: 0.25rem !important; }
.ml-1, .mx-1 { margin-left: 0.25rem !important; }

.m-n1 { margin: -1rem !important; }
.mt-n1, .my-n1 { margin-top: -1rem !important; }
.mr-n1, .mx-n1 { margin-right: -1rem !important; }
.mb-n1, .my-n1 { margin-bottom: -1rem !important; }
.ml-n1, .mx-n1 { margin-left: -1rem !important; }

.m-2 { margin: 0.5rem !important; }
.mt-2, .my-2 { margin-top: 0.5rem !important; }
.mr-2, .mx-2 { margin-right: 0.5rem !important; }
.mb-2, .my-2 { margin-bottom: 0.5rem !important; }
.ml-2, .mx-2 { margin-left: 0.5rem !important; }

.m-n2 { margin: -2rem !important; }
.mt-n2, .my-n2 { margin-top: -2rem !important; }
.mr-n2, .mx-n2 { margin-right: -2rem !important; }
.mb-n2, .my-n2 { margin-bottom: -2rem !important; }
.ml-n2, .mx-n2 { margin-left: -2rem !important; }

.m-3 { margin: 1rem !important; }
.mt-3, .my-3 { margin-top: 1rem !important; }
.mr-3, .mx-3 { margin-right: 1rem !important; }
.mb-3, .my-3 { margin-bottom: 1rem !important; }
.ml-3, .mx-3 { margin-left: 1rem !important; }

.m-n3 { margin: -3rem !important; }
.mt-n3, .my-n3 { margin-top: -3rem !important; }
.mr-n3, .mx-n3 { margin-right: -3rem !important; }
.mb-n3, .my-n3 { margin-bottom: -3rem !important; }
.ml-n3, .mx-n3 { margin-left: -3rem !important; }

.m-4 { margin: 1.5rem !important; }
.mt-4, .my-4 { margin-top: 1.5rem !important; }
.mr-4, .mx-4 { margin-right: 1.5rem !important; }
.mb-4, .my-4 { margin-bottom: 1.5rem !important; }
.ml-4, .mx-4 { margin-left: 1.5rem !important; }

.m-5 { margin: 3rem !important; }
.mt-5, .my-5 { margin-top: 3rem !important; }
.mr-5, .mx-5 { margin-right: 3rem !important; }
.mb-5, .my-5 { margin-bottom: 3rem !important; }
.ml-5, .mx-5 { margin-left: 3rem !important; }

.m-6 { margin: 6rem !important; }
.mt-6, .my-6 { margin-top: 6rem !important; }
.mr-6, .mx-6 { margin-right: 6rem !important; }
.mb-6, .my-6 { margin-bottom: 6rem !important; }
.ml-6, .mx-6 { margin-left: 6rem !important; }

.m-7 { margin: 7rem !important; }
.mt-7, .my-7 { margin-top: 7rem !important; }
.mr-7, .mx-7 { margin-right: 7rem !important; }
.mb-7, .my-7 { margin-bottom: 7rem !important; }
.ml-7, .mx-7 { margin-left: 7rem !important; }

.m-8 { margin: 8rem !important; }
.mt-8, .my-8 { margin-top: 8rem !important; }
.mr-8, .mx-8 { margin-right: 8rem !important; }
.mb-8, .my-8 { margin-bottom: 8rem !important; }
.ml-8, .mx-8 { margin-left: 8rem !important; }

.m-9 { margin: 9rem !important; }
.mt-9, .my-9 { margin-top: 9rem !important; }
.mr-9, .mx-9 { margin-right: 9rem !important; }
.mb-9, .my-9{ margin-bottom: 9rem !important; }
.ml-9, .mx-9 { margin-left: 9rem !important; }

.m-10 { margin: 10rem !important; }
.mt-10, .my-10 { margin-top: 10rem !important; }
.mr-10, .mx-10 { margin-right: 10rem !important; }
.mb-10, .my-10 { margin-bottom: 10rem !important; }
.ml-10, .mx-10 { margin-left: 10rem !important; }