@public-ui/themes 3.0.4-fa8bcfa66607a9847a1359c0ca7d77fe673660d7.0 → 3.0.4-rc.1

package/dist/index.mjs

@@ -461,8 +461,34 @@ var TagEnum;
     TagEnum[TagEnum["tree"] = 51] = "tree";
     TagEnum[TagEnum["tree-item"] = 52] = "tree-item";
 })(TagEnum || (TagEnum = {}));
-let DEV_MODE = false;
-const getDevMode = () => DEV_MODE === true;
+const MODES = ['development', 'production', 'test'];
+let runtimeMode = 'production';
+const setRuntimeMode = (mode) => {
+    try {
+        if (MODES.includes(mode)) {
+            runtimeMode = mode;
+        }
+        else {
+            throw new Error(`Invalid NODE_ENV value: ${mode}. Expected one of ${MODES.join(', ')}.`);
+        }
+    }
+    catch (e) {
+        runtimeMode = 'production';
+    }
+};
+const getInitialMode = () => {
+    try {
+        const nodeEnv = typeof process !== 'undefined' && process.env ? process.env['NODE_ENV'] : undefined;
+        if (nodeEnv && MODES.includes(nodeEnv)) {
+            return nodeEnv;
+        }
+    }
+    catch (e) {
+    }
+    return 'production';
+};
+setRuntimeMode(getInitialMode());
+const isDevMode = () => runtimeMode === 'development';
 const LOG_STYLE = 'color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000';
 const mapToArray = (msg) => {
     return Array.isArray(msg) ? msg : [msg];
@@ -481,29 +507,28 @@ const handleClassifier = (label, classifier) => {
 const getShield = (label, options) => {
     return [handleClassifier(label, options === null || options === void 0 ? void 0 : options.classifier), `${LOG_STYLE};${(options === null || options === void 0 ? void 0 : options.overwriteStyle) || ''}`];
 };
-const isDevModeOrForceLog = (devMode, forceLog) => devMode() || forceLog === true;
+const isDevModeOrForceLog = (forceLog) => isDevMode() || forceLog === true;
 class Logger {
-    constructor(label, devMode) {
+    constructor(label) {
         this.label = label;
-        this.devMode = devMode;
     }
     debug(msg, options) {
-        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
             console.debug(...getShield(this.label, options), ...mapToArray(msg));
         }
     }
     info(msg, options) {
-        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
             console.info(...getShield(this.label, options), ...mapToArray(msg));
         }
     }
     trace(msg, options) {
-        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
             console.trace(...getShield(this.label, options), ...mapToArray(msg));
         }
     }
     warn(msg, options) {
-        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
             console.warn(...getShield(this.label, options), ...mapToArray(msg));
         }
     }
@@ -511,12 +536,12 @@ class Logger {
         console.error(...getShield(this.label, options), ...mapToArray(msg));
     }
     throw(msg, options) {
-        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
             throw new Error(...getShield(this.label, options), ...mapToArray(msg));
         }
     }
 }
-const Log = new Logger('KoliBri', getDevMode);
+const Log = new Logger('KoliBri');
 const devCache = new Set();
 const devHint = (msg, options) => {
     if (devCache.has(msg) === false || false) {
@@ -855,14 +880,6 @@ function requireCjs () {
 }
 
 requireCjs();
-
-let processEnv = 'development';
-try {
-    processEnv = "production";
-}
-catch (e) {
-    processEnv = 'production';
-}
 new Event('StateChange');
 
 /*!
@@ -1151,11 +1168,11 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
 BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
 BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
 
-var css_248z$1$ = "/* forward the rem function */\n@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, 5px);\n    --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n    --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n    --border-width: var(--kolibri-border-width, 1px);\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n    --color-danger: var(--kolibri-color-danger, #b4003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  :host {\n    font-size: var(--font-size);\n  }\n  :host * {\n    font-family: var(--font-family);\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    cursor: pointer;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-headline {\n    font-weight: 700;\n  }\n  .kol-tooltip__floating {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip__arrow {\n    background-color: var(--color-light);\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip__content {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    color: var(--color-text);\n    background-color: var(--color-mute-variant);\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
+var css_248z$1$ = "/* forward the rem function */\n@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, 5px);\n    --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n    --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n    --border-width: var(--kolibri-border-width, 1px);\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n    --color-danger: var(--kolibri-color-danger, #b4003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  :host {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    cursor: pointer;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-headline {\n    font-weight: 700;\n  }\n  .kol-tooltip__floating {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip__arrow {\n    background-color: var(--color-light);\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip__content {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    color: var(--color-text);\n    background-color: var(--color-mute-variant);\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
 
 var css_248z$1_ = "/* forward the rem function */\n@layer kol-theme-component {\n  abbr {\n    text-decoration: none;\n    border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$1Z = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-accordion {\n    display: grid;\n    width: 100%;\n    height: 100%;\n  }\n  .kol-accordion__content {\n    margin: 0;\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    padding-left: 2.25em;\n  }\n  .kol-accordion__heading {\n    margin: 0;\n  }\n  .kol-accordion__heading-button {\n    border-radius: var(--border-radius);\n    display: flex;\n    min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button:focus-within {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n  .kol-accordion__heading-button:focus-within .kol-button {\n    outline: 0;\n  }\n  .kol-accordion__heading-button .kol-span__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: baseline center;\n    text-align: left;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    line-height: 1.1;\n  }\n  .kol-accordion__heading-button .kol-button {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-button :focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    color: var(--color-primary);\n  }\n}";
+var css_248z$1Z = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-accordion {\n    display: grid;\n    width: 100%;\n    height: 100%;\n  }\n  .kol-accordion:focus-within {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-accordion__content {\n    margin: 0;\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    padding-left: 2.25em;\n  }\n  .kol-accordion__heading {\n    margin: 0;\n  }\n  .kol-accordion__heading-button {\n    border-radius: var(--border-radius);\n    display: flex;\n    min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n  }\n  .kol-accordion__heading-button:focus-within .kol-button {\n    outline: 0;\n  }\n  .kol-accordion__heading-button .kol-span__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: baseline center;\n    text-align: left;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    line-height: 1.1;\n  }\n  .kol-accordion__heading-button .kol-button {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-button :focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    color: var(--color-primary);\n  }\n}";
 
 var css_248z$1Y = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
@@ -1167,13 +1184,13 @@ var css_248z$1V = "/* forward the rem function */\n@layer kol-theme-component {\
 
 var css_248z$1U = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    outline: var(--border-width) solid;\n    border-radius: var(--border-radius);\n    position: relative;\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-button {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-button:focus {\n    outline: none;\n    --text-border-radius: var(--border-radius);\n    --text-outline: calc(var(--border-width) * 2) solid;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    outline: var(--text-outline);\n    border-radius: var(--text-border-radius);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n}";
 
-var css_248z$1T = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n  }\n}";
+var css_248z$1T = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$1S = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-combobox__input {\n    position: relative;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
+var css_248z$1S = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-combobox__input {\n    position: relative;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
 var css_248z$1R = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-details {\n    display: grid;\n    width: 100%;\n    height: 100%;\n  }\n  .kol-details__content.indented-text {\n    width: 100%;\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    border-left: 2px solid var(--color-primary-variant);\n    margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading {\n    margin: 0;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    gap: 0;\n    text-align: left;\n  }\n  .kol-details__heading-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-button:focus-within {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
 
-var css_248z$1Q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n  }\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 4px var(--color-subtle);\n  }\n  .kol-drawer__wrapper--left {\n    animation: slideInLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--left.kol-drawer__wrapper--is-closing {\n    animation: slideOutLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right {\n    animation: slideInRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right.kol-drawer__wrapper--is-closing {\n    animation: slideOutRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top {\n    animation: slideInTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top.kol-drawer__wrapper--is-closing {\n    animation: slideOutTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom {\n    animation: slideInBottom 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom.kol-drawer__wrapper--is-closing {\n    animation: slideOutBottom 0.4s forwards;\n  }\n  .kol-card {\n    border-radius: 0;\n  }\n}\n@keyframes slideInLeft {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInTop {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideInBottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideOutLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n@keyframes slideOutRight {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideOutTop {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n@keyframes slideOutBottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}";
+var css_248z$1Q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 4px var(--color-subtle);\n  }\n  .kol-drawer__wrapper--left {\n    animation: slideInLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--left.kol-drawer__wrapper--is-closing {\n    animation: slideOutLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right {\n    animation: slideInRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right.kol-drawer__wrapper--is-closing {\n    animation: slideOutRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top {\n    animation: slideInTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top.kol-drawer__wrapper--is-closing {\n    animation: slideOutTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom {\n    animation: slideInBottom 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom.kol-drawer__wrapper--is-closing {\n    animation: slideOutBottom 0.4s forwards;\n  }\n  .kol-card {\n    border-radius: 0;\n  }\n}\n@keyframes slideInLeft {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInTop {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideInBottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideOutLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n@keyframes slideOutRight {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideOutTop {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n@keyframes slideOutBottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}";
 
 var css_248z$1P = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    outline: var(--border-width) solid;\n    border-radius: var(--border-radius);\n    position: relative;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    width: 100%;\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    border-left: 2px solid var(--color-primary-variant);\n  }\n}";
 
@@ -1201,7 +1218,7 @@ var css_248z$1E = "/* forward the rem function */\n@layer kol-theme-component {\
 
 var css_248z$1D = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-link__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-link--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-link--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-link--primary:not([disabled], [aria-disabled=true]):hover, .kol-link--secondary:not([disabled], [aria-disabled=true]):hover, .kol-link--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-link--normal:not([disabled], [aria-disabled=true]):hover, .kol-link--danger:not([disabled], [aria-disabled=true]):hover, .kol-link--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-link--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-link__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-link__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-link--hide-label .kol-link__text {\n    width: unset;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-link:is(:disabled, [aria-disabled=true]):hover .kol-link__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n}";
 
-var css_248z$1C = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 4px var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n}";
+var css_248z$1C = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-modal__card {\n    box-shadow: 0 0 4px var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n}";
 
 var css_248z$1B = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    outline: var(--border-width) solid;\n    border-radius: var(--border-radius);\n    position: relative;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-link {\n    line-height: 1;\n  }\n}";
 
@@ -1215,15 +1232,15 @@ var css_248z$1x = "/* forward the rem function */\n@layer kol-theme-component {\
 
 var css_248z$1w = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-select {\n    border: none;\n  }\n  .kol-select[multiple] {\n    overflow: auto;\n  }\n  .kol-select__option {\n    border-radius: var(--border-radius);\n    margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n  }\n  .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n  }\n  .kol-select:not([multiple]) .kol-select__option {\n    padding: 0.5em;\n  }\n}";
 
-var css_248z$1v = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-single-select__input {\n    position: relative;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
+var css_248z$1v = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-single-select__input {\n    position: relative;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
 var css_248z$1u = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-skip-nav .kol-link__text {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-radius: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: 1;\n    cursor: pointer;\n  }\n}";
 
 var css_248z$1t = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-split-button {\n    border-color: var(--color-primary);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    border-width: var(--border-width);\n  }\n  .kol-split-button__button .kol-button .kol-span {\n    border-bottom-left-radius: var(--border-radius);\n    border-top-left-radius: var(--border-radius);\n  }\n  .kol-split-button__horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: 2px;\n    width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button__secondary-button {\n    height: 100%;\n  }\n  .kol-split-button__secondary-button .kol-span {\n    border-bottom-right-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n  .kol-split-button .kol-span {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-split-button .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-split-button .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-split-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text {\n    width: unset;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-split-button .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-split-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-split-button__button .kol-button__text {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n  .kol-split-button__secondary-button .kol-button__text {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n  .kol-split-button .kol-button {\n    height: 100%;\n  }\n  .kol-split-button .kol-button__text {\n    height: 100%;\n    border: none;\n  }\n}";
 
-var css_248z$1s = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-table-settings {\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    width: unset;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    display: flex;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    border-top: var(--border-width) solid var(--color-mute-variant);\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  @layer kol-component {\n    @media (min-width: 1024px) {\n      .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n        gap: calc(16rem / var(--kolibri-root-font-size, 16));\n      }\n    }\n    .kol-pagination .kol-button:focus .kol-button__text {\n      outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n      border-radius: var(--border-radius);\n      outline-offset: 2px;\n      transition: 200ms outline-offset linear;\n    }\n    .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n      color: var(--color-light);\n      background-color: var(--color-primary-variant);\n      box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n      border-color: var(--color-primary-variant);\n    }\n    .kol-pagination .kol-button:active .kol-button__text {\n      color: var(--color-light);\n      outline: none;\n    }\n    .kol-pagination .kol-button__text {\n      color: var(--color-primary);\n      background-color: var(--color-light);\n      border-radius: var(--border-radius);\n      min-width: var(--a11y-min-size);\n      min-height: var(--a11y-min-size);\n      padding: calc(8rem / var(--kolibri-root-font-size, 16));\n      font-weight: 700;\n      border: 1px solid var(--color-primary);\n      text-align: center;\n      transition-duration: 0.5s;\n      transition-property: background-color, color, border-color;\n    }\n    .kol-pagination__button--selected .kol-button {\n      opacity: 1;\n    }\n    .kol-pagination__button--selected .kol-button__text {\n      color: var(--color-light);\n      background-color: var(--color-primary);\n      border: 0;\n    }\n  }\n  .kol-table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table, .kol-table__caption {\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    min-height: calc(var(--a11y-min-size) + 2px);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-primary);\n    background-color: var(--color-light);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    border-color: var(--color-primary);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-subtle);\n    display: flex;\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
+var css_248z$1s = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-table-settings {\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    width: unset;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    display: flex;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    border-top: var(--border-width) solid var(--color-mute-variant);\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  @layer kol-component {\n    @media (min-width: 1024px) {\n      .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n        gap: calc(16rem / var(--kolibri-root-font-size, 16));\n      }\n    }\n    .kol-pagination .kol-button:focus .kol-button__text {\n      outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n      border-radius: var(--border-radius);\n      outline-offset: 2px;\n      transition: 200ms outline-offset linear;\n    }\n    .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n      color: var(--color-light);\n      background-color: var(--color-primary-variant);\n      box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n      border-color: var(--color-primary-variant);\n    }\n    .kol-pagination .kol-button:active .kol-button__text {\n      color: var(--color-light);\n      outline: none;\n    }\n    .kol-pagination .kol-button__text {\n      color: var(--color-primary);\n      background-color: var(--color-light);\n      border-radius: var(--border-radius);\n      min-width: var(--a11y-min-size);\n      min-height: var(--a11y-min-size);\n      padding: calc(8rem / var(--kolibri-root-font-size, 16));\n      font-weight: 700;\n      border: 1px solid var(--color-primary);\n      text-align: center;\n      transition-duration: 0.5s;\n      transition-property: background-color, color, border-color;\n    }\n    .kol-pagination__button--selected .kol-button {\n      opacity: 1;\n    }\n    .kol-pagination__button--selected .kol-button__text {\n      color: var(--color-light);\n      background-color: var(--color-primary);\n      border: 0;\n    }\n  }\n  :host {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    min-height: calc(var(--a11y-min-size) + 2px);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-primary);\n    background-color: var(--color-light);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    border-color: var(--color-primary);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-subtle);\n    display: flex;\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
 
-var css_248z$1r = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-table-settings {\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    width: unset;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    display: flex;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    border-top: var(--border-width) solid var(--color-mute-variant);\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  @layer kol-component {\n    @media (min-width: 1024px) {\n      .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n        gap: calc(16rem / var(--kolibri-root-font-size, 16));\n      }\n    }\n    .kol-pagination .kol-button:focus .kol-button__text {\n      outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n      border-radius: var(--border-radius);\n      outline-offset: 2px;\n      transition: 200ms outline-offset linear;\n    }\n    .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n      color: var(--color-light);\n      background-color: var(--color-primary-variant);\n      box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n      border-color: var(--color-primary-variant);\n    }\n    .kol-pagination .kol-button:active .kol-button__text {\n      color: var(--color-light);\n      outline: none;\n    }\n    .kol-pagination .kol-button__text {\n      color: var(--color-primary);\n      background-color: var(--color-light);\n      border-radius: var(--border-radius);\n      min-width: var(--a11y-min-size);\n      min-height: var(--a11y-min-size);\n      padding: calc(8rem / var(--kolibri-root-font-size, 16));\n      font-weight: 700;\n      border: 1px solid var(--color-primary);\n      text-align: center;\n      transition-duration: 0.5s;\n      transition-property: background-color, color, border-color;\n    }\n    .kol-pagination__button--selected .kol-button {\n      opacity: 1;\n    }\n    .kol-pagination__button--selected .kol-button__text {\n      color: var(--color-light);\n      background-color: var(--color-primary);\n      border: 0;\n    }\n  }\n  .kol-table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table, .kol-table__caption {\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    min-height: calc(var(--a11y-min-size) + 2px);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-primary);\n    background-color: var(--color-light);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    border-color: var(--color-primary);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-subtle);\n    display: flex;\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n}";
+var css_248z$1r = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-table-settings {\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    width: unset;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    display: flex;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    border-top: var(--border-width) solid var(--color-mute-variant);\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  @layer kol-component {\n    @media (min-width: 1024px) {\n      .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n        gap: calc(16rem / var(--kolibri-root-font-size, 16));\n      }\n    }\n    .kol-pagination .kol-button:focus .kol-button__text {\n      outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n      border-radius: var(--border-radius);\n      outline-offset: 2px;\n      transition: 200ms outline-offset linear;\n    }\n    .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n      color: var(--color-light);\n      background-color: var(--color-primary-variant);\n      box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n      border-color: var(--color-primary-variant);\n    }\n    .kol-pagination .kol-button:active .kol-button__text {\n      color: var(--color-light);\n      outline: none;\n    }\n    .kol-pagination .kol-button__text {\n      color: var(--color-primary);\n      background-color: var(--color-light);\n      border-radius: var(--border-radius);\n      min-width: var(--a11y-min-size);\n      min-height: var(--a11y-min-size);\n      padding: calc(8rem / var(--kolibri-root-font-size, 16));\n      font-weight: 700;\n      border: 1px solid var(--color-primary);\n      text-align: center;\n      transition-duration: 0.5s;\n      transition-property: background-color, color, border-color;\n    }\n    .kol-pagination__button--selected .kol-button {\n      opacity: 1;\n    }\n    .kol-pagination__button--selected .kol-button__text {\n      color: var(--color-light);\n      background-color: var(--color-primary);\n      border: 0;\n    }\n  }\n  :host {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    min-height: calc(var(--a11y-min-size) + 2px);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-primary);\n    background-color: var(--color-light);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    border-color: var(--color-primary);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-subtle);\n    display: flex;\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n}";
 
 var css_248z$1q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-tabs {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-display: grid;\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: flex;\n    --grid-template-rows: 1fr auto;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-top {\n    --display: flex;\n    --grid-template-rows: auto 1fr;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: var(--display);\n    gap: var(--button-group-gap);\n    order: var(--button-group-order);\n    flex-wrap: wrap;\n  }\n  .kol-tabs .kol-button {\n    color: var(--color-subtle);\n    background-color: transparent;\n    border-radius: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    line-height: 1.2;\n    border: none;\n    font-style: normal;\n  }\n  .kol-tabs .kol-button:hover {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n    padding-bottom: 0.25em;\n  }\n  .kol-tabs .kol-button.selected .kol-span__container {\n    border-bottom: 0.25em solid;\n  }\n  .kol-tabs .kol-button .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__content {\n    padding: 0.25em 0;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n  .kol-tabs .kol-button-wc {\n    width: 100%;\n  }\n}";
 
@@ -1283,9 +1300,9 @@ const DEFAULT = KoliBri.createTheme('default', {
     'KOL-TREE-ITEM': css_248z$1m,
 });
 
-var css_248z$1k = "/* forward the rem function */\n@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    border-radius: 2px;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #004494;\n    --color-yellow: #ffd617;\n    --color-grey: #404040;\n    --color-blue-130: #002f67;\n    --color-blue-120: #003776;\n    --color-blue-110: #003d84;\n    --color-blue-100: var(--color-blue);\n    --color-blue-75: #4073af;\n    --color-blue-50: #bfd0e4;\n    --color-blue-25: #bfd0e4;\n    --color-blue-5: #f2f5f9;\n    --color-yellow-120: #f8ae21;\n    --color-yellow-110: #fbc11d;\n    --color-yellow-100: var(--color-yellow);\n    --color-yellow-75: #ffde39;\n    --color-yellow-50: #ffe879;\n    --color-yellow-25: #fff4bb;\n    --color-grey-100: var(--color-grey);\n    --color-grey-75: #707070;\n    --color-grey-50: #9f9f9f;\n    --color-grey-25: #cfcfcf;\n    --color-grey-20: #d9d9d9;\n    --color-grey-15: #e3e3e3;\n    --color-grey-10: #ebebeb;\n    --color-grey-5: #f5f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-blue-n: #006fb4;\n    --color-orange: #f29527;\n    --color-green: #467a39;\n    --color-red: #da2131;\n    --color-red-1xx: #981722;\n    --color-black: #000;\n    --color-white: #fff;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight: 400;\n    --font-weight-bold: 600;\n    --line-height-regular: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    font-size: var(--font-size);\n  }\n  :host * {\n    font-family: var(--font-family);\n  }\n  a,\n  button {\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
+var css_248z$1k = "/* forward the rem function */\n@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    border-radius: 2px;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #004494;\n    --color-yellow: #ffd617;\n    --color-grey: #404040;\n    --color-blue-130: #002f67;\n    --color-blue-120: #003776;\n    --color-blue-110: #003d84;\n    --color-blue-100: var(--color-blue);\n    --color-blue-75: #4073af;\n    --color-blue-50: #bfd0e4;\n    --color-blue-25: #bfd0e4;\n    --color-blue-5: #f2f5f9;\n    --color-yellow-120: #f8ae21;\n    --color-yellow-110: #fbc11d;\n    --color-yellow-100: var(--color-yellow);\n    --color-yellow-75: #ffde39;\n    --color-yellow-50: #ffe879;\n    --color-yellow-25: #fff4bb;\n    --color-grey-100: var(--color-grey);\n    --color-grey-75: #707070;\n    --color-grey-50: #9f9f9f;\n    --color-grey-25: #cfcfcf;\n    --color-grey-20: #d9d9d9;\n    --color-grey-15: #e3e3e3;\n    --color-grey-10: #ebebeb;\n    --color-grey-5: #f5f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-blue-n: #006fb4;\n    --color-orange: #f29527;\n    --color-green: #467a39;\n    --color-red: #da2131;\n    --color-red-1xx: #981722;\n    --color-black: #000;\n    --color-white: #fff;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight: 400;\n    --font-weight-bold: 600;\n    --line-height-regular: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n  }\n  a,\n  button {\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$1j = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-accordion {\n    background-color: var(--color-grey-5);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n  }\n  .kol-accordion__heading-button .kol-button {\n    display: flex;\n    width: 100%;\n    padding: 0 var(--spacing-m);\n    place-items: center;\n    line-height: 1.2;\n    text-align: left;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    color: var(--color-grey);\n    width: 100%;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n    font-weight: var(--font-weight-bold);\n    border: none;\n  }\n  .kol-accordion__heading-button .kol-button:focus, .kol-accordion__heading-button .kol-button:hover {\n    background-color: var(--color-grey-25);\n  }\n  .kol-accordion__heading-button .kol-button:focus {\n    outline: 2px solid var(--color-blue);\n    outline-offset: -2px;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n    margin-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    margin-inline-end: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: 0;\n  }\n  .kol-accordion__content {\n    padding: var(--spacing-s) var(--spacing-m);\n  }\n}";
+var css_248z$1j = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-accordion {\n    background-color: var(--color-grey-5);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n  }\n  .kol-accordion:focus-within {\n    outline: 2px solid var(--color-blue);\n    outline-offset: -2px;\n  }\n  .kol-accordion__heading-button .kol-button {\n    display: flex;\n    width: 100%;\n    padding: 0 var(--spacing-m);\n    place-items: center;\n    line-height: 1.2;\n    text-align: left;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    color: var(--color-grey);\n    width: 100%;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n    font-weight: var(--font-weight-bold);\n    border: none;\n  }\n  .kol-accordion__heading-button .kol-button:focus, .kol-accordion__heading-button .kol-button:hover {\n    background-color: var(--color-grey-25);\n  }\n  .kol-accordion__heading-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n    margin-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    margin-inline-end: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: 0;\n  }\n  .kol-accordion__content {\n    padding: var(--spacing-s) var(--spacing-m);\n  }\n}";
 
 var css_248z$1i = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
@@ -1297,9 +1314,9 @@ var css_248z$1f = "/* forward the rem function */\n@layer kol-theme-component {\
 
 var css_248z$1e = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    color: var(--color-blue);\n    line-height: 1.2;\n    appearance: none;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\n  }\n  .badge-text-hint {\n    color: var(--color-text);\n    background-color: var(--color-mute-variant);\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$1d = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75em;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n}";
+var css_248z$1d = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75em;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  }\n}";
 
-var css_248z$1c = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-blue);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    align-items: center;\n    text-align: left;\n  }\n  .kol-combobox__input {\n    position: relative;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-combobox__input:focus {\n    border: none;\n  }\n}";
+var css_248z$1c = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-blue);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    align-items: center;\n    text-align: left;\n  }\n  .kol-combobox__input {\n    position: relative;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-combobox__input:focus {\n    border: none;\n  }\n}";
 
 var css_248z$1b = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    gap: 0;\n    text-align: left;\n  }\n  .kol-details__content.indented-text {\n    margin: 0;\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: 0;\n    border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n    border-start-start-radius: 0;\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n  }\n}";
 
@@ -1333,7 +1350,7 @@ var css_248z$Z = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 var css_248z$Y = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-blue);\n    line-height: 1.2;\n    appearance: none;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$X = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
+var css_248z$X = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75em;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  }\n}\n@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
 var css_248z$W = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    height: 100%;\n    margin: auto;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-nav__toggle-button .kol-button {\n    outline: none;\n    text-decoration: none;\n    appearance: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-nav__toggle-button .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-nav__toggle-button .kol-button--ghost:hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    color: var(--text-color) !important;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: 0;\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    line-height: 1.2;\n    text-decoration: none !important;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:focus .kol-nav__toggle-button .kol-button__text {\n    outline-offset: -2px;\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    color: var(--color-white);\n    border-color: transparent;\n    border-style: solid;\n    height: 100%;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    justify-items: start;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
 
@@ -1345,7 +1362,7 @@ var css_248z$T = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 var css_248z$S = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$R = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-blue);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    text-align: left;\n  }\n  .kol-single-select__input {\n    position: relative;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-single-select__input:not(.disabled) .kol-single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-single-select__input:focus {\n    border: none;\n  }\n}";
+var css_248z$R = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-blue);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    text-align: left;\n  }\n  .kol-single-select__input {\n    position: relative;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-single-select__input:not(.disabled) .kol-single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-single-select__input:focus {\n    border: none;\n  }\n}";
 
 var css_248z$Q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-skip-nav .kol-link__text {\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    border-style: solid;\n    border-radius: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    font-weight: var(--font-weight-bold);\n    line-height: 1;\n    cursor: pointer;\n  }\n}";
 
@@ -1353,9 +1370,9 @@ var css_248z$P = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 var css_248z$O = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-split-button {\n    border-color: var(--color-blue);\n    border-style: solid;\n    border-radius: 0;\n    border-width: 2px;\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button .kol-span {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: 0.25em 0.75em;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-split-button__horizontal-line {\n    border: 0;\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-split-button .kol-button {\n    outline: none;\n    text-decoration: none;\n    appearance: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-split-button .kol-button:focus {\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--primary:not(:disabled):hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-split-button .kol-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--ghost:not(:disabled):hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: 0;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    line-height: 1.2;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button--secondary:focus .kol-split-button .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-split-button .kol-button--ghost:focus .kol-split-button .kol-button__text {\n    outline-offset: -2px;\n  }\n}";
 
-var css_248z$N = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination {\n    display: grid;\n  }\n  .kol-pagination .kol-button {\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n    appearance: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    font-weight: var(--font-weight-bold);\n    border: 2px solid var(--color-yellow);\n  }\n  .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination__button--selected .kol-button:not(:disabled) {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    text-decoration: underline;\n  }\n  .kol-table {\n    display: block;\n  }\n  .kol-table__scroll-container {\n    padding: 0.5em;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    overflow-x: auto;\n    overflow-y: hidden;\n    grid-auto-flow: column;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}";
+var css_248z$N = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination {\n    display: grid;\n  }\n  .kol-pagination .kol-button {\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n    appearance: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    font-weight: var(--font-weight-bold);\n    border: 2px solid var(--color-yellow);\n  }\n  .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination__button--selected .kol-button:not(:disabled) {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    text-decoration: underline;\n  }\n  :host {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    display: block;\n  }\n  .kol-table__scroll-container {\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    grid-auto-flow: column;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}";
 
-var css_248z$M = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination {\n    display: grid;\n  }\n  .kol-pagination .kol-button {\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n    appearance: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    font-weight: var(--font-weight-bold);\n    border: 2px solid var(--color-yellow);\n  }\n  .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination__button--selected .kol-button:not(:disabled) {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    text-decoration: underline;\n  }\n  .kol-table {\n    display: block;\n  }\n  .kol-table__scroll-container {\n    padding: 0.5em;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n}";
+var css_248z$M = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination {\n    display: grid;\n  }\n  .kol-pagination .kol-button {\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n    appearance: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    font-weight: var(--font-weight-bold);\n    border: 2px solid var(--color-yellow);\n  }\n  .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination__button--selected .kol-button:not(:disabled) {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    text-decoration: underline;\n  }\n  :host {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    display: block;\n  }\n  .kol-table__scroll-container {\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n}";
 
 var css_248z$L = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n    border-bottom: 1px solid var(--color-grey-25);\n  }\n  .kol-tabs .kol-button {\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n    color: var(--color-blue-130);\n  }\n  .kol-tabs .kol-button:focus .kol-span {\n    outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button.selected .kol-span {\n    color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-top-color: var(--color-blue);\n    border-bottom-color: white;\n    border-width: 1px;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-tabs .kol-button .kol-span {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
@@ -1415,9 +1432,9 @@ const ECL_EC = KoliBri.createTheme('ecl-ec', {
     'KOL-TREE-ITEM': css_248z$G,
 });
 
-var css_248z$F = "/* forward the rem function */\n@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    border-radius: 2px;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #0e47cb;\n    --color-blue-140: #082b7a;\n    --color-blue-130: #082b7a;\n    --color-blue-120: #0b39a2;\n    --color-blue-110: #0d40b7;\n    --color-blue-100: #0e47cb;\n    --color-blue-80: #3e6cd5;\n    --color-blue-60: #6e91e0;\n    --color-blue-40: #9fb5ea;\n    --color-blue-20: #cfdaf5;\n    --color-blue-10: #e7edfa;\n    --color-blue-5: #f3f6fc;\n    --color-yellow: #ffcc00;\n    --color-yellow-140: #997a00;\n    --color-yellow-130: #b38f00;\n    --color-yellow-120: #cca300;\n    --color-yellow-110: #e6b800;\n    --color-yellow-100: #ffcc00;\n    --color-yellow-80: #ffd633;\n    --color-yellow-60: #ffe066;\n    --color-yellow-40: #ffeb99;\n    --color-yellow-20: #fff5cc;\n    --color-yellow-10: #fffae6;\n    --color-yellow-5: #fffcf2;\n    --color-grey: #262b38;\n    --color-grey-140: #171a22;\n    --color-grey-130: #1b1e27;\n    --color-grey-120: #1e222d;\n    --color-grey-110: #222732;\n    --color-grey-100: #262b38;\n    --color-grey-80: #515560;\n    --color-grey-75: #515560;\n    --color-grey-60: #7d8088;\n    --color-grey-40: #a8aaaf;\n    --color-grey-20: #d4d5d7;\n    --color-grey-10: #e9eaeb;\n    --color-grey-5: #f4f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-orange: #ff6200;\n    --color-orange-140: #993b00;\n    --color-orange-130: #b34500;\n    --color-orange-120: #cc4e00;\n    --color-orange-110: #e65800;\n    --color-orange-100: #e65800;\n    --color-orange-80: #ff8133;\n    --color-orange-60: #ff914d;\n    --color-orange-40: #ffb180;\n    --color-orange-20: #ffd0b3;\n    --color-orange-10: #ffefe6;\n    --color-orange-5: #fff7f2;\n    --color-green: #00c991;\n    --color-green-140: #007957;\n    --color-green-130: #008d66;\n    --color-green-120: #008d66;\n    --color-green-110: #00b583;\n    --color-green-100: #00c991;\n    --color-green-80: #00c991;\n    --color-green-60: #66dfbd;\n    --color-green-40: #99e9d3;\n    --color-green-20: #ccf4e9;\n    --color-green-10: #e6faf4;\n    --color-green-5: #f2fcf9;\n    --color-red: #ef0044;\n    --color-red-140: #8f0029;\n    --color-red-130: #a70030;\n    --color-red-120: #bf0036;\n    --color-red-110: #d7003d;\n    --color-red-100: #ef0044;\n    --color-red-80: #f23369;\n    --color-red-60: #f5668f;\n    --color-red-40: #f999b4;\n    --color-red-20: #fcccda;\n    --color-red-10: #fde6ec;\n    --color-red-5: #fef2f5;\n    --color-accent-blue-100: #00e9ff;\n    --color-accent-blue-30: #b3f8ff;\n    --color-purple: #510dcd;\n    --color-purple-140: #31087b;\n    --color-purple-130: #390990;\n    --color-purple-120: #410aa4;\n    --color-purple-110: #490cb9;\n    --color-purple-100: #510dcd;\n    --color-purple-80: #743dd7;\n    --color-purple-60: #976ee1;\n    --color-purple-40: #bf9af1;\n    --color-purple-20: #dccff5;\n    --color-purple-10: #eee7fa;\n    --color-purple-5: #eee7fa;\n    --color-white: #fff;\n    --color-black: #000;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight-regular: 400;\n    --font-weight-bold: 700;\n    --line-height-regular: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    font-size: var(--font-size);\n  }\n  :host * {\n    font-family: var(--font-family);\n  }\n  a,\n  button {\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  p.l,\n  p.lead {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  p,\n  p.m,\n  p.medium {\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  p.s,\n  p.small {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  p.xs,\n  p.extra-small {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
+var css_248z$F = "/* forward the rem function */\n@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    border-radius: 2px;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #0e47cb;\n    --color-blue-140: #082b7a;\n    --color-blue-130: #082b7a;\n    --color-blue-120: #0b39a2;\n    --color-blue-110: #0d40b7;\n    --color-blue-100: #0e47cb;\n    --color-blue-80: #3e6cd5;\n    --color-blue-60: #6e91e0;\n    --color-blue-40: #9fb5ea;\n    --color-blue-20: #cfdaf5;\n    --color-blue-10: #e7edfa;\n    --color-blue-5: #f3f6fc;\n    --color-yellow: #ffcc00;\n    --color-yellow-140: #997a00;\n    --color-yellow-130: #b38f00;\n    --color-yellow-120: #cca300;\n    --color-yellow-110: #e6b800;\n    --color-yellow-100: #ffcc00;\n    --color-yellow-80: #ffd633;\n    --color-yellow-60: #ffe066;\n    --color-yellow-40: #ffeb99;\n    --color-yellow-20: #fff5cc;\n    --color-yellow-10: #fffae6;\n    --color-yellow-5: #fffcf2;\n    --color-grey: #262b38;\n    --color-grey-140: #171a22;\n    --color-grey-130: #1b1e27;\n    --color-grey-120: #1e222d;\n    --color-grey-110: #222732;\n    --color-grey-100: #262b38;\n    --color-grey-80: #515560;\n    --color-grey-75: #515560;\n    --color-grey-60: #7d8088;\n    --color-grey-40: #a8aaaf;\n    --color-grey-20: #d4d5d7;\n    --color-grey-10: #e9eaeb;\n    --color-grey-5: #f4f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-orange: #ff6200;\n    --color-orange-140: #993b00;\n    --color-orange-130: #b34500;\n    --color-orange-120: #cc4e00;\n    --color-orange-110: #e65800;\n    --color-orange-100: #e65800;\n    --color-orange-80: #ff8133;\n    --color-orange-60: #ff914d;\n    --color-orange-40: #ffb180;\n    --color-orange-20: #ffd0b3;\n    --color-orange-10: #ffefe6;\n    --color-orange-5: #fff7f2;\n    --color-green: #00c991;\n    --color-green-140: #007957;\n    --color-green-130: #008d66;\n    --color-green-120: #008d66;\n    --color-green-110: #00b583;\n    --color-green-100: #00c991;\n    --color-green-80: #00c991;\n    --color-green-60: #66dfbd;\n    --color-green-40: #99e9d3;\n    --color-green-20: #ccf4e9;\n    --color-green-10: #e6faf4;\n    --color-green-5: #f2fcf9;\n    --color-red: #ef0044;\n    --color-red-140: #8f0029;\n    --color-red-130: #a70030;\n    --color-red-120: #bf0036;\n    --color-red-110: #d7003d;\n    --color-red-100: #ef0044;\n    --color-red-80: #f23369;\n    --color-red-60: #f5668f;\n    --color-red-40: #f999b4;\n    --color-red-20: #fcccda;\n    --color-red-10: #fde6ec;\n    --color-red-5: #fef2f5;\n    --color-accent-blue-100: #00e9ff;\n    --color-accent-blue-30: #b3f8ff;\n    --color-purple: #510dcd;\n    --color-purple-140: #31087b;\n    --color-purple-130: #390990;\n    --color-purple-120: #410aa4;\n    --color-purple-110: #490cb9;\n    --color-purple-100: #510dcd;\n    --color-purple-80: #743dd7;\n    --color-purple-60: #976ee1;\n    --color-purple-40: #bf9af1;\n    --color-purple-20: #dccff5;\n    --color-purple-10: #eee7fa;\n    --color-purple-5: #eee7fa;\n    --color-white: #fff;\n    --color-black: #000;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight-regular: 400;\n    --font-weight-bold: 700;\n    --line-height-regular: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n  }\n  a,\n  button {\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  p.l,\n  p.lead {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  p,\n  p.m,\n  p.medium {\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  p.s,\n  p.small {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  p.xs,\n  p.extra-small {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$E = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-accordion {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-radius: 8px;\n    margin: 0;\n    overflow: hidden;\n  }\n  .kol-accordion__heading {\n    font-size: 2em;\n  }\n  .kol-accordion__heading-button .kol-button {\n    color: #171a22;\n    border-radius: 8px;\n    border-bottom-color: #cfdaf5;\n    display: block;\n    position: relative;\n    width: 100%;\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(18rem / var(--kolibri-root-font-size, 16))/calc(28rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    line-height: 1.2;\n    border: 0;\n    border-bottom-style: solid;\n    outline-offset: -1px;\n    text-align: start;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    align-items: baseline;\n  }\n  .kol-accordion__heading-button .kol-button::before {\n    background-color: #fc0;\n    position: absolute;\n    top: 0;\n    left: calc(24rem / var(--kolibri-root-font-size, 16));\n    width: calc(6rem / var(--kolibri-root-font-size, 16));\n    height: calc(4rem / var(--kolibri-root-font-size, 16));\n    content: \"\";\n    border-end-end-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-right: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    color: #0e47cb;\n    font-family: \"Font Awesome 6 Free\";\n    font-weight: 900;\n  }\n  .kol-accordion__content {\n    color: #515560;\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(24rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    border-inline-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-bottom: 2px solid #cfdaf5;\n    -webkit-border-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    margin-inline-start: 0;\n    -webkit-margin-start: 0;\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-button {\n    border-start-end-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    border-start-start-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    content: \"\\f077\";\n  }\n  :not(.collapsible--open) .kol-accordion__heading-button .kol-button .kol-icon::part(icon)::before {\n    content: \"\\f078\";\n  }\n}";
+var css_248z$E = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-accordion {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-radius: 8px;\n    margin: 0;\n  }\n  .kol-accordion:focus-within {\n    outline: 2px solid var(--color-blue);\n    outline-offset: -1px;\n  }\n  .kol-accordion__heading {\n    font-size: 2em;\n  }\n  .kol-accordion__heading-button .kol-button {\n    color: #171a22;\n    border-radius: 8px;\n    border-bottom-color: #cfdaf5;\n    display: block;\n    position: relative;\n    width: 100%;\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(18rem / var(--kolibri-root-font-size, 16))/calc(28rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    line-height: 1.2;\n    border: 0;\n    border-bottom-style: solid;\n    outline-offset: -1px;\n    text-align: start;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    align-items: baseline;\n  }\n  .kol-accordion__heading-button .kol-button::before {\n    background-color: #fc0;\n    position: absolute;\n    top: 0;\n    left: calc(24rem / var(--kolibri-root-font-size, 16));\n    width: calc(6rem / var(--kolibri-root-font-size, 16));\n    height: calc(4rem / var(--kolibri-root-font-size, 16));\n    content: \"\";\n    border-end-end-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-right: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    color: #0e47cb;\n    font-family: \"Font Awesome 6 Free\";\n    font-weight: 900;\n  }\n  .kol-accordion__content {\n    color: #515560;\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(24rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    border-inline-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-bottom: 2px solid #cfdaf5;\n    -webkit-border-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    margin-inline-start: 0;\n    -webkit-margin-start: 0;\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-button {\n    border-start-end-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    border-start-start-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    content: \"\\f077\";\n  }\n  :not(.collapsible--open) .kol-accordion__heading-button .kol-button .kol-icon::part(icon)::before {\n    content: \"\\f078\";\n  }\n}";
 
 var css_248z$D = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
@@ -1429,9 +1446,9 @@ var css_248z$A = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 var css_248z$z = "@layer kol-theme-component {\n  .kol-button {\n    color: var(--color-blue);\n    line-height: 1.2;\n    appearance: none;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$y = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n}";
+var css_248z$y = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  }\n}";
 
-var css_248z$x = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    text-align: left;\n  }\n  .kol-combobox__input {\n    position: relative;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-combobox__input:focus {\n    border: none;\n  }\n}";
+var css_248z$x = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    text-align: left;\n  }\n  .kol-combobox__input {\n    position: relative;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-combobox__input:focus {\n    border: none;\n  }\n}";
 
 var css_248z$w = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    gap: 0;\n    text-align: left;\n  }\n  .kol-details__content.indented-text {\n    display: inline-block;\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n  }\n}";
 
@@ -1465,7 +1482,7 @@ var css_248z$i = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 var css_248z$h = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-blue);\n    line-height: 1.2;\n    appearance: none;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$g = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
+var css_248z$g = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  }\n}\n@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
 var css_248z$f = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    height: 100%;\n    margin: auto;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-nav__toggle-button .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    appearance: none;\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-radius: 4px;\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n    text-decoration: none !important;\n  }\n  .kol-nav__toggle-button .kol-button__text:active, .kol-nav__toggle-button .kol-button__text:hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-nav__toggle-button .kol-button:focus-visible .kol-nav__toggle-button .kol-button__text {\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    color: var(--color-white);\n    border-color: transparent;\n    border-style: solid;\n    height: 100%;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    justify-items: start;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
 
@@ -1475,7 +1492,7 @@ var css_248z$d = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 var css_248z$c = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$b = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n  }\n  .kol-single-select__input {\n    position: relative;\n    width: calc(100% - 2.5rem);\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-single-select__input:not(.disabled) .kol-single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-single-select__input:focus {\n    border: none;\n  }\n}";
+var css_248z$b = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n  }\n  .kol-single-select__input {\n    position: relative;\n    width: calc(100% - 2.5rem);\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-single-select__input:not(.disabled) .kol-single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-single-select__input:focus {\n    border: none;\n  }\n}";
 
 var css_248z$a = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-skip-nav .kol-link__text {\n    color: #fff;\n    background-color: #0e47cb;\n    border-radius: 4px;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    cursor: pointer;\n  }\n}";
 
@@ -1483,9 +1500,9 @@ var css_248z$9 = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 var css_248z$8 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-split-button {\n    border-color: var(--color-blue);\n    border-style: solid;\n    border-radius: 4px;\n    border-width: 2px;\n  }\n  .kol-split-button__horizontal-line {\n    border: 0;\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    appearance: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-split-button .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-split-button .kol-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-split-button .kol-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-split-button .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n  }\n  .kol-split-button .kol-button__text:active, .kol-split-button .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-split-button .kol-button--secondary .kol-split-button .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: 2px solid #0e47cb;\n  }\n  .kol-split-button .kol-button--secondary.button:focus-visible .kol-split-button .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-split-button .kol-button:focus-visible .kol-split-button .kol-button__text {\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n}";
 
-var css_248z$7 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n  }\n  .kol-pagination .kol-button:focus {\n    outline: none;\n  }\n  .kol-pagination .kol-button:focus-visible .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-color: #fc0;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination .kol-button__text {\n    color: #171a22;\n    background-color: #fc0;\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    font-weight: bold;\n    text-decoration: underline;\n  }\n  .kol-table {\n    display: block;\n    padding: 0.5em;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: 2px solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    overflow-x: auto;\n    overflow-y: hidden;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-auto-flow: column;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}";
+var css_248z$7 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n  }\n  .kol-pagination .kol-button:focus {\n    outline: none;\n  }\n  .kol-pagination .kol-button:focus-visible .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-color: #fc0;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination .kol-button__text {\n    color: #171a22;\n    background-color: #fc0;\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    font-weight: bold;\n    text-decoration: underline;\n  }\n  :host {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    display: block;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: 2px solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-auto-flow: column;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}";
 
-var css_248z$6 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n  }\n  .kol-pagination .kol-button:focus {\n    outline: none;\n  }\n  .kol-pagination .kol-button:focus-visible .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-color: #fc0;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination .kol-button__text {\n    color: #171a22;\n    background-color: #fc0;\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    font-weight: bold;\n    text-decoration: underline;\n  }\n  .kol-table {\n    display: block;\n    padding: 0.5em;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: 2px solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n}";
+var css_248z$6 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n  }\n  .kol-pagination .kol-button:focus {\n    outline: none;\n  }\n  .kol-pagination .kol-button:focus-visible .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-color: #fc0;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination .kol-button__text {\n    color: #171a22;\n    background-color: #fc0;\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    font-weight: bold;\n    text-decoration: underline;\n  }\n  :host {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    display: block;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: 2px solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n}";
 
 var css_248z$5 = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n    border-bottom: 1px solid var(--color-grey-25);\n  }\n  .kol-tabs .kol-button {\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n    color: var(--color-blue-130);\n  }\n  .kol-tabs .kol-button:focus .kol-span {\n    outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button.selected .kol-span {\n    color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-top-color: var(--color-blue);\n    border-bottom-color: white;\n    border-width: 1px;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-tabs .kol-button .kol-span {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";