/* Compiled css - 2026-02-04 00:56:04 */

/* == variables == */
:root {
    
    --color-black            : #000000;
    --color-black-t1         : rgba(0, 0, 0, 0.1);
    --color-black-t2         : rgba(0, 0, 0, 0.25);
    --color-black-t7         : rgba(0, 0, 0, 0.72);
    --color-black-t8         : rgba(0, 0, 0, 0.8);
    --color-black-alpha      : rgba(0, 0, 0, 0.5);
    --color-black-decent     : rgba(0, 0, 0, 0.25);
    --color-black2           : #111111;
    --color-black3           : #222222;
    --color-dark-gray        : #848a8c;
    --color-dark             : var(--color-black-t7);
    --color-very-dark-gray   : #333333;
    --color-gray             : #a5a9ab;
    --color-light-gray       : #d7d7d8;
    --color-light            : #f4f4f4;
    --color-white            : #ffffff;
    --color-white-alpha      : rgba(255, 255, 255, 0.5);
    --color-white-decent     : rgba(255, 255, 255, 0.25);
    
    --color-primary          : #0085ad;
    --primary-color          : var(--color-primary);
    --color-secondary        : #ffc168;
    --secondary-color        : var(--color-secondary);
    --color-tertiary         : #7fbb00;
    --tertiary-color         : var(--color-tertiary);
    
    /* Colors */
    --color-dark-red         : #e4002b;
    --color-dark-red1        : #cb202d;
    --color-dark-red2        : #c63527;
    --color-error            : #fd5c63;
    --color-danger           : var(--color-error);
    --color-red              : #fd5c63;
    --color-red2             : #e56a54;
    --color-red3             : #ff967d;
    
    --color-dark-blue        : #35465c;
    --color-blue             : #4298b5;
    --color-blue2            : #0079bf;
    --color-blue3            : #79b9e7;
    --color-info             : #b1d4e5;
    --color-info2            : #1f8dd6;
    
    --color-dark-purple      : #77216f;
    --color-purple           : #b83c82;
    --color-violet           : #7552cc;
    --color-violet2          : #9146ff;
    --color-violet3          : #c377e0;
    --color-pink             : #ff78cb;
    --color-bright-violet    : #e2d4e7;
    
    --color-success          : #0abf53;
    --color-success-mat      : #5eb95e;
    --color-green            : #2c9f45;
    --color-green2           : #6fbc6d;
    --color-green3           : #70b500;
    --color-green4           : #98ce1e;
    --color-green5           : #2ecc71;
    
    --color-warning          : #fbb034;
    --color-orange           : #eb5424;
    --color-orange2          : #bf5700;
    --color-orange3          : #ff9600;
    
    --color-yellow           : #ffed00;
    --color-yellow3          : #ffbd00;
    --color-yellow2          : #fee75c;
    
    /* Borders */
    --border-radius          : 0.25rem;
    --default-border         : 1px solid var(--color-black-decent);
    --border-color           : var(--color-black-decent);
    
    /* Typography */
    --font-family            : 'Segoe UI', Calibri, Helvetica, Tahoma, Verdana, 'Arial', sans-serif;
    --font-code              : monospace, Monospaced, Consolas, "Lucida Console", "Courier New", sans-serif;
    --font-size              : 14px;
    --font-size-sm           : 0.8rem;
    --font-size-xs           : 0.72rem;
    --font-size-xxs          : 0.64rem;
    --font-weight            : normal;
    --font-weight-heading    : normal;
    --line-height            : 1.4;
    --text-color             : var(--color-black3);
    --link-color             : #2971b2;
    
    /* Grid */
    --grid-gap               : 0.4rem;
    --grid-gap-xs            : 0.25rem;
    --grid-gap-sm            : 0.5rem;
    --grid-gap-1             : 1rem;
    --grid-padding           : 4px;
    
    /* Input parameters */
    --textarea-min-height    : 3rem;
    
    /* Paddings */
    --input-padding          : 0.4rem 0.5rem;
    --input-padding-x        : 0.5rem;
    --input-padding-y        : 0.4rem;
    --input-margin           : 0.1rem;
    --default-padding        : 1rem;
    --default-padding-sm     : 0.5rem;
    
    /* Margins */
    --default-margin         : 1rem;
    --default-margin-sm      : 0.5rem;
    
    /* Spacing */
    --space                  : 1rem;
    
    /* Tables */
    --table-cell-padding     : 0.3rem 0.4rem;
    --table-cell-padding-sm  : 0.25rem;
    --table-cell-padding-xs  : 0.1rem;
    
    --table-head-font-weight : bold;
    --table-foot-font-weight : bold;
    
    /* Containers / layout */
    --container-width        : 768px;
    
    /* Images */
    --size-thumbnail         : 180px;
    
}

/* == general == */
* {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

*::before, *::after {
    box-sizing : border-box;
}

:root {
    position : relative;
}

body {
    margin           : 0;
    padding          : 0;
    line-height      : var(--line-height);
    font-family      : var(--font-family);
    font-size        : var(--font-size);
    background-color : var(--color-white);
    color            : var(--text-color);
}

div, p, table, span, main, article, section {
    max-width : 100%;
}

/* Hyperlinks */
a {
    text-decoration : underline;
    color           : var(--link-color);
    cursor          : pointer;
}

/* Display classes */
.d-block {
    display : block !important;
}

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

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

/* Disabled elements */
.off, .disabled, [disabled] {
    pointer-events : none !important;
    opacity        : 0.4 !important;
    user-select    : none !important;
    touch-action   : none !important;
}

/* Passive element */
.passive {
    cursor         : default !important;
    pointer-events : none !important;
    user-select    : none !important;
    touch-action   : none !important;
}

/* Hide elements */
.d-none,
.hidden,
[hidden] {
    display : none !important;
}

.invisible {
    visibility : hidden !important;
    opacity    : 0;
}

/* Floating */
.float-left {
    float : left;
}

.float-right {
    float : right;
}

.clearfix {
    display : block;
    float   : none;
    clear   : both;
    content : "";
}

/* Text alignment */
.left, .text-left {
    text-align : left !important;
}

.right, .text-right {
    text-align : right !important;
}

.center, .text-center {
    text-align : center !important;
}

.text-start {
    text-align : start !important;
}

.text-end {
    text-align : end !important;
}

.text-justify {
    text-align : justify !important;
}

.text-justify-all {
    text-align : justify-all !important;
}

/* Borders */
.borderless, .no-border {
    border : none !important;
}

table.borderless, table.borderless tr th, table.borderless tr td {
    border : none;
}

.border-top {
    border-top : var(--default-border);
}

.border-right {
    border-right : var(--default-border);
}

.border-bottom {
    border-bottom : var(--default-border);
}

.border-left {
    border-left : var(--default-border);
}

/* Text and background colors */
.text-primary {
    color : var(--color-primary);
}

.text-secondary {
    color : var(--color-secondary);
}

.text-tertiary {
    color : var(--color-tertiary);
}

.text-black {
    color : #000000;
}

.text-white {
    color : #ffffff;
}

.bg-primary {
    background-color : var(--color-primary);
}

.bg-secondary {
    background-color : var(--color-secondary);
}

.bg-tertiary {
    background-color : var(--color-tertiary);
}

.bg-black {
    background-color : #000000;
}

.bg-white {
    background-color : #ffffff;
}

/* Roundness */
.rounded {
    border-radius : var(--border-radius);
}

/* Buttons */
.btn, button, input[type="submit"] {
    transition       : background-color 150ms ease;
    display          : inline-block;
    background-color : var(--color-primary);
    color            : var(--color-white);
    font-size        : var(--font-size);
    white-space      : nowrap;
    cursor           : pointer;
    text-decoration  : none;
    text-align       : center;
    user-select      : none;
    max-width        : 100%;
    border           : 1px solid var(--color-black-t1);
    padding          : 0.3rem 0.6rem;
    /*line-height      : 1.25;*/
}

.btn-danger {
    background-color : var(--color-danger);
}

.btn-success {
    background-color : var(--color-success);
}

.btn:hover {
    opacity : 0.84;
}

.btn.btn-sm, .btn-small {
    padding : 0.2rem 0.5rem;
}

.btn.btn-xs {
    padding   : 0.1rem 0.25rem;
    font-size : 0.8rem;
}

.btn.btn-lg {
    font-size : 1.25rem;
    padding   : 0.5rem 1rem;
}

.btn.btn-xl {
    font-size : 1.5rem;
    padding   : 0.75rem 1.25rem;
}

/* Button bar */
.buttons {
    padding-top    : 2px;
    padding-bottom : 2px;
    margin-top     : 2px;
    margin-bottom  : 2px;
}

/**
 * Die folgenden Zeilen definieren Split-Buttons.
 * In der Form werden die Buttons direkt aneinander gehängt ohne Abstand,
 * und gerundete Ecken haben nur der erste Button links und der letzte Button rechts.
 */

.buttons.split-buttons {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(0, 1fr));
}

.buttons.split-buttons .btn {
    margin        : 0;
    border-radius : 0;
}

.buttons.split-buttons .btn:first-child {
    border-top-left-radius    : var(--border-radius);
    border-bottom-left-radius : var(--border-radius);
}

.buttons.split-buttons .btn:last-child {
    border-top-right-radius    : var(--border-radius);
    border-bottom-right-radius : var(--border-radius);
}

.buttons.split-buttons .btn:not(:last-child) {
    border-right : none;
}


/* Fieldset */
fieldset {
    padding : 1rem;
}

fieldset legend {
    display : inline-block;
    padding : 0 0.75rem;
}

/* nav */
nav {

}

/* pre and code */
code,
pre,
.text-monospace,
.text-monospaced,
.monospace,
.monospaced {
    font-family : var(--font-code);
}

pre {
    margin   : 0.25rem 0;
    padding  : 0.2rem 0.4rem;
    border   : var(--default-border);
    overflow : auto;
}

:not(pre) > code {
    background-color : rgba(0, 0, 0, 0.05);
    display          : inline-block;
    margin           : 1px 0;
    color            : rgba(0, 0, 0, 0.95);
    border           : 1px solid rgba(0, 0, 0, 0.2);
    padding          : 1px 4px 0 4px;
    font-size        : 0.75rem;
    font-weight      : 100;
}

:not(pre) > code:hover {
    border-color : rgba(0, 0, 0, 0.4);
}

/* hr line */
hr {
    border           : none;
    height           : 1px;
    color            : var(--border-color);
    background-color : var(--border-color);
}

/* Label */
label {
    user-select : none;
}

form .row > div > label {
    display : block;
    padding : 0.25rem;
}

/* Lists */
ul {
    list-style-position : inside;
}

ul.list-unstyled,
ul.list-unstyled li,
ul.nostyle,
ul.nostyle li {
    list-style : none;
}

ul.inline li {
    display : inline-block;
}

/* Address */
address {
    font-style : normal;
}

address p {
    margin  : 0;
    padding : 0;
}

/* Details */
details summary {
    cursor : pointer;
}

/* kbd - keyboard input */
kbd {
    border           : 1px solid #cccccc;
    padding          : 0.1rem 0.3rem;
    border-radius    : 0.2rem;
    background-color : #f7f7f7;
    box-shadow       : inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* Text selection */
.no-text-selection,
.disable-text-selection {
    user-select : none;
}

/* Images */
img {
    display    : block;
    width      : 100%;
    max-width  : 100%;
    color      : rgba(0, 0, 0, 0.5);
    color      : #ff4c4ca0;
    font-style : italic;
}

img.thumbnail {
    width  : var(--size-thumbnail);
    height : var(--size-thumbnail);
}

/* General helpers */
.nowrap {
    white-space : nowrap;
}

.pre {
    white-space : pre;
}

html.rounded input,
html.rounded textarea,
html.rounded button,
html.rounded .btn,
html.rounded fieldset,
html.rounded .alert,
html.rounded .badge,
html.rounded .dialog,
html.rounded .breadcrumb,
html.rounded pre,
html.rounded code,
html.rounded select {
    border-radius : var(--border-radius);
}

html.force-visual-grid,
html.visual-grid *:hover {
    outline          : 1px solid #cc0022;
    outline-offset   : 1px;
    background-color : rgba(0, 0, 255, 0.1);
}

html.debug-box * {
    pointer-events : unset !important;
}

html.debug-box *:hover {
    outline-offset : 1px;
    outline        : 1px dashed rgba(0, 0, 0, 0.72);
}

/* Opacity */
.opacity-0, .no-opacity {
    opacity : 0;
}

.opacity-100 {
    opacity : 0.1;
}

.opacity-20 {
    opacity : 0.2;
}

.opacity-30 {
    opacity : 0.3;
}

.opacity-40 {
    opacity : 0.4;
}

.opacity-50 {
    opacity : 0.5;
}

.opacity-60 {
    opacity : 0.6;
}

.opacity-70 {
    opacity : 0.7;
}

.opacity-80 {
    opacity : 0.8;
}

.opacity-90 {
    opacity : 0.9;
}

/* Tables */

table {
    border-collapse  : collapse;
    width            : 100%;
    background-color : var(--color-white);
}

table, table tr, table tr th, table tr td {
    border : var(--default-border);
}

table tr td, table tr th {
    padding : var(--table-cell-padding);
}

table.table-sm tr td, table.table-sm tr th {
    padding   : var(--table-cell-padding-sm);
    font-size : var(--font-size-sm);
}

table.table-xs tr td, table.table-xs tr th {
    padding   : var(--table-cell-padding-xs);
    font-size : var(--font-size-xs);
}

table thead th, table thead td {
    font-weight : var(--table-head-font-weight);
}

table tfoot th, table tfoot td {
    font-weight : var(--table-foot-font-weight);
}

table.table-striped tbody tr:nth-child(odd) td {
    background-color : var(--color-light-gray);
}

table.table-striped-even tbody tr:nth-child(even) td {
    background-color : var(--color-light-gray);
}

/* == form-elements == */
input[type="date"],
input[type="datetime-local"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="image"],
input[type="search"],
input[type="range"],
input[type="number"],
textarea {
    display    : block;
    width      : 100%;
    box-shadow : inset 0 0 4px rgba(0, 0, 0, 0.05);
    border     : 1px solid var(--color-black-t1);
    padding    : var(--input-padding);
    margin     : 0.1rem 0;
}

textarea {
    min-height : var(--textarea-min-height);
    resize     : vertical;
}

select {
    display    : block;
    width      : 100%;
    padding    : var(--input-padding);
    border     : 1px solid var(--color-black-decent);
    box-shadow : inset 0 0 4px rgba(0, 0, 0, 0.05);
}

input[type="number"], input[type="text"] {
    line-height : 1.25rem;
}

form label {
    padding : 0.1rem;
}

form input, form select, form textarea {
    max-width : 100% !important;
}

.row label .btn,
.row label button {
    padding : 0.3rem 0.6rem;
    margin  : 0.2rem 0 0 0;
}

input[type="date"].input-sm,
input[type="datetime-local"].input-sm,
input[type="text"].input-sm,
input[type="password"].input-sm,
input[type="email"].input-sm,
input[type="file"].input-sm,
input[type="image"].input-sm,
input[type="search"].input-sm,
input[type="range"].input-sm,
input[type="number"].input-sm,
textarea.input-sm {
    padding : 0.25rem 0.4rem;
}

input[type="date"].input-xs,
input[type="datetime-local"].input-xs,
input[type="text"].input-xs,
input[type="password"].input-xs,
input[type="email"].input-xs,
input[type="file"].input-xs,
input[type="image"].input-xs,
input[type="search"].input-xs,
input[type="range"].input-xs,
input[type="number"].input-xs,
textarea.input-xs {
    padding : 0.1rem 0.3rem;
}

/* == layout == */
.full-width {
    width : 100% !important;
}

.w-auto,
.auto-width {
    width : auto !important;
}

.h-auto,
.auto-height {
    height : auto !important;
}

.mx-auto {
    margin-left  : auto !important;
    margin-right : auto !important;
}

/* Containers */
.container,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container-xs {
    margin-left  : auto;
    margin-right : auto;
    max-width    : 100%;
}

.container {
    width : var(--container-width);
}

.container-xxl {
    width : 1320px;
}

.container-xl {
    max-width : 1320px;
}

.container-lg {
    max-width : 1140px;
}

.container-md {
    max-width : 960px;
}

.container-sm {
    max-width : 720px;
}

.container-xs {
    max-width : 540px;
}

.container-fluid,
.container-full-width {
    width : 100%;
}

/* == spacing == */
/* Paddings */
.p{padding: var(--default-padding);}
.px{padding-left: var(--default-padding);padding-right: var(--default-padding);}
.py{padding-top: var(--default-padding);padding-bottom: var(--default-padding);}
.pt{padding-top: var(--default-padding);}
.pr{padding-right: var(--default-padding);}
.pb{padding-bottom: var(--default-padding);}
.pl{padding-left: var(--default-padding);}

.p-0{padding:0;}
.p-1{padding:calc(var(--space) * 0.25);}
.p-2{padding:calc(var(--space) * 0.5);}
.p-3{padding:calc(var(--space) * 0.75);}
.p-4{padding:var(--space);}
.p-5{padding:calc(var(--space) * 1.25);}
.p-6{padding:calc(var(--space) * 1.5);}
.p-7{padding:calc(var(--space) * 1.75);}
.p-8{padding:calc(var(--space) * 2);}
.p-9{padding:calc(var(--space) * 2.5);}
.p-10{padding:calc(var(--space) * 3);}

.py-0,.pt-0{padding-top:0;}
.py-1,.pt-1{padding-top:calc(var(--space) * 0.25);}
.py-2,.pt-2{padding-top:calc(var(--space) * 0.5);}
.py-3,.pt-3{padding-top:calc(var(--space) * 0.75);}
.py-4,.pt-4{padding-top:var(--space);}
.py-5,.pt-5{padding-top:calc(var(--space) * 1.25);}
.py-6,.pt-6{padding-top:calc(var(--space) * 1.5);}
.py-7,.pt-7{padding-top:calc(var(--space) * 1.75);}
.py-8,.pt-8{padding-top:calc(var(--space) * 2);}
.py-9,.pt-9{padding-top:calc(var(--space) * 2.5);}
.py-10,.pt-10{padding-top:calc(var(--space) * 3);}

.px-0,.pr-0{padding-right:0;}
.px-1,.pr-1{padding-right:calc(var(--space) * 0.25);}
.px-2,.pr-2{padding-right:calc(var(--space) * 0.5);}
.px-3,.pr-3{padding-right:calc(var(--space) * 0.75);}
.px-4,.pr-4{padding-right:var(--space);}
.px-5,.pr-5{padding-right:calc(var(--space) * 1.25);}
.px-6,.pr-6{padding-right:calc(var(--space) * 1.5);}
.px-7,.pr-7{padding-right:calc(var(--space) * 1.75);}
.px-8,.pr-8{padding-right:calc(var(--space) * 2);}
.px-9,.pr-9{padding-right:calc(var(--space) * 2.5);}
.px-10,.pr-10{padding-right:calc(var(--space) * 3);}

.py-0,.pb-0{padding-bottom:0;}
.py-1,.pb-1{padding-bottom:calc(var(--space) * 0.25);}
.py-2,.pb-2{padding-bottom:calc(var(--space) * 0.5);}
.py-3,.pb-3{padding-bottom:calc(var(--space) * 0.75);}
.py-4,.pb-4{padding-bottom:var(--space);}
.py-5,.pb-5{padding-bottom:calc(var(--space) * 1.25);}
.py-6,.pb-6{padding-bottom:calc(var(--space) * 1.5);}
.py-7,.pb-7{padding-bottom:calc(var(--space) * 1.75);}
.py-8,.pb-8{padding-bottom:calc(var(--space) * 2);}
.py-9,.pb-9{padding-bottom:calc(var(--space) * 2.5);}
.py-10,.pb-10{padding-bottom:calc(var(--space) * 3);}

.px-0,.pl-0{padding-left:0;}
.px-1,.pl-1{padding-left:calc(var(--space) * 0.25);}
.px-2,.pl-2{padding-left:calc(var(--space) * 0.5);}
.px-3,.pl-3{padding-left:calc(var(--space) * 0.75);}
.px-4,.pl-4{padding-left:var(--space);}
.px-5,.pl-5{padding-left:calc(var(--space) * 1.25);}
.px-6,.pl-6{padding-left:calc(var(--space) * 1.5);}
.px-7,.pl-7{padding-left:calc(var(--space) * 1.75);}
.px-8,.pl-8{padding-left:calc(var(--space) * 2);}
.px-9,.pl-9{padding-left:calc(var(--space) * 2.5);}
.px-10,.pl-10{padding-left:calc(var(--space) * 3);}

/* Margins */
.m{margin: var(--default-margin);}
.mx{margin-left: var(--default-margin);margin-right: var(--default-margin);}
.my{margin-top: var(--default-margin);margin-bottom: var(--default-margin);}
.mt{margin-top: var(--default-margin);}
.mr{margin-right: var(--default-margin);}
.mb{margin-bottom: var(--default-margin);}
.ml{margin-left: var(--default-margin);}

.m-0{margin:0;}
.m-1{margin:calc(var(--space) * 0.25);}
.m-2{margin:calc(var(--space) * 0.5);}
.m-3{margin:calc(var(--space) * 0.75);}
.m-4{margin:var(--space);}
.m-5{margin:calc(var(--space) * 1.25);}
.m-6{margin:calc(var(--space) * 1.5);}
.m-7{margin:calc(var(--space) * 1.75);}
.m-8{margin:calc(var(--space) * 2);}
.m-9{margin:calc(var(--space) * 2.5);}
.m-10{margin:calc(var(--space) * 3);}

.my-0,.mt-0{margin-top:0;}
.my-1,.mt-1{margin-top:calc(var(--space) * 0.25);}
.my-2,.mt-2{margin-top:calc(var(--space) * 0.5);}
.my-3,.mt-3{margin-top:calc(var(--space) * 0.75);}
.my-4,.mt-4{margin-top:var(--space);}
.my-5,.mt-5{margin-top:calc(var(--space) * 1.25);}
.my-6,.mt-6{margin-top:calc(var(--space) * 1.5);}
.my-7,.mt-7{margin-top:calc(var(--space) * 1.75);}
.my-8,.mt-8{margin-top:calc(var(--space) * 2);}
.my-9,.mt-9{margin-top:calc(var(--space) * 2.5);}
.my-10,.mt-10{margin-top:calc(var(--space) * 3);}

.mx-0,.mr-0{margin-right:0;}
.mx-1,.mr-1{margin-right:calc(var(--space) * 0.25);}
.mx-2,.mr-2{margin-right:calc(var(--space) * 0.5);}
.mx-3,.mr-3{margin-right:calc(var(--space) * 0.75);}
.mx-4,.mr-4{margin-right:var(--space);}
.mx-5,.mr-5{margin-right:calc(var(--space) * 1.25);}
.mx-6,.mr-6{margin-right:calc(var(--space) * 1.5);}
.mx-7,.mr-7{margin-right:calc(var(--space) * 1.75);}
.mx-8,.mr-8{margin-right:calc(var(--space) * 2);}
.mx-9,.mr-9{margin-right:calc(var(--space) * 2.5);}
.mx-10,.mr-10{margin-right:calc(var(--space) * 3);}

.my-0,.mb-0{margin-bottom:0;}
.my-1,.mb-1{margin-bottom:calc(var(--space) * 0.25);}
.my-2,.mb-2{margin-bottom:calc(var(--space) * 0.5);}
.my-3,.mb-3{margin-bottom:calc(var(--space) * 0.75);}
.my-4,.mb-4{margin-bottom:var(--space);}
.my-5,.mb-5{margin-bottom:calc(var(--space) * 1.25);}
.my-6,.mb-6{margin-bottom:calc(var(--space) * 1.5);}
.my-7,.mb-7{margin-bottom:calc(var(--space) * 1.75);}
.my-8,.mb-8{margin-bottom:calc(var(--space) * 2);}
.my-9,.mb-9{margin-bottom:calc(var(--space) * 2.5);}
.my-10,.mb-10{margin-bottom:calc(var(--space) * 3);}

.mx-0,.ml-0{margin-left:0;}
.mx-1,.ml-1{margin-left:calc(var(--space) * 0.25);}
.mx-2,.ml-2{margin-left:calc(var(--space) * 0.5);}
.mx-3,.ml-3{margin-left:calc(var(--space) * 0.75);}
.mx-4,.ml-4{margin-left:var(--space);}
.mx-5,.ml-5{margin-left:calc(var(--space) * 1.25);}
.mx-6,.ml-6{margin-left:calc(var(--space) * 1.5);}
.mx-7,.ml-7{margin-left:calc(var(--space) * 1.75);}
.mx-8,.ml-8{margin-left:calc(var(--space) * 2);}
.mx-9,.ml-9{margin-left:calc(var(--space) * 2.5);}
.mx-10,.ml-10{margin-left:calc(var(--space) * 3);}

/* == colors == */
/* Border colors */

/* Text colors */
.color-error {
    color : var(--color-error);
}

.color-blue {
    color : var(--color-blue);
}

.color-violet {
    color : var(--color-violet);
}

.color-red {
    color : var(--color-error);
}

.color-green {
    color : var(--color-green);
}

.color-light-gray {
    color : var(--color-light-gray);
}

.color-orange {
    color : var(--color-orange);
}

.color-yellow {
    color : var(--color-yellow);
}

.color-yellow2 {
    color : var(--color-yellow2);
}

.text-error,
.text-danger {
    color : var(--color-danger);
}

/* Background-colors */
.bg-error {
    background-color : var(--color-error);
}

.bg-blue {
    background-color : var(--color-blue);
}

.bg-violet {
    background-color : var(--color-violet);
}

.bg-red {
    background-color : var(--color-red);
}

.bg-danger {
    background-color : var(--color-danger);
}

.bg-warning {
    background-color : var(--color-warning);
}

.bg-green {
    background-color : var(--color-green);
}

.bg-light-gray {
    background-color : var(--color-light-gray);
}

.bg-orange {
    background-color : var(--color-orange);
}

.bg-yellow {
    background-color : var(--color-yellow);
}

.bg-yellow2 {
    background-color : var(--color-yellow2);
}

/* == typography == */
/* Font sizes */
.text-smaller {
    font-size : 0.9em;
}

.text-half {
    font-size : 0.5em;
}

small,
.small,
.text-sm {
    font-size : var(--font-size-sm);
}

.text-xs {
    font-size : var(--font-size-xs);
}

.text-xxs {
    font-size : var(--font-size-xxs);
}

/* Headings */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    font-weight   : var(--font-weight-heading);
    line-height   : 1.1em;
    margin-top    : 0;
    margin-bottom : 0.5em;
}

h1 {
    font-size : 2.25rem;
}

h2 {
    font-size : 2rem;
}

h3 {
    font-size : 1.5rem;
}

h4 {
    font-size : 1.25rem;
}

h5 {
    font-size : 1rem;
}

h6 {
    font-size : 0.9rem;
}

/* Heading overrides */
.h1 {
    font-size : 2.25rem;
}

.h2 {
    font-size : 2rem;
}

.h3 {
    font-size : 1.5rem;
}

.h4 {
    font-size : 1.25rem;
}

.h5 {
    font-size : 1rem;
}

.h6 {
    font-size : 0.9rem;
}

/* Text decorations */
/* Underline */
.underline {
    text-decoration : underline;
}

.dotted-underline {
    text-decoration : underline dotted;
}

.dashed-underline {
    text-decoration : underline dashed;
}

.line-through,
.strikethrough {
    text-decoration : line-through;
}

abbr {
    text-decoration : underline dotted;
}

.no-decoration {
    text-decoration : none !important;
}

/* Bold */
.strong, .bold {
    font-weight : bold;
}

/* Italic */
.italic {
    font-style : italic;
}

/* Text transformations */
.uppercase {
    text-transform : uppercase;
}

.lowercase {
    text-transform : lowercase;
}

.capitalize {
    text-transform : capitalize;
}

mark {
    background-color : #ffcc2f;
}

.text-muted {
    cursor  : default;
    opacity : 0.5;
}

.barely-visible {
    opacity : 0.1;
}

.little-opacity {
    opacity : 0.25;
}

.transparent {
    opacity : 0.5;
}

.decent-opacity {
    opacity : 0.75;
}

.slightly-transparent {
    opacity : 0.9;
}

.text-code{
    font-family : var(--font-code);
}

/* == grid == */
.d-grid {
    display : grid;
}

.grid, .row {
    display               : grid;
    grid-template-columns : repeat(12, 1fr);
    overflow              : hidden;
    gap                   : var(--grid-gap);
    /*padding               : var(--grid-padding);*/
    align-items           : start;
}

.grid.items-nowrap > * {
    white-space : nowrap;
}

.grid.gap, .row.gap {
    gap : var(--grid-gap);
}

.grid.no-gap, .row.no-gap, .grid.dense {
    gap : 0;
}

.grid.inner-gap, .row.inner-gap {
    padding : var(--grid-gap);
}

.inner-gap .row {
    padding : var(--grid-gap);
}

.row.single {
    grid-template-columns : 1fr;
}

.row > div{
    overflow: hidden;
}

.grid.evenly,.row.evenly {
    grid-template-columns : repeat(auto-fit, minmax(0, 1fr));
}

/* Golden ratio */
.row.golden-ratio.long-right{grid-template-columns: 1fr 1.618fr;}
.row.golden-ratio.long-left{grid-template-columns: 1.618fr 1fr;}

/* Individual grid sizes */
.row.grid-1{grid-template-columns: 1fr;}
.row.grid-2{grid-template-columns: repeat(2, 1fr);}
.row.grid-3{grid-template-columns: repeat(3, 1fr);}
.row.grid-4{grid-template-columns: repeat(4, 1fr);}
.row.grid-5{grid-template-columns: repeat(5, 1fr);}
.row.grid-6{grid-template-columns: repeat(6, 1fr);}
.row.grid-7{grid-template-columns: repeat(7, 1fr);}
.row.grid-8{grid-template-columns: repeat(8, 1fr);}
.row.grid-9{grid-template-columns: repeat(9, 1fr);}
.row.grid-10{grid-template-columns:repeat(10, 1fr);}
.row.grid-12{grid-template-columns:repeat(12, 1fr);}
.row.grid-16{grid-template-columns:repeat(16, 1fr);}
.row.grid-20{grid-template-columns:repeat(20, 1fr);}
.row.grid-24{grid-template-columns:repeat(24, 1fr);}
.row.grid-32{grid-template-columns:repeat(32, 1fr);}
.row.grid-40{grid-template-columns:repeat(40, 1fr);}
.row.grid-48{grid-template-columns:repeat(48, 1fr);}
.row.grid-80{grid-template-columns:repeat(80, 1fr);}
.row.grid-100{grid-template-columns:repeat(100, 1fr);}

/* Grid presets */
.row.grid-2-8{grid-template-columns: 2fr 8fr;}
.row.grid-8-2{grid-template-columns: 8fr 2fr;}
.row.grid-3-6{grid-template-columns: 3fr 6fr;}
.row.grid-6-3{grid-template-columns: 6fr 3fr;}
.row.grid-3-7{grid-template-columns: 3fr 7fr;}
.row.grid-7-3{grid-template-columns: 7fr 3fr;}
.row.grid-4-6{grid-template-columns: 4fr 6fr;}
.row.grid-6-4{grid-template-columns: 6fr 4fr;}
.row.grid-1-3-1{grid-template-columns: 1fr 3fr 1fr;}
.row.grid-2-4-2{grid-template-columns: 2fr 4fr 2fr;}
.row.grid-4-2-4{grid-template-columns: 4fr 2fr 4fr;}

/* Grid cells */
.row .col-1{grid-column: span 1;}
.row .col-2{grid-column: span 2;}
.row .col-3{grid-column: span 3;}
.row .col-4{grid-column: span 4;}
.row .col-5{grid-column: span 5;}
.row .col-6{grid-column: span 6;}
.row .col-7{grid-column: span 7;}
.row .col-8{grid-column: span 8;}
.row .col-9{grid-column: span 9;}
.row .col-10{grid-column: span 10;}
.row .col-11{grid-column: span 11;}
.row .col-12{grid-column: span 12;}

/* @todo grid cell offset

/* == boxes == */
/* CSS for boxes, modals, popups, tooltips, badges, alerts, ... */

.alert {
    display          : block;
    margin-top       : 1rem;
    margin-bottom    : 1rem;
    padding          : 0.75rem 1.25rem;
    background-color : var(--color-white);
    color            : var(--color-dark);
    border           : 1px solid rgba(0, 0, 0, 0.1);
}

.alert.small {
    padding : 0.5rem 0.75rem;
}

.alert.alert-primary {
    background-color : var(--color-primary);
    color            : var(--color-white);
}

.alert.alert-secondary {
    background-color : var(--color-secondary);
    color            : var(--color-white);
}

.alert.alert-tertiary {
    background-color : var(--color-tertiary);
    color            : var(--color-white);
}

.alert.alert-dark {
    background-color : var(--color-very-dark-gray);
    color            : var(--color-light-gray);
}

.alert.alert-light {
    background-color : var(--color-light-gray);
    color            : var(--color-very-dark-gray);
}

.alert.alert-info {
    background-color : var(--color-info);
    color            : var(--color-black-t8);
}

.alert.alert-success {
    background-color : var(--color-success);
    color            : var(--color-white);
}

.alert.alert-error,
.alert.alert-danger {
    background-color : var(--color-danger);
    color            : var(--color-white);
}

.alert.alert-warning {
    background-color : var(--color-warning);
    color            : var(--color-white);
}

/* Badges */

.badge {
    display          : inline-block;
    white-space      : nowrap;
    text-align       : center;
    padding          : 0.25em 0.5em;
    font-size        : 0.7em;
    line-height      : 1;
    vertical-align   : baseline;
    background-color : rgba(0, 0, 0, 0.75);
    color            : var(--color-white);
}

/* Breadcrumb */

.breadcrumb {
    display          : flex;
    flex-wrap        : wrap;
    padding          : 0.75rem 1rem;
    margin-bottom    : 1rem;
    list-style       : none;
    background-color : var(--color-light-gray);
}

.breadcrumb li:not(:first-child):before {
    display      : inline-block;
    content      : '/';
    margin-left  : 0.5rem;
    margin-right : 0.5rem;
}

/* Cards */

.card {
    /* @todo implement */
}


/* Modals */

/* The Modal (background) */
.modal {
    display          : none; /* Hidden by default */
    position         : fixed; /* Stay in place */
    z-index          : 999; /* Sit on top */
    left             : 0;
    top              : 0;
    width            : 100%; /* Full width */
    height           : 100%; /* Full height */
    overflow         : auto; /* Enable scroll if needed */
    background-color : rgb(0, 0, 0); /* Fallback color */
    background-color : rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    width              : 600px; /* Could be more or less, depending on screen size */
    max-width          : 100%;
    position           : relative;
    background-color   : #fefefe;
    margin             : 2vh auto;
    padding            : 0;
    /*border             : 1px solid rgba(0, 0, 0, 0.2);*/
    box-shadow         : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-name     : animatetop;
    animation-duration : 0.4s
}

/* The Close Button */
.close {
    position    : absolute;
    top         : 4px;
    right       : 8px;
    color       : rgba(0, 0, 0, 0.5);
    font-size   : 28px;
    line-height : 28px;
    font-weight : bold;
}

.close:hover,
.close:focus {
    color           : black;
    text-decoration : none;
    cursor          : pointer;
}

/* Modal Header */
.modal-header {
    padding          : 2px 16px;
    background-color : #5cb85c;
    color            : white;
    position         : relative;
}

/* Modal Body */
.modal-body {
    padding : 2px 16px;
}

/* Modal Footer */
.modal-footer {
    padding          : 2px 16px;
    background-color : #5cb85c;
    color            : white;
}

/* Add Animation */
@keyframes animatetop {
    from {
        top     : -300px;
        opacity : 0
    }
    to {
        top     : 0;
        opacity : 1
    }
}

/* == defaults == */
.container > div, .container > section, .container > article, .container > fieldset {
    /*padding : 1rem;*/
}

.container > div:not(:first-child), .container > section:not(:first-child), .container > article:not(:first-child), .container > fieldset:not(:first-child) {
    /*margin-top : 1rem;*/
}

.container > div:not(:last-child), .container > section:not(:last-child), .container > article:not(:last-child), .container > fieldset:not(:last-child) {
    /*margin-bottom : 1rem;*/
}

p {
    margin-top     : 0.25rem;
    margin-bottom  : 0.25rem;
    padding-top    : 0.25rem;
    padding-bottom : 0.25rem;
}

.tmp:empty {
    color   : #cc0022 !important;
    outline : 2px solid #cc0022;
}

.tmp:optional {
    /* input, select or textarea that is not required */
}

.tmp:placeholder-shown {

}

.tmp:valid {
    /* input, select or textarea that is valid */
}

.tmp::file-selector-button {

}

.tmp::first-letter {

}

.tmp::first-line {

}

.tmp::marker {
    /* ul li */
    content : '#';
}

.tmp span::selection {
    /* Selected text */
    background-color : rgba(0, 0, 0, 0.8);
    color            : var(--color-white);
}

.container.contents > article,
.container.contents > .row > div,
.container.contents > div:not(.row) {
    /*padding : 1.5rem;*/
}

.xhr-running .ajax-get,
.xhr-running .ajax-post,
.xhr-running .rc,
.xhr-running .submit,
.xhr-running form [name],
.xhr-running form [type="submit"] {
    /*transition       : all 250ms ease;*/
    transition-delay : 250ms;
    pointer-events   : none !important;
    opacity          : 0.5 !important;
    user-select      : none !important;
    tab-index        : -1 !important;
}


/* Markdown */
.markdown-container {

}

.markdown-container p,
.markdown-container pre {
    margin : 0.75rem 0;
}

/* Clipboard styles */
code.copyme {
    cursor   : pointer;
    position : relative;
}

code.copyme::after {
    content   : "📋";
    font-size : 13px;
    position  : absolute;
    top       : -8px;
    right     : -8px;
    opacity   : 0.1;
}

code.copyme:hover::after {
    opacity : 1;
}

code.element-copied {
    background-color : rgba(0, 0, 0, 0.9) !important;
    color            : rgba(255, 255, 255, 0.9) !important;
    outline          : 1px dashed rgba(0, 0, 0, 0.8) !important;
    outline-offset   : 1px;
}

/* == responsive/responsive == */
.responsive-test:after{display:block;color:#ffffff;background-color:#cc0022;font-size:12px;padding:4px 12px;border:none !important;border-radius:90px;position:fixed;top:8px;left:8px;opacity:0.9;z-index:90;content:'No Breakpoint (XXL)';}

/* XL */
@media all and (max-width : 1400px) {
    .responsive-test:after{content:'Breakpoint xl';}
    
    .xl-d-none,.xl-hide,.xl-hidden{display:none !important;}
    .xl-block{display: block;}
    .xl-inline-block{display:inline-block;}
    .xl-inline{display:inline;}
    
    .xl-clearfix{float:none;clear:both;}
    
    .xl-mx-auto{margin:0 auto;}
    .xl-full-width{width:100%;}
    
    .xl-disabled{pointer-events: none !important;opacity: 0.5 !important;}
    
    .xl-text-left{text-align:left;}
    .xl-text-right{text-align:right;}
    .xl-text-center{text-align: center;}
    .xl-text-justify{text-align:justify;}
    .xl-text-justify-all{text-align: justify-all;}
    
    .xl-p-0{padding:0;}
    .xl-px-0{padding-left:0;padding-right:0;}
    .xl-py-0{padding-top:0;padding-bottom:0;}
    .xl-pl-0{padding-left:0;}
    .xl-pt-0{padding-top:0;}
    .xl-pr-0{padding-right:0;}
    .xl-pb-0{padding-bottom:0;}
    
    .xl-m-0{margin:0;}
    .xl-mx-0{margin-left:0;margin-right:0;}
    .xl-my-0{margin-top:0;margin-bottom:0;}
    .xl-ml-0{margin-left:0;}
    .xl-mt-0{margin-top:0;}
    .xl-mr-0{margin-right:0;}
    .xl-mb-0{margin-bottom:0;}
    
}

/* LG */
@media all and (max-width : 1200px) {
    .responsive-test:after{content:'Breakpoint lg';}
    
    .lg-d-none,.lg-hide,.lg-hidden{display:none !important;}
    .lg-block{display: block;}
    .lg-inline-block{display:inline-block;}
    .lg-inline{display:inline;}
    
    .lg-clearfix{float:none;clear:both;}
    
    .lg-mx-auto{margin:0 auto;}
    .lg-full-width{width:100%;}
    
    .lg-disabled{pointer-events: none !important;opacity: 0.5 !important;}
    
    .lg-text-left{text-align:left;}
    .lg-text-right{text-align:right;}
    .lg-text-center{text-align: center;}
    .lg-text-justify{text-align:justify;}
    .lg-text-justify-all{text-align: justify-all;}
    
    .lg-p-0{padding:0;}
    .lg-px-0{padding-left:0;padding-right:0;}
    .lg-py-0{padding-top:0;padding-bottom:0;}
    .lg-pl-0{padding-left:0;}
    .lg-pt-0{padding-top:0;}
    .lg-pr-0{padding-right:0;}
    .lg-pb-0{padding-bottom:0;}
    
    .lg-m-0{margin:0;}
    .lg-mx-0{margin-left:0;margin-right:0;}
    .lg-my-0{margin-top:0;margin-bottom:0;}
    .lg-ml-0{margin-left:0;}
    .lg-mt-0{margin-top:0;}
    .lg-mr-0{margin-right:0;}
    .lg-mb-0{margin-bottom:0;}
    
}

/* MD */
@media all and (max-width : 992px) {
    .responsive-test:after{content:'Breakpoint md';}
    
    .md-d-none,.md-hide,.md-hidden{display:none !important;}
    .md-block{display: block;}
    .md-inline-block{display:inline-block;}
    .md-inline{display:inline;}
    
    .md-clearfix{float:none;clear:both;}
    
    .md-mx-auto{margin:0 auto;}
    .md-full-width{width:100%;}
    
    .md-disabled{pointer-events: none !important;opacity: 0.5 !important;}
    
    .md-text-left{text-align:left;}
    .md-text-right{text-align:right;}
    .md-text-center{text-align: center;}
    .md-text-justify{text-align:justify;}
    .md-text-justify-all{text-align: justify-all;}
    
    .md-p-0{padding:0;}
    .md-px-0{padding-left:0;padding-right:0;}
    .md-py-0{padding-top:0;padding-bottom:0;}
    .md-pl-0{padding-left:0;}
    .md-pt-0{padding-top:0;}
    .md-pr-0{padding-right:0;}
    .md-pb-0{padding-bottom:0;}
    
    .md-m-0{margin:0;}
    .md-mx-0{margin-left:0;margin-right:0;}
    .md-my-0{margin-top:0;margin-bottom:0;}
    .md-ml-0{margin-left:0;}
    .md-mt-0{margin-top:0;}
    .md-mr-0{margin-right:0;}
    .md-mb-0{margin-bottom:0;}
    
}

/* SM */
@media all and (max-width : 768px) {
    .responsive-test:after{content:'Breakpoint sm';}
    
    .sm-d-none,.sm-hide,.sm-hidden{display:none !important;}
    .sm-block{display: block;}
    .sm-inline-block{display:inline-block;}
    .sm-inline{display:inline;}
    
    .sm-clearfix{float:none;clear:both;}
    
    .sm-mx-auto{margin:0 auto;}
    .sm-full-width{width:100%;}
    
    .sm-disabled{pointer-events: none !important;opacity: 0.5 !important;}
    
    .sm-text-left{text-align:left;}
    .sm-text-right{text-align:right;}
    .sm-text-center{text-align: center;}
    .sm-text-justify{text-align:justify;}
    .sm-text-justify-all{text-align: justify-all;}
    
    .sm-p-0{padding:0;}
    .sm-px-0{padding-left:0;padding-right:0;}
    .sm-py-0{padding-top:0;padding-bottom:0;}
    .sm-pl-0{padding-left:0;}
    .sm-pt-0{padding-top:0;}
    .sm-pr-0{padding-right:0;}
    .sm-pb-0{padding-bottom:0;}
    
    .sm-m-0{margin:0;}
    .sm-mx-0{margin-left:0;margin-right:0;}
    .sm-my-0{margin-top:0;margin-bottom:0;}
    .sm-ml-0{margin-left:0;}
    .sm-mt-0{margin-top:0;}
    .sm-mr-0{margin-right:0;}
    .sm-mb-0{margin-bottom:0;}
    
}

/* XS */
@media all and (max-width : 576px) {
    .responsive-test:after{content:'Breakpoint xs';}
    
    .xs-d-none,.xs-hide,.xs-hidden{display:none !important;}
    .xs-block{display: block;}
    .xs-inline-block{display:inline-block;}
    .xs-inline{display:inline;}
    
    .xs-clearfix{float:none;clear:both;}
    
    .xs-mx-auto{margin:0 auto;}
    .xs-full-width{width:100%;}
    
    .xs-disabled{pointer-events: none !important;opacity: 0.5 !important;}
    
    .xs-text-left{text-align:left;}
    .xs-text-right{text-align:right;}
    .xs-text-center{text-align: center;}
    .xs-text-justify{text-align:justify;}
    .xs-text-justify-all{text-align: justify-all;}
    
    .xs-p-0{padding:0;}
    .xs-px-0{padding-left:0;padding-right:0;}
    .xs-py-0{padding-top:0;padding-bottom:0;}
    .xs-pl-0{padding-left:0;}
    .xs-pt-0{padding-top:0;}
    .xs-pr-0{padding-right:0;}
    .xs-pb-0{padding-bottom:0;}
    
    .xs-m-0{margin:0;}
    .xs-mx-0{margin-left:0;margin-right:0;}
    .xs-my-0{margin-top:0;margin-bottom:0;}
    .xs-ml-0{margin-left:0;}
    .xs-mt-0{margin-top:0;}
    .xs-mr-0{margin-right:0;}
    .xs-mb-0{margin-bottom:0;}
    
    form .btn, form button, form input, form select, form textarea, form .w-auto {
        display : block !important;
        width   : 100% !important;
    }
    
}

/* == responsive/grid == */
/* XL */
@media screen and (min-width: 1401px) {
    
    .row.xxl-evenly{grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
    
    /* Grid-Gaps */
    .row.xxl-no-gap{gap: 0;}
    
    /* Golden ratio/cut */
    .row.xxl-golden-ratio.long-right{grid-template-columns: 1fr 1.618fr;}
    .row.xxl-golden-ratio.long-left{grid-template-columns: 1.618fr 1fr;}
    
    /* Individuelle Einteilungen */
    .row.xxl-grid-2{grid-template-columns: repeat(2, 1fr);}
    .row.xxl-grid-3{grid-template-columns: repeat(3, 1fr);}
    .row.xxl-grid-4{grid-template-columns: repeat(4, 1fr);}
    .row.xxl-grid-5{grid-template-columns: repeat(5, 1fr);}
    .row.xxl-grid-6{grid-template-columns: repeat(6, 1fr);}
    .row.xxl-grid-7{grid-template-columns: repeat(7, 1fr);}
    .row.xxl-grid-8{grid-template-columns: repeat(8, 1fr);}
    .row.xxl-grid-9{grid-template-columns: repeat(9, 1fr);}
    .row.xxl-grid-10{grid-template-columns: repeat(10, 1fr);}
    .row.xxl-grid-12{grid-template-columns: repeat(12, 1fr);}
    .row.xxl-grid-16{grid-template-columns: repeat(16, 1fr);}
    .row.xxl-grid-20{grid-template-columns: repeat(20, 1fr);}
    .row.xxl-grid-24{grid-template-columns:repeat(24, 1fr);}
    .row.xxl-grid-32{grid-template-columns:repeat(32, 1fr);}
    .row.xxl-grid-40{grid-template-columns:repeat(40, 1fr);}
    .row.xxl-grid-48{grid-template-columns:repeat(48, 1fr);}
    .row.xxl-grid-80{grid-template-columns:repeat(80, 1fr);}
    .row.xxl-grid-100{grid-template-columns:repeat(100, 1fr);}
    
    /* Grid presets */
    .row.xxl-grid-2-8{grid-template-columns: 2fr 8fr;}
    .row.xxl-grid-8-2{grid-template-columns: 8fr 2fr;}
    .row.xxl-grid-3-6{grid-template-columns: 3fr 6fr;}
    .row.xxl-grid-6-3{grid-template-columns: 6fr 3fr;}
    .row.xxl-grid-3-7{grid-template-columns: 3fr 7fr;}
    .row.xxl-grid-7-3{grid-template-columns: 7fr 3fr;}
    .row.xxl-grid-4-6{grid-template-columns: 4fr 6fr;}
    .row.xxl-grid-6-4{grid-template-columns: 6fr 4fr;}
    .row.xxl-grid-1-3-1{grid-template-columns: 1fr 3fr 1fr;}
    .row.xxl-grid-2-4-2{grid-template-columns: 2fr 4fr 2fr;}
    .row.xxl-grid-4-2-4{grid-template-columns: 4fr 2fr 4fr;}
    
    /* Spaltenbreiten individuell bestimmen */
    .row .col-xxl-1{grid-column: span 1;}
    .row .col-xxl-2{grid-column: span 2;}
    .row .col-xxl-3{grid-column: span 3;}
    .row .col-xxl-4{grid-column: span 4;}
    .row .col-xxl-5{grid-column: span 5;}
    .row .col-xxl-6{grid-column: span 6;}
    .row .col-xxl-7{grid-column: span 7;}
    .row .col-xxl-8{grid-column: span 8;}
    .row .col-xxl-9{grid-column: span 9;}
    .row .col-xxl-10{grid-column: span 10;}
    .row .col-xxl-11{grid-column: span 11;}
    .row .col-xxl-12{grid-column: span 12;}
}

/* XL */
@media screen and (max-width: 1400px) {
    
    .row.xl-evenly{grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
    
    /* Grid-Gaps */
    .row.xl-no-gap{gap: 0;}
    
    /* Golden ratio/cut */
    .row.xl-golden-ratio.long-right{grid-template-columns: 1fr 1.618fr;}
    .row.xl-golden-ratio.long-left{grid-template-columns: 1.618fr 1fr;}
    
    /* Individuelle Einteilungen */
    .row.xl-grid-2{grid-template-columns: repeat(2, 1fr);}
    .row.xl-grid-3{grid-template-columns: repeat(3, 1fr);}
    .row.xl-grid-4{grid-template-columns: repeat(4, 1fr);}
    .row.xl-grid-5{grid-template-columns: repeat(5, 1fr);}
    .row.xl-grid-6{grid-template-columns: repeat(6, 1fr);}
    .row.xl-grid-7{grid-template-columns: repeat(7, 1fr);}
    .row.xl-grid-8{grid-template-columns: repeat(8, 1fr);}
    .row.xl-grid-9{grid-template-columns: repeat(9, 1fr);}
    .row.xl-grid-10{grid-template-columns: repeat(10, 1fr);}
    .row.xl-grid-12{grid-template-columns: repeat(12, 1fr);}
    .row.xl-grid-16{grid-template-columns: repeat(16, 1fr);}
    .row.xl-grid-20{grid-template-columns: repeat(20, 1fr);}
    .row.xl-grid-24{grid-template-columns:repeat(24, 1fr);}
    .row.xl-grid-32{grid-template-columns:repeat(32, 1fr);}
    .row.xl-grid-40{grid-template-columns:repeat(40, 1fr);}
    .row.xl-grid-48{grid-template-columns:repeat(48, 1fr);}
    .row.xl-grid-80{grid-template-columns:repeat(80, 1fr);}
    .row.xl-grid-100{grid-template-columns:repeat(100, 1fr);}
    
    /* Grid presets */
    .row.xl-grid-2-8{grid-template-columns: 2fr 8fr;}
    .row.xl-grid-8-2{grid-template-columns: 8fr 2fr;}
    .row.xl-grid-3-6{grid-template-columns: 3fr 6fr;}
    .row.xl-grid-6-3{grid-template-columns: 6fr 3fr;}
    .row.xl-grid-3-7{grid-template-columns: 3fr 7fr;}
    .row.xl-grid-7-3{grid-template-columns: 7fr 3fr;}
    .row.xl-grid-4-6{grid-template-columns: 4fr 6fr;}
    .row.xl-grid-6-4{grid-template-columns: 6fr 4fr;}
    .row.xl-grid-1-3-1{grid-template-columns: 1fr 3fr 1fr;}
    .row.xl-grid-2-4-2{grid-template-columns: 2fr 4fr 2fr;}
    .row.xl-grid-4-2-4{grid-template-columns: 4fr 2fr 4fr;}
    
    /* Spaltenbreiten individuell bestimmen */
    .row .col-xl-1{grid-column: span 1;}
    .row .col-xl-2{grid-column: span 2;}
    .row .col-xl-3{grid-column: span 3;}
    .row .col-xl-4{grid-column: span 4;}
    .row .col-xl-5{grid-column: span 5;}
    .row .col-xl-6{grid-column: span 6;}
    .row .col-xl-7{grid-column: span 7;}
    .row .col-xl-8{grid-column: span 8;}
    .row .col-xl-9{grid-column: span 9;}
    .row .col-xl-10{grid-column: span 10;}
    .row .col-xl-11{grid-column: span 11;}
    .row .col-xl-12{grid-column: span 12;}
}

/* LG */
@media screen and (max-width: 1200px) {
    
    .row.lg-evenly{grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
    
    /* Grid-Gaps */
    .row.lg-gap-0{gap: 0;}
    .row.lg-gap{gap: var(--grid-gap);}
    
    /* Golden ratio/cut */
    .row.lg-golden-ratio.long-right{grid-template-columns: 1fr 1.618fr;}
    .row.lg-golden-ratio.long-left{grid-template-columns: 1.618fr 1fr;}
    
    /* Individuelle Einteilungen */
    .row.lg-grid-2{grid-template-columns: repeat(2, 1fr);}
    .row.lg-grid-3{grid-template-columns: repeat(3, 1fr);}
    .row.lg-grid-4{grid-template-columns: repeat(4, 1fr);}
    .row.lg-grid-5{grid-template-columns: repeat(5, 1fr);}
    .row.lg-grid-6{grid-template-columns: repeat(6, 1fr);}
    .row.lg-grid-7{grid-template-columns: repeat(7, 1fr);}
    .row.lg-grid-8{grid-template-columns: repeat(8, 1fr);}
    .row.lg-grid-9{grid-template-columns: repeat(9, 1fr);}
    .row.lg-grid-10{grid-template-columns: repeat(10, 1fr);}
    .row.lg-grid-12{grid-template-columns: repeat(12, 1fr);}
    .row.lg-grid-16{grid-template-columns: repeat(16, 1fr);}
    .row.lg-grid-20{grid-template-columns: repeat(20, 1fr);}
    .row.lg-grid-24{grid-template-columns:repeat(24, 1fr);}
    .row.lg-grid-32{grid-template-columns:repeat(32, 1fr);}
    .row.lg-grid-40{grid-template-columns:repeat(40, 1fr);}
    .row.lg-grid-48{grid-template-columns:repeat(48, 1fr);}
    .row.lg-grid-80{grid-template-columns:repeat(80, 1fr);}
    .row.lg-grid-100{grid-template-columns:repeat(100, 1fr);}
    
    /* Grid presets */
    .row.lg-grid-2-8{grid-template-columns: 2fr 8fr;}
    .row.lg-grid-8-2{grid-template-columns: 8fr 2fr;}
    .row.lg-grid-3-6{grid-template-columns: 3fr 6fr;}
    .row.lg-grid-6-3{grid-template-columns: 6fr 3fr;}
    .row.lg-grid-3-7{grid-template-columns: 3fr 7fr;}
    .row.lg-grid-7-3{grid-template-columns: 7fr 3fr;}
    .row.lg-grid-4-6{grid-template-columns: 4fr 6fr;}
    .row.lg-grid-6-4{grid-template-columns: 6fr 4fr;}
    .row.lg-grid-1-3-1{grid-template-columns: 1fr 3fr 1fr;}
    .row.lg-grid-2-4-2{grid-template-columns: 2fr 4fr 2fr;}
    .row.lg-grid-4-2-4{grid-template-columns: 4fr 2fr 4fr;}
    
    /* Spaltenbreiten individuell bestimmen */
    .row .col-lg-1{grid-column: span 1;}
    .row .col-lg-2{grid-column: span 2;}
    .row .col-lg-3{grid-column: span 3;}
    .row .col-lg-4{grid-column: span 4;}
    .row .col-lg-5{grid-column: span 5;}
    .row .col-lg-6{grid-column: span 6;}
    .row .col-lg-7{grid-column: span 7;}
    .row .col-lg-8{grid-column: span 8;}
    .row .col-lg-9{grid-column: span 9;}
    .row .col-lg-10{grid-column: span 10;}
    .row .col-lg-11{grid-column: span 11;}
    .row .col-lg-12{grid-column: span 12;}
}

/* MD */
@media screen and (max-width: 992px) {
    
    .row.md-evenly{grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
    
    /* Grid-Gaps */
    .row.md-no-gap{gap: 0;}
    
    /* Golden ratio/cut */
    .row.md-golden-ratio.long-right{grid-template-columns: 1fr 1.618fr;}
    .row.md-golden-ratio.long-left{grid-template-columns: 1.618fr 1fr;}
    
    /* Individuelle Einteilungen */
    .row.md-grid-1{grid-template-columns: repeat(1, 1fr);}
    .row.md-grid-2{grid-template-columns: repeat(2, 1fr);}
    .row.md-grid-3{grid-template-columns: repeat(3, 1fr);}
    .row.md-grid-4{grid-template-columns: repeat(4, 1fr);}
    .row.md-grid-5{grid-template-columns: repeat(5, 1fr);}
    .row.md-grid-6{grid-template-columns: repeat(6, 1fr);}
    .row.md-grid-7{grid-template-columns: repeat(7, 1fr);}
    .row.md-grid-8{grid-template-columns: repeat(8, 1fr);}
    .row.md-grid-9{grid-template-columns: repeat(9, 1fr);}
    .row.md-grid-10{grid-template-columns: repeat(10, 1fr);}
    .row.md-grid-12{grid-template-columns: repeat(12, 1fr);}
    .row.md-grid-16{grid-template-columns: repeat(16, 1fr);}
    .row.md-grid-20{grid-template-columns: repeat(20, 1fr);}
    .row.md-grid-24{grid-template-columns:repeat(24, 1fr);}
    .row.md-grid-32{grid-template-columns:repeat(32, 1fr);}
    .row.md-grid-40{grid-template-columns:repeat(40, 1fr);}
    .row.md-grid-48{grid-template-columns:repeat(48, 1fr);}
    .row.md-grid-80{grid-template-columns:repeat(80, 1fr);}
    .row.md-grid-100{grid-template-columns:repeat(100, 1fr);}
    
    /* Grid presets */
    .row.md-grid-2-8{grid-template-columns: 2fr 8fr;}
    .row.md-grid-8-2{grid-template-columns: 8fr 2fr;}
    .row.md-grid-3-6{grid-template-columns: 3fr 6fr;}
    .row.md-grid-6-3{grid-template-columns: 6fr 3fr;}
    .row.md-grid-3-7{grid-template-columns: 3fr 7fr;}
    .row.md-grid-7-3{grid-template-columns: 7fr 3fr;}
    .row.md-grid-4-6{grid-template-columns: 4fr 6fr;}
    .row.md-grid-6-4{grid-template-columns: 6fr 4fr;}
    .row.md-grid-1-3-1{grid-template-columns: 1fr 3fr 1fr;}
    .row.md-grid-2-4-2{grid-template-columns: 2fr 4fr 2fr;}
    .row.md-grid-4-2-4{grid-template-columns: 4fr 2fr 4fr;}
    
    /* Spaltenbreiten individuell bestimmen */
    .row .col-md-1{grid-column: span 1;}
    .row .col-md-2{grid-column: span 2;}
    .row .col-md-3{grid-column: span 3;}
    .row .col-md-4{grid-column: span 4;}
    .row .col-md-5{grid-column: span 5;}
    .row .col-md-6{grid-column: span 6;}
    .row .col-md-7{grid-column: span 7;}
    .row .col-md-8{grid-column: span 8;}
    .row .col-md-9{grid-column: span 9;}
    .row .col-md-10{grid-column: span 10;}
    .row .col-md-11{grid-column: span 11;}
    .row .col-md-12{grid-column: span 12;}
}

/* SM */
@media all and (max-width: 768px){
    
    .row.sm-evenly{grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
    
    /* Grid-Gaps */
    .row.sm-no-gap{gap: 0;}
    
    /* Golden ratio/cut */
    .row.sm-grid-golden-ratio.long-right{grid-template-columns: 1fr 1.618fr;}
    .row.sm-grid-golden-ratio.long-left{grid-template-columns: 1.618fr 1fr;}
    
    /* Individuelle Einteilungen */
    .row.sm-grid-2{grid-template-columns: repeat(2, 1fr);}
    .row.sm-grid-3{grid-template-columns: repeat(3, 1fr);}
    .row.sm-grid-4{grid-template-columns: repeat(4, 1fr);}
    .row.sm-grid-5{grid-template-columns: repeat(5, 1fr);}
    .row.sm-grid-6{grid-template-columns: repeat(6, 1fr);}
    .row.sm-grid-7{grid-template-columns: repeat(7, 1fr);}
    .row.sm-grid-8{grid-template-columns: repeat(8, 1fr);}
    .row.sm-grid-9{grid-template-columns: repeat(9, 1fr);}
    .row.sm-grid-10{grid-template-columns: repeat(10, 1fr);}
    .row.sm-grid-12{grid-template-columns: repeat(12, 1fr);}
    .row.sm-grid-16{grid-template-columns: repeat(16, 1fr);}
    .row.sm-grid-20{grid-template-columns: repeat(20, 1fr);}
    .row.sm-grid-24{grid-template-columns:repeat(24, 1fr);}
    .row.sm-grid-32{grid-template-columns:repeat(32, 1fr);}
    .row.sm-grid-40{grid-template-columns:repeat(40, 1fr);}
    .row.sm-grid-48{grid-template-columns:repeat(48, 1fr);}
    .row.sm-grid-80{grid-template-columns:repeat(80, 1fr);}
    .row.sm-grid-100{grid-template-columns:repeat(100, 1fr);}
    
    /* Grid presets */
    .row.sm-grid-2-8{grid-template-columns: 2fr 8fr;}
    .row.sm-grid-8-2{grid-template-columns: 8fr 2fr;}
    .row.sm-grid-3-6{grid-template-columns: 3fr 6fr;}
    .row.sm-grid-6-3{grid-template-columns: 6fr 3fr;}
    .row.sm-grid-3-7{grid-template-columns: 3fr 7fr;}
    .row.sm-grid-7-3{grid-template-columns: 7fr 3fr;}
    .row.sm-grid-4-6{grid-template-columns: 4fr 6fr;}
    .row.sm-grid-6-4{grid-template-columns: 6fr 4fr;}
    .row.sm-grid-1-3-1{grid-template-columns: 1fr 3fr 1fr;}
    .row.sm-grid-2-4-2{grid-template-columns: 2fr 4fr 2fr;}
    .row.sm-grid-4-2-4{grid-template-columns: 4fr 2fr 4fr;}
    
    /* Spaltenbreiten individuell bestimmen */
    .row .col-sm-1{grid-column: span 1;}
    .row .col-sm-2{grid-column: span 2;}
    .row .col-sm-3{grid-column: span 3;}
    .row .col-sm-4{grid-column: span 4;}
    .row .col-sm-5{grid-column: span 5;}
    .row .col-sm-6{grid-column: span 6;}
    .row .col-sm-7{grid-column: span 7;}
    .row .col-sm-8{grid-column: span 8;}
    .row .col-sm-9{grid-column: span 9;}
    .row .col-sm-10{grid-column: span 10;}
    .row .col-sm-11{grid-column: span 11;}
    .row .col-sm-12{grid-column: span 12;}
}

/* XS */
@media screen and (max-width: 576px) {
    
    .row.xs-evenly{grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
    
    /* Grid-Gaps */
    .row.xs-no-gap{gap: 0;}
    
    /* Golden ratio/cut */
    .row.xs-golden-ratio.long-right{grid-template-columns: 1fr 1.618fr;}
    .row.xs-golden-ratio.long-left{grid-template-columns: 1.618fr 1fr;}
    
    /* Individuelle Einteilungen */
    .row.xs-grid-2{grid-template-columns: repeat(2, 1fr);}
    .row.xs-grid-3{grid-template-columns: repeat(3, 1fr);}
    .row.xs-grid-4{grid-template-columns: repeat(4, 1fr);}
    .row.xs-grid-5{grid-template-columns: repeat(5, 1fr);}
    .row.xs-grid-6{grid-template-columns: repeat(6, 1fr);}
    .row.xs-grid-7{grid-template-columns: repeat(7, 1fr);}
    .row.xs-grid-8{grid-template-columns: repeat(8, 1fr);}
    .row.xs-grid-9{grid-template-columns: repeat(9, 1fr);}
    .row.xs-grid-10{grid-template-columns: repeat(10, 1fr);}
    .row.xs-grid-12{grid-template-columns: repeat(12, 1fr);}
    .row.xs-grid-16{grid-template-columns: repeat(16, 1fr);}
    .row.xs-grid-20{grid-template-columns: repeat(20, 1fr);}
    .row.xs-grid-24{grid-template-columns:repeat(24, 1fr);}
    .row.xs-grid-32{grid-template-columns:repeat(32, 1fr);}
    .row.xs-grid-40{grid-template-columns:repeat(40, 1fr);}
    .row.xs-grid-48{grid-template-columns:repeat(48, 1fr);}
    .row.xs-grid-80{grid-template-columns:repeat(80, 1fr);}
    .row.xs-grid-100{grid-template-columns:repeat(100, 1fr);}
    
    /* Grid presets */
    .row.xs-grid-2-8{grid-template-columns: 2fr 8fr;}
    .row.xs-grid-8-2{grid-template-columns: 8fr 2fr;}
    .row.xs-grid-3-6{grid-template-columns: 3fr 6fr;}
    .row.xs-grid-6-3{grid-template-columns: 6fr 3fr;}
    .row.xs-grid-3-7{grid-template-columns: 3fr 7fr;}
    .row.xs-grid-7-3{grid-template-columns: 7fr 3fr;}
    .row.xs-grid-4-6{grid-template-columns: 4fr 6fr;}
    .row.xs-grid-6-4{grid-template-columns: 6fr 4fr;}
    .row.xs-grid-1-3-1{grid-template-columns: 1fr 3fr 1fr;}
    .row.xs-grid-2-4-2{grid-template-columns: 2fr 4fr 2fr;}
    .row.xs-grid-4-2-4{grid-template-columns: 4fr 2fr 4fr;}
    
    /* Spaltenbreiten individuell bestimmen */
    .row .col-xs-1{grid-column: span 1;}
    .row .col-xs-2{grid-column: span 2;}
    .row .col-xs-3{grid-column: span 3;}
    .row .col-xs-4{grid-column: span 4;}
    .row .col-xs-5{grid-column: span 5;}
    .row .col-xs-6{grid-column: span 6;}
    .row .col-xs-7{grid-column: span 7;}
    .row .col-xs-8{grid-column: span 8;}
    .row .col-xs-9{grid-column: span 9;}
    .row .col-xs-10{grid-column: span 10;}
    .row .col-xs-11{grid-column: span 11;}
    .row .col-xs-12{grid-column: span 12;}
}


/* XXS */
@media screen and (max-width: 480px) {
    
    .row.xxs-evenly{grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
    
    /* Grid-Gaps */
    .row.xxs-no-gap{gap: 0;}
    
    /* Golden ratio/cut */
    .row.xxs-golden-ratio.long-right{grid-template-columns: 1fr 1.618fr;}
    .row.xxs-golden-ratio.long-left{grid-template-columns: 1.618fr 1fr;}
    
    /* Individuelle Einteilungen */
    .row.xxs-grid-2{grid-template-columns: repeat(2, 1fr);}
    .row.xxs-grid-3{grid-template-columns: repeat(3, 1fr);}
    .row.xxs-grid-4{grid-template-columns: repeat(4, 1fr);}
    .row.xxs-grid-5{grid-template-columns: repeat(5, 1fr);}
    .row.xxs-grid-6{grid-template-columns: repeat(6, 1fr);}
    .row.xxs-grid-7{grid-template-columns: repeat(7, 1fr);}
    .row.xxs-grid-8{grid-template-columns: repeat(8, 1fr);}
    .row.xxs-grid-9{grid-template-columns: repeat(9, 1fr);}
    .row.xxs-grid-10{grid-template-columns: repeat(10, 1fr);}
    .row.xxs-grid-12{grid-template-columns: repeat(12, 1fr);}
    .row.xxs-grid-16{grid-template-columns: repeat(16, 1fr);}
    .row.xxs-grid-20{grid-template-columns: repeat(20, 1fr);}
    .row.xxs-grid-24{grid-template-columns:repeat(24, 1fr);}
    .row.xxs-grid-32{grid-template-columns:repeat(32, 1fr);}
    .row.xxs-grid-40{grid-template-columns:repeat(40, 1fr);}
    .row.xxs-grid-48{grid-template-columns:repeat(48, 1fr);}
    .row.xxs-grid-80{grid-template-columns:repeat(80, 1fr);}
    .row.xxs-grid-100{grid-template-columns:repeat(100, 1fr);}
    
    /* Grid presets */
    .row.xxs-grid-2-8{grid-template-columns: 2fr 8fr;}
    .row.xxs-grid-8-2{grid-template-columns: 8fr 2fr;}
    .row.xxs-grid-3-6{grid-template-columns: 3fr 6fr;}
    .row.xxs-grid-6-3{grid-template-columns: 6fr 3fr;}
    .row.xxs-grid-3-7{grid-template-columns: 3fr 7fr;}
    .row.xxs-grid-7-3{grid-template-columns: 7fr 3fr;}
    .row.xxs-grid-4-6{grid-template-columns: 4fr 6fr;}
    .row.xxs-grid-6-4{grid-template-columns: 6fr 4fr;}
    .row.xxs-grid-1-3-1{grid-template-columns: 1fr 3fr 1fr;}
    .row.xxs-grid-2-4-2{grid-template-columns: 2fr 4fr 2fr;}
    .row.xxs-grid-4-2-4{grid-template-columns: 4fr 2fr 4fr;}
    
    /* Spaltenbreiten individuell bestimmen */
    .row .col-xxs-1{grid-column: span 1;}
    .row .col-xxs-2{grid-column: span 2;}
    .row .col-xxs-3{grid-column: span 3;}
    .row .col-xxs-4{grid-column: span 4;}
    .row .col-xxs-5{grid-column: span 5;}
    .row .col-xxs-6{grid-column: span 6;}
    .row .col-xxs-7{grid-column: span 7;}
    .row .col-xxs-8{grid-column: span 8;}
    .row .col-xxs-9{grid-column: span 9;}
    .row .col-xxs-10{grid-column: span 10;}
    .row .col-xxs-11{grid-column: span 11;}
    .row .col-xxs-12{grid-column: span 12;}
}