@public-ui/theme-ecl 3.0.0-rc.8 → 3.0.0

package/dist/index.cjs

@@ -364,11 +364,7 @@ var loglevel = {exports: {}};
 }));
 }(loglevel));
 
-const j=(t,e)=>s=>s(t,e),H=(t,e)=>s=>s(t,e,{append:false}),M=new Map,Y=[],$=new Map,o={A11yUi:{CSS_STYLE_CACHE:M,HYDRATED_HISTORY:Y,STYLING_TASK_QUEUE:$,Themes:{}}};const C=new Set,F=/--[^;]+/g,V=/:/,q=(t,e)=>{let s=e.match(F);if(Array.isArray(s)){s=s.filter(r=>V.test(r));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}C.add(t);},f=(t,e)=>typeof o.A11yUi=="object"&&o.A11yUi!==null&&typeof o.A11yUi.Themes=="object"&&o.A11yUi.Themes!==null&&typeof o.A11yUi.Themes[t]=="object"&&o.A11yUi.Themes[t]!==null&&typeof o.A11yUi.Themes[t][e]=="string"?o.A11yUi.Themes[t][e].replace(/\r?\n/g,""):"",J=t=>{for(const e of Array.from(t.childNodes))if(e instanceof HTMLStyleElement&&e.tagName==="STYLE"&&e.dataset.themingFallback===void 0)t.removeChild(e);else break},W=(t,e)=>{try{if(o.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];e.forEach(a=>{const r=new CSSStyleSheet;r.replaceSync(a),s.push(r);}),t.adoptedStyleSheets=s;}catch{[...e].reverse().forEach((a,r)=>{if(typeof a!="string"||a.length===0)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",r){case 4:n.dataset.themingBaseA11y="";break;case 3:n.dataset.themingBaseGlobal="";break;case 2:n.dataset.themingBaseComponent="";break;case 1:n.dataset.themingCustomGlobal="";break;case 0:n.dataset.themingCustomComponent="";break;default:n.dataset.themingUnknown="";break}n.innerHTML=a,t.insertBefore(n,t.firstChild);});}},X=(t,e,s)=>{if(s!==false){const a=[...Array.from(t.childNodes).filter(n=>n instanceof HTMLStyleElement&&n.tagName==="STYLE")];let r;try{r=[...Array.from(t.adoptedStyleSheets)];}catch{r=[];}s?.mode==="before"?(a.reverse().forEach(n=>e.unshift(n.innerHTML)),r.reverse().forEach(n=>e.unshift(Array.from(n.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(n=>e.push(n.innerHTML)),r.forEach(n=>e.push(Array.from(n.cssRules).map(i=>i.cssText).join(""))));}},w=(t,e,s)=>{const a=e.name||"default";let r;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");r=t.shadowRoot;}catch{r=t;}if(o.A11yUi.CSS_STYLE_CACHE.get(a)?.has(t.tagName))L(t,r,o.A11yUi.CSS_STYLE_CACHE.get(a)?.get(t.tagName),s);else {const n=f(a,"PROPERTIES"),i=f(a,"GLOBAL"),c=f(a,t.tagName);C.has(a)===false&&q(a,i);const m=[n,i,c];X(r,m,e.encroachCss),e.loglevel==="debug"&&console.log(t.tagName,m),e.cache===true&&(o.A11yUi.CSS_STYLE_CACHE.has(a)===false&&o.A11yUi.CSS_STYLE_CACHE.set(a,new Map),o.A11yUi.CSS_STYLE_CACHE.get(a)?.set(t.tagName,m)),L(t,r,m,s);}},L=(t,e,s,a)=>{J(e),W(e,s),t.style.visibility=a;},v=t=>{t.loglevel==="debug"&&o.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:o.A11yUi.STYLING_TASK_QUEUE.size});},te=t=>{o.A11yUi.STYLING_TASK_QUEUE.delete(t);},_=(t,e)=>{te(t),v(e);},se=t=>{for(const e of t)if(o.A11yUi.STYLING_TASK_QUEUE.has(e.target)&&e.target.classList.contains("hydrated")){const{styleVisibility:s,themeDetails:a}=o.A11yUi.STYLING_TASK_QUEUE.get(e.target);w(e.target,a,s),_(e.target,a);}};let d;try{d=new MutationObserver(se);}catch{d=null;}class ne{Prefix;Key;Tag;createTheme=(e,s)=>H(e,s);createTranslation=(e,s)=>j(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
-
-/*!
- * KoliBri - The accessible HTML-Standard
- */
+const I=(t,e)=>s=>s(t,e),P=(t,e)=>s=>s(t,e,{append:false}),$=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV==="test",s="VITEST"in t,a="JEST_WORKER_ID"in t,o="PLAYWRIGHT_TEST_BASE_URL"in t,r=t.CI==="true",i=t.TEST==="true"||t.IS_TEST==="true",c=typeof navigator<"u"&&navigator.webdriver===true,m=typeof navigator<"u"&&/playwright|puppeteer|webdriver|selenium|testcafe/i.test(navigator.userAgent);return e||s||a||o||r||i||c||m},n$1={A11yUi:{CSS_STYLE_CACHE:new Map,IS_TEST_ENVIRONMENT:$(),PERFORMANCE_MEASURES:new Map,STYLING_TASK_QUEUE:new Map,THEMES:new Map,showAverageTimes:()=>{const t={};for(const[s,a]of n$1.A11yUi.PERFORMANCE_MEASURES.entries())t[s]=[a.totalTime/a.count,a.count];const e=Object.entries(t).sort((s,a)=>a[1][0]-s[1][0]);return console.table(Object.fromEntries(e.map(([s,[a,o]])=>[s,{"avg (ms)":parseFloat(a.toFixed(2)),count:o}]))),t}}};const w=new Set,W=/--[^;]+/g,q=/:/,J=typeof MutationObserver<"u";let v=()=>{Math.min(25+Math.log2(n$1.A11yUi.STYLING_TASK_QUEUE.size+1)*20,250);};const X=(t,e)=>{let s=e.match(W);if(Array.isArray(s)){s=s.filter(o=>q.test(o));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}w.add(t);},y=(t,e)=>{const s=n$1.A11yUi.THEMES.get(t);return s instanceof Map&&s.has(e)?s.get(e):""},Z=t=>{for(const e of Array.from(t.childNodes))if(e instanceof HTMLStyleElement&&e.tagName==="STYLE"&&e.dataset.themingFallback===void 0)t.removeChild(e);else break},ee=(t,e)=>{try{if(n$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];e.forEach(a=>{const o=new CSSStyleSheet;o.replaceSync(a),s.push(o);}),t.adoptedStyleSheets=s;}catch{[...e].reverse().forEach((a,o)=>{if(typeof a!="string"||a.length===0)return;const r=document.createElement("style");switch(r.dataset.themingFallback="",o){case 4:r.dataset.themingBaseA11y="";break;case 3:r.dataset.themingBaseGlobal="";break;case 2:r.dataset.themingBaseComponent="";break;case 1:r.dataset.themingCustomGlobal="";break;case 0:r.dataset.themingCustomComponent="";break;default:r.dataset.themingUnknown="";break}r.innerHTML=a,t.insertBefore(r,t.firstChild);});}},te=(t,e,s)=>{if(s!==false){const a=[...Array.from(t.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE")];let o;try{o=[...Array.from(t.adoptedStyleSheets)];}catch{o=[];}s?.mode==="before"?(a.reverse().forEach(r=>e.unshift(r.innerHTML)),o.reverse().forEach(r=>e.unshift(Array.from(r.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(r=>e.push(r.innerHTML)),o.forEach(r=>e.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},se=(t,e,s)=>{const a=e.name||"default";let o;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");o=t.shadowRoot;}catch{o=t;}if(n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.has(t.tagName))N(t,o,n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.get(t.tagName),s);else {const r=y(a,"PROPERTIES"),i=y(a,"GLOBAL"),c=y(a,t.tagName);w.has(a)===false&&X(a,i);const m=[r,i,c];te(o,m,e.encroachCss),e.cache===true&&(n$1.A11yUi.CSS_STYLE_CACHE.has(a)===false&&n$1.A11yUi.CSS_STYLE_CACHE.set(a,new Map),n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.set(t.tagName,m)),N(t,o,m,s);}},N=(t,e,s,a)=>{const o=performance.now();if(Z(e),ee(e,s),H(t),a(),n$1.A11yUi.PERFORMANCE_MEASURES.has(t.tagName)){const r=n$1.A11yUi.PERFORMANCE_MEASURES.get(t.tagName);r.count+=1,r.totalTime+=performance.now()-o;}else n$1.A11yUi.PERFORMANCE_MEASURES.set(t.tagName,{count:1,totalTime:performance.now()-o});},L=t=>{const e=n$1.A11yUi.STYLING_TASK_QUEUE.get(t);if(e){const{resetCss:s,themeDetails:a}=e;se(t,a,s),H(t);}};const oe={attributes:true,attributeFilter:[],childList:false,subtree:false},R=J?new MutationObserver((t,e)=>{for(const s of t){const a=s.target;a.classList.contains("hydrated")&&(L(a),e.observe(a,oe));}}):null;R&&(v=()=>{});n$1.A11yUi.IS_TEST_ENVIRONMENT&&(console.log("Test-Runner detected, disabling theme visibility delay."));const H=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),v();};class ie{Prefix;Key;Tag;createTheme=(e,s)=>P(e,s);createTranslation=(e,s)=>I(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
 
 var KeyEnum;
 (function (KeyEnum) {
@@ -455,8 +451,422 @@ 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 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];
+};
+const getLogLabel = (label) => {
+    return `%c${label}`;
+};
+const handleClassifier = (label, classifier) => {
+    if (typeof classifier === 'string' && classifier.length > 0) {
+        return `${getLogLabel(label)} | ${classifier}`;
+    }
+    else {
+        return getLogLabel(label);
+    }
+};
+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;
+class Logger {
+    constructor(label, devMode) {
+        this.label = label;
+        this.devMode = devMode;
+    }
+    debug(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, 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)) {
+            console.info(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    trace(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, 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)) {
+            console.warn(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    error(msg, options) {
+        console.error(...getShield(this.label, options), ...mapToArray(msg));
+    }
+    throw(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, 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 devCache = new Set();
+const devHint = (msg, options) => {
+    if (devCache.has(msg) === false || false) {
+        devCache.add(msg);
+        Log.debug([msg].concat([]), {
+            classifier: `💻 dev`,
+            forceLog: false,
+            overwriteStyle: '; background-color: #f09',
+        });
+    }
+};
+devHint(`We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!`);
+
+var rgbaConvert = {exports: {}};
+
+rgbaConvert.exports     = arr;
+rgbaConvert.exports.arr = arr;
+rgbaConvert.exports.obj = obj;
+rgbaConvert.exports.css = css;
+rgbaConvert.exports.hex = hex;
+rgbaConvert.exports.num = num;
+
+function arr(data) {
+  var a = parse(data);
+  if (a.length == 3) {
+    return a.concat(255)
+  } else {
+    a[3] = Math.round(a[3]);
+    return a
+  }
+}
+
+function obj(data) {
+  var a = parse(data);
+  return {
+    r: a[0],
+    g: a[1],
+    b: a[2],
+    a: a.length == 3
+      ? 255
+      : Math.round(a[3])
+  }
+}
+
+function css(data) {
+  var a = parse(data);
+  if (a.length == 3) a.push(255);
+
+  return a[3] == 255
+    ? 'rgb(' + a[0] + ', ' + a[1] + ', ' + a[2] + ')'
+    : a[3] == 0
+      ? 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', 0)'
+      : 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', ' + String(a[3] / 255).substr(1) + ')'
+}
+
+function hex(data) {
+  var a = parse(data);
+  if (a.length == 3) a.push(255);
+  var opaque = a[3] == 255;
+  var r = num2hex(a[0]);
+  var g = num2hex(a[1]);
+  var b = num2hex(a[2]);
+  var a = num2hex(Math.round(a[3]));
+  var is = isshort(r, g, b, a);
+  if (opaque) {
+    return is
+      ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0)
+      : '#' + r + g + b
+  }
+  return is
+    ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0) + a.charAt(0)
+    : '#' + r + g + b + a
+}
+
+function num(data) {
+  var a = parse(data);
+  if (a.length == 3) a.push(255);
+  else a[3] = Math.round(a[3]);
+  return ((a[3] << 24) >>> 0 | a[0] << 16 | a[1] << 8 | a[2]) >>> 0
+}
+
+function parse(data) {
+  if (typeof data == 'string') {
+    data = data.toLowerCase();
+    return name(data)
+      || hex3(data)
+      || hex6(data)
+      || rgb(data)
+      || rgba(data)
+      || [0, 0, 0, 255]
+  }
+  return object(data)
+    || array(data)
+    || number(data)
+    || [0, 0, 0, 255]
+}
+
+function num2hex(num) {
+  var s = num.toString(16);
+  return s.length == 1
+    ? '0' + s
+    : s
+}
+
+function isshort(r, g, b, a) {
+  var h = ['ff', '00', '11', '22', '33', '44', '55', '66',
+           '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee'];
+  return h.indexOf(r) != -1
+    && h.indexOf(g) != -1
+    && h.indexOf(b) != -1
+    && h.indexOf(a) != -1
+}
+
+function name(str) {
+  if (str == 'red')     return [255, 0, 0]
+  if (str == 'green')   return [0, 255, 0]
+  if (str == 'blue')    return [0, 0, 255]
+  if (str == 'black')   return [0, 0, 0]
+  if (str == 'white')   return [255, 255, 255]
+  if (str == 'cyan')    return [0, 255, 255]
+  if (str == 'gray')    return [128, 128, 128]
+  if (str == 'grey')    return [128, 128, 128]
+  if (str == 'magenta') return [255, 0, 255]
+  // ok, not the real css `pink` but my personal `magenta` alias
+  // `pink` is simpler than `fuchsia`, whatever...
+  if (str == 'pink')    return [255, 0, 255]
+  if (str == 'yellow')  return [255, 255, 0]
+}
+
+function hex2num(str) {
+  return str.length == 1
+    ? parseInt(str + str, 16)
+    : parseInt(str, 16)
+}
+
+function hex3(str) {
+  var s = str.replace(/^#/,'');
+  var l = s.length;
+  if (l == 3 || l == 4) {
+    var r = hex2num(s[0]);
+    var g = hex2num(s[1]);
+    var b = hex2num(s[2]);
+    var a = l == 3
+      ? 255
+      : hex2num(s[3]);
+
+    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
+
+    return [r, g, b, a]
+  }
+}
+
+function hex6(str) {
+  var s = str.replace(/^#/,'');
+  var l = s.length;
+  if (l == 6 || l == 8) {
+    var r = hex2num(s.slice(0, 2));
+    var g = hex2num(s.slice(2, 4));
+    var b = hex2num(s.slice(4, 6));
+    var a = l == 6
+      ? 255
+      : hex2num(s.slice(6, 8));
+
+    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
+
+    return [r, g, b, a]
+  }
+}
+
+function getnum(val, integer) {
+  if (typeof val != 'number') return -1
+  if (integer === true && Math.floor(val) !== val) return -1
+  return val >= 0 && val <= 255
+    ? val
+    : -1
+}
+
+function object(obj) {
+  if (Object.prototype.toString.call(obj) === '[object Object]'
+    && Object.getPrototypeOf(obj) === Object.getPrototypeOf({})) {
+    var r = getnum(obj.r != undefined ? obj.r : obj.red   != undefined ? obj.red   : 0,   true);
+    var g = getnum(obj.g != undefined ? obj.g : obj.green != undefined ? obj.green : 0,   true);
+    var b = getnum(obj.b != undefined ? obj.b : obj.blue  != undefined ? obj.blue  : 0,   true);
+    var a = getnum(obj.a != undefined ? obj.a : obj.alpha != undefined ? obj.alpha : 255, true);
+    if (r != -1 && g != -1 && b != -1 && a != -1) {
+      return [r, g, b, a]
+    }
+  }
+}
+
+function array(arr) {
+  if (Array.isArray(arr) && (arr.length == 3 || arr.length == 4)) {
+    var r = getnum(arr[0],   true);
+    var g = getnum(arr[1],   true);
+    var b = getnum(arr[2],   true);
+    var a = getnum(arr[3] != undefined ? arr[3] : 255, true);
+    if (r != -1 && g != -1 && b != -1 && a != -1) {
+      return [r, g, b, a]
+    }
+  }
+}
+
+function number(num) {
+  if (typeof num == 'number' && Math.floor(num) == num && num <= 4294967295 && num >= 0) {
+    var a = num >> 24 & 255;
+    var r = num >> 16 & 255;
+    var g = num >> 8  & 255;
+    var b = num & 255;
+    return [r, g, b, a]
+  }
+}
+
+function rgb(str) {
+  if (str.substr(0, 4) == 'rgb(') {
+    str = str.match(/^rgb\(([^)]+)\)/)[1];
+    var t = str.split(/ *, */).map(Number);
+    var r = getnum(t[0], true);
+    var g = getnum(t[1], true);
+    var b = getnum(t[2], true);
+    if (r != -1 && g != -1 && b != -1) {
+      return [r, g, b, 255]
+    }
+  }
+}
+
+function rgba(str) {
+  if (str.substr(0, 5) == 'rgba(') {
+    str = str.match(/^rgba\(([^)]+)\)/)[1];
+    var t = str.split(/ *, */).map(Number);
+    var r = getnum(t[0], true);
+    var g = getnum(t[1], true);
+    var b = getnum(t[2], true);
+    var a = getnum(t[3] * 255);
+    if (r != -1 && g != -1 && b != -1 && a != -1) {
+      return [r, g, b, a]
+    }
+  }
+}
+
+let processEnv = 'development';
+try {
+    processEnv = "production";
+}
+catch (e) {
+    processEnv = 'production';
+}
+new Event('StateChange');
+
+var KoliBriProgressVariantEnum;
+(function (KoliBriProgressVariantEnum) {
+    KoliBriProgressVariantEnum["bar"] = "bar";
+    KoliBriProgressVariantEnum["cycle"] = "cycle";
+})(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
+
+const KoliBri = new ie('kol', KeyEnum, TagEnum);
+
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+var KolEvent;
+(function (KolEvent) {
+    KolEvent["blur"] = "kolBlur";
+    KolEvent["change"] = "kolChange";
+    KolEvent["changePage"] = "kolChangePage";
+    KolEvent["changePageSize"] = "kolChangePageSize";
+    KolEvent["click"] = "kolClick";
+    KolEvent["close"] = "kolClose";
+    KolEvent["focus"] = "kolFocus";
+    KolEvent["input"] = "kolInput";
+    KolEvent["mousedown"] = "kolMousedown";
+    KolEvent["reset"] = "kolReset";
+    KolEvent["select"] = "kolSelect";
+    KolEvent["selectionChange"] = "kolSelectionChange";
+    KolEvent["sort"] = "kolSort";
+    KolEvent["submit"] = "kolSubmit";
+    KolEvent["toggle"] = "kolToggle";
+    KolEvent["settingsChange"] = "settingsChange";
+})(KolEvent || (KolEvent = {}));
+
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+/**
+ * BEM class name factory.
+ *
+ * @typedef {Function} Bem
+ * @param {String|Object} [elementOrMods] Element name or hash object with mods
+ * @param {Object} [mods] Hash object with mods
+ * @returns {String}
+ */
+
+/**
+ * Returns BEM class name factory.
+ *
+ * @param {String} componentName Block name
+ * @returns {Bem}
+ */
+var easyBem = function bem(componentName) {
+    return function (elementOrMods, mods) {
+        if (!elementOrMods) {
+            return componentName;
+        }
+
+        var element;
+
+        if (typeof elementOrMods === 'string') {
+            element = elementOrMods;
+        } else {
+            mods = elementOrMods;
+        }
+
+        var base = componentName;
+        if (element) {
+            base += '__' + element;
+        }
+
+        return base + (
+            mods
+                ? Object.keys(mods).reduce(function (result, name) {
+                    var value = mods[name];
+
+                    if (value) {
+                        result += ' ' + (
+                            typeof value === 'boolean'
+                                ? (base + '--' + name)
+                                : (base + '--' + name + '_' + value)
+                        );
+                    }
+
+                    return result;
+                }, '')
+                : ''
+        );
+    };
+};
+
+const r = easyBem;
+
+function s(){const e=new Map;return (t,n,o)=>{try{return e.get(t)(n,o)}catch{return e.set(t,r(t)).get(t)(n,o)}}}
+
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+
+const bem$1 = s();
+bem$1('kol-alert', 'closer');
+bem$1('kol-alert', 'content');
+bem$1('kol-alert', 'icon');
 
-const KoliBri = new ne('kol', KeyEnum, TagEnum);
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+
+const bem = s();
+bem('kol-icon');
+bem('kol-icon', 'icon');
+
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
 
 var Bundesministerium;
 (function (Bundesministerium) {
@@ -629,13 +1039,13 @@ var css_248z$1p = "@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    backg
 
 var css_248z$1o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\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    text-align: left;\n    width: 100%;\n    padding: 0 var(--spacing-m);\n    display: flex;\n    place-items: center;\n    line-height: 1.2;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    color: var(--color-grey);\n    font-weight: var(--font-weight-bold);\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n    width: 100%;\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-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    margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__content {\n    padding: var(--spacing-s) var(--spacing-m);\n  }\n}";
 
-var css_248z$1n = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1n = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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}";
 
 var css_248z$1m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
 var css_248z$1l = "@layer kol-theme-component {\n  .kol-badge {\n    font: normal normal var(--font-weight) 1em var(--font-family);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n    text-transform: uppercase;\n  }\n}";
 
-var css_248z$1k = "@layer kol-theme-component {\n  .kol-breadcrumb {\n    font: normal normal 400 calc(14rem / var(--kolibri-root-font-size, 16))/calc(16rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-breadcrumb__icon::part(icon separator)::before {\n    color: var(--color-blue);\n  }\n  .kol-breadcrumb__icon[exportparts*=separator] {\n    margin-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding: 0;\n  }\n  .kol-breadcrumb__list-element:last-child {\n    color: var(--color-grey-75);\n  }\n  .kol-breadcrumb__link {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$1k = "@layer kol-theme-component {\n  .kol-link {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-breadcrumb {\n    font: normal normal 400 calc(14rem / var(--kolibri-root-font-size, 16))/calc(16rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-breadcrumb__icon::part(icon separator)::before {\n    color: var(--color-blue);\n  }\n  .kol-breadcrumb__icon[exportparts*=separator] {\n    margin-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding: 0;\n  }\n  .kol-breadcrumb__list-element:last-child {\n    color: var(--color-grey-75);\n  }\n  .kol-breadcrumb__link {\n    font-family: var(--font-family);\n  }\n}";
 
 var css_248z$1j = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .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-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .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-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-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .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-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .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-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .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-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button--secondary:focus .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-button--ghost:focus .kol-button__text {\n    outline-offset: -2px;\n  }\n}";
 
@@ -643,35 +1053,35 @@ var css_248z$1i = "@layer kol-theme-component {\n  .kol-button {\n    font-famil
 
 var css_248z$1h = "@layer kol-theme-component {\n  .kol-card {\n    font-family: var(--font-family);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: white;\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n  .kol-card__headline {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75em;\n  }\n  .kol-card__header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n}";
 
-var css_248z$1g = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    display: block;\n    position: relative;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .combobox__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .combobox__icon {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .combobox__icon:focus {\n    outline: 0;\n  }\n  .combobox__listbox {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input: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  .input:focus-within,\n  .combobox:not(.combobox--disabled) .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var css_248z$1g = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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 {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-combobox__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    position: relative;\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$1f = "@layer kol-theme-component {\n  .kol-details {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\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    text-align: left;\n    gap: 0;\n  }\n  .kol-details__content.indented-text {\n    font-family: var(--font-family);\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-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    margin: 0;\n  }\n}";
 
 var css_248z$1e = "@layer kol-theme-component {\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$1d = "@layer kol-theme-component {\n  .kol-link {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    font-family: var(--font-family);\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\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-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n  }\n  .kol-form__alert .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}";
+var css_248z$1d = "@layer kol-theme-component {\n  .kol-link {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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 {\n    font-family: var(--font-family);\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\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-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n  }\n  .kol-form__alert .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}";
 
 var css_248z$1c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-headline--h1 {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n  }\n  .kol-headline--h2 {\n    font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.143;\n  }\n  .kol-headline--h3 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.1667;\n  }\n  .kol-headline--h4 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .kol-headline--h5 {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n  }\n  .kol-headline--h6 {\n    color: rgb(234, 0, 255);\n  }\n}";
 
-var css_248z$1b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    color: var(--color-grey);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control--label-align-left .kol-field-control__label {\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right .kol-field-control__label {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-checkbox .kol-input {\n    background-color: var(--color-white);\n    border-width: 2px;\n    border-style: solid;\n    border-color: var(--color-grey-75);\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-checkbox .kol-input:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:checked:not(:disabled):hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .kol-checkbox .kol-input--error {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked:not(:disabled):hover {\n    background-color: var(--color-red-120);\n    border-color: var(--color-red-120);\n  }\n  .kol-checkbox--variant-default {\n    min-width: unset;\n    width: unset;\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: block;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: var(--color-grey-75);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-blue);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-icon {\n    background-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-red);\n  }\n  .kol-input-checkbox--variant-button {\n    gap: var(--spacing-xs) 0;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__input {\n    order: 1;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-input-checkbox--variant-button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
+var css_248z$1b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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 {\n    color: var(--color-grey);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control--label-align-left .kol-field-control__label {\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right .kol-field-control__label {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-checkbox .kol-input {\n    background-color: var(--color-white);\n    border-width: 2px;\n    border-style: solid;\n    border-color: var(--color-grey-75);\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-checkbox .kol-input:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:checked:not(:disabled):hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .kol-checkbox .kol-input--error {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked:not(:disabled):hover {\n    background-color: var(--color-red-120);\n    border-color: var(--color-red-120);\n  }\n  .kol-checkbox--variant-default {\n    min-width: unset;\n    width: unset;\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: block;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: var(--color-grey-75);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-blue);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-icon {\n    background-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-red);\n  }\n  .kol-input-checkbox--variant-button {\n    gap: var(--spacing-xs) 0;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__input {\n    order: 1;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-input-checkbox--variant-button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
 
-var css_248z$1a = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n.kol-input-color__inputs-wrapper {\n  gap: calc(16rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__input--text, .kol-input-color__input--color {\n  background-color: var(--color-white);\n  border: 1px solid var(--color-blue);\n  min-height: calc(var(--a11y-min-size) - 8rem / var(--kolibri-root-font-size, 16));\n}";
+var css_248z$1a = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n.kol-input-color__inputs-wrapper {\n  gap: calc(16rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__input--text, .kol-input-color__input--color {\n  background-color: var(--color-white);\n  border: 1px solid var(--color-blue);\n  min-height: calc(var(--a11y-min-size) - 8rem / var(--kolibri-root-font-size, 16));\n}";
 
-var css_248z$19 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$19 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$18 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$18 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$17 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .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-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .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-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-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .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-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .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-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .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-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button--secondary:focus .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-button--ghost:focus .kol-button__text {\n    outline-offset: -2px;\n  }\n  .kol-button__text {\n    white-space: nowrap;\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-blue) !important;\n  }\n}";
+var css_248z$17 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .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-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .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-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-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .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-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .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-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .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-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button--secondary:focus .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-button--ghost:focus .kol-button__text {\n    outline-offset: -2px;\n  }\n  .kol-button__text {\n    white-space: nowrap;\n  }\n  .kol-input-container {\n    padding: 0 0 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-blue);\n  }\n}";
 
-var css_248z$16 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$16 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$15 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$15 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$14 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n  }\n  /**\n   * order the layout of form elements.\n  */\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__input {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-form-field {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    padding: 0 calc(14rem / var(--kolibri-root-font-size, 16)) calc(10rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    color: var(--color-grey);\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(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:before {\n    display: none;\n  }\n  .kol-input:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-input:focus {\n    outline-color: var(--color-blue);\n  }\n  .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input.kol-input--error {\n    border: 2px solid var(--color-red);\n  }\n  .kol-input.kol-input--error:before {\n    display: none;\n  }\n  .kol-input.kol-input--error:checked {\n    border-color: var(--color-red);\n    border-width: 7px;\n  }\n  .kol-input.kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n}";
+var css_248z$14 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n  }\n  /**\n   * order the layout of form elements.\n  */\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__input {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-form-field {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    padding: 0 calc(14rem / var(--kolibri-root-font-size, 16)) calc(10rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    color: var(--color-grey);\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(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:before {\n    display: none;\n  }\n  .kol-input:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-input:focus {\n    outline-color: var(--color-blue);\n  }\n  .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input.kol-input--error {\n    border: 2px solid var(--color-red);\n  }\n  .kol-input.kol-input--error:before {\n    display: none;\n  }\n  .kol-input.kol-input--error:checked {\n    border-color: var(--color-red);\n    border-width: 7px;\n  }\n  .kol-input.kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n}";
 
-var css_248z$13 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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}";
+var css_248z$13 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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}";
 
-var css_248z$12 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$12 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$11 = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\n  }\n}";
 
@@ -689,9 +1099,9 @@ var css_248z$X = "@layer kol-theme-component {\n  .kol-button {\n    font-family
 
 var css_248z$W = "@layer kol-theme-component {\n  .kol-progress {\n    font-family: var(--font-family);\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-blue-130);\n  }\n  .kol-progress__cycle-background {\n    stroke: var(--color-grey-25);\n  }\n  .kol-progress__cycle-progress {\n    stroke: var(--color-blue-130);\n  }\n}";
 
-var css_248z$V = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$V = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$U = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select {\n    display: block;\n    position: relative;\n  }\n  .single-select__group {\n    display: inline-flex;\n    text-align: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .single-select__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .single-select__input:not(.disabled) .single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n  }\n  .single-select__button:focus {\n    outline: 0;\n  }\n  .single-select__listbox {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 1rem / var(--kolibri-root-font-size, 16));\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n  }\n  .single-select__item {\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n  }\n  .single-select__item .radio-label {\n    align-self: center;\n    padding-left: 1em;\n  }\n  .single-select__item:focus, .single-select__item.highlighted {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input: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  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var css_248z$U = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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 {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    text-align: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-single-select__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\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$T = "@layer kol-theme-component {\n  .kol-skip-nav {\n    font-family: var(--font-family);\n  }\n  .kol-skip-nav .kol-link__text {\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: 0.25em 0.75em;\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    cursor: pointer;\n  }\n}";
 
@@ -699,15 +1109,15 @@ var css_248z$S = "@layer kol-theme-component {\n  .cycle {\n    padding: calc(2r
 
 var css_248z$R = "@layer kol-theme-component {\n  .kol-split-button {\n    font-family: var(--font-family);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    border-color: var(--color-blue);\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button .kol-span {\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\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    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-split-button .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\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    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\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$Q = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\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-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    background-color: var(--color-white);\n    font-weight: normal;\n    color: var(--color-midnight);\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-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\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    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 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    display: block;\n    border-color: var(--color-grey-75);\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  .kol-table-stateful {\n    font-family: var(--font-family);\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$Q = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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-table {\n    display: block;\n    font-family: var(--font-family);\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\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-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    background-color: var(--color-white);\n    font-weight: normal;\n    color: var(--color-midnight);\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-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\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    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 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    display: block;\n    border-color: var(--color-grey-75);\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  .kol-table-stateful {\n    font-family: var(--font-family);\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$P = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\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-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    background-color: var(--color-white);\n    font-weight: normal;\n    color: var(--color-midnight);\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-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\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    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 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    display: block;\n    border-color: var(--color-grey-75);\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$P = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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-table {\n    display: block;\n    font-family: var(--font-family);\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\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-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    background-color: var(--color-white);\n    font-weight: normal;\n    color: var(--color-midnight);\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-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\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    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 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    display: block;\n    border-color: var(--color-grey-75);\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$O = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    border-bottom: 1px solid var(--color-grey-25);\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button {\n    border: none;\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\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    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .kol-tabs .kol-button .kol-span {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n}";
 
-var css_248z$N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$M = "@layer kol-theme-component {\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    right: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(440rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n  }\n  .kol-toast-item {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-toast-item .kol-alert--msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-toast-item .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-toast-item .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-toast-item .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-toast-item .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-toast-item .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-toast-item .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n}";
+var css_248z$M = "@layer kol-theme-component {\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    right: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(440rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n  }\n  .kol-toast-item {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-toast-item .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-toast-item .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-toast-item .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-toast-item .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-toast-item .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-toast-item .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-toast-item .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--variant-msg .kol-toast-item .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--variant-msg .kol-toast-item .kol-alert__icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n}";
 
 var css_248z$L = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .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-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .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-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-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .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-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .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-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .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-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button--secondary:focus .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-button--ghost:focus .kol-button__text {\n    outline-offset: -2px;\n  }\n  .kol-link {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-link:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-link--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-link--primary:not(:disabled):hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-link--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-link--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-link--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-link--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-link--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-link--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-link--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-link--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-link--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-link--ghost:not(:disabled):hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link--secondary:focus .kol-link__text {\n    outline-offset: -6px;\n  }\n  .kol-link--ghost:focus .kol-link__text {\n    outline-offset: -2px;\n  }\n  .kol-toolbar {\n    padding: var(--spacing-s);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n    background-color: var(--color-grey-5);\n  }\n  .kol-link {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-link:hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n}";
 
@@ -767,13 +1177,13 @@ var css_248z$I = "@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    backgr
 
 var css_248z$H = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion {\n    border-radius: 8px;\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    margin: 0;\n    overflow: hidden;\n  }\n  .kol-accordion__heading {\n    font-size: 2em;\n  }\n  .kol-accordion__heading-button .kol-button {\n    border-radius: 8px;\n    outline-offset: -1px;\n    border: 0;\n    border-bottom-color: #cfdaf5;\n    border-bottom-style: solid;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    color: #171a22;\n    position: relative;\n    display: block;\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    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n    text-align: start;\n    width: 100%;\n    line-height: 1.2;\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    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    content: \"\";\n    height: calc(4rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    left: calc(24rem / var(--kolibri-root-font-size, 16));\n    top: 0;\n    width: 3rem 2;\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-weight: 900;\n    font-family: \"Font Awesome 6 Free\";\n  }\n  .kol-accordion__content {\n    -webkit-border-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-margin-start: 0;\n    border-bottom: 2px solid #cfdaf5;\n    border-inline-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    color: #515560;\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    margin-inline-start: 0;\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\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$G = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$G = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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}";
 
 var css_248z$F = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
 var css_248z$E = "@layer kol-theme-component {\n  .kol-badge {\n    font: normal normal var(--font-weight) calc(14rem / var(--kolibri-root-font-size, 16))/1em var(--font-family);\n    font-family: var(--font-family);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n    text-transform: uppercase;\n  }\n}";
 
-var css_248z$D = "@layer kol-theme-component {\n  .kol-breadcrumb {\n    font-family: var(--font-family);\n  }\n  .kol-breadcrumb__link {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$D = "@layer kol-theme-component {\n  .kol-link {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-breadcrumb {\n    font-family: var(--font-family);\n  }\n  .kol-breadcrumb__link {\n    font-family: var(--font-family);\n  }\n}";
 
 var css_248z$C = "@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .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-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .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-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .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-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\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    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button__text:active, .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-button--secondary .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-button--secondary.button:focus-visible .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n}";
 
@@ -781,35 +1191,35 @@ var css_248z$B = "@layer kol-theme-component {\n  .kol-button {\n    appearance:
 
 var css_248z$A = "@layer kol-theme-component {\n  .kol-card {\n    font-family: var(--font-family);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: white;\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n  .kol-card__headline {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75;\n  }\n  .kol-card__header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n}";
 
-var css_248z$z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .combobox__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .combobox__icon {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .combobox__icon:focus {\n    outline: 0;\n  }\n  .combobox__listbox {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input: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  .input:focus-within,\n  .combobox:not(.combobox--disabled) .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var css_248z$z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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 {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-style: solid;\n    border-width: 1px;\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-combobox__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    position: relative;\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$y = "@layer kol-theme-component {\n  .kol-details {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\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    text-align: left;\n    gap: 0;\n  }\n  .kol-details__content.indented-text {\n    font-family: var(--font-family);\n    -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-padding-start: calc(24rem / 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    border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n  }\n}";
 
 var css_248z$x = "@layer kol-theme-component {\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$w = "@layer kol-theme-component {\n  .kol-link {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    font-family: var(--font-family);\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\n    -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-padding-start: calc(24rem / 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    border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form__alert .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}";
+var css_248z$w = "@layer kol-theme-component {\n  .kol-link {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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 {\n    font-family: var(--font-family);\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\n    -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-padding-start: calc(24rem / 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    border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form__alert .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}";
 
 var css_248z$v = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-headline--h1 {\n    font-size: calc(42rem / var(--kolibri-root-font-size, 16));\n    line-height: 3.25;\n  }\n  .kol-headline--h2 {\n    font-size: calc(36rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.755;\n  }\n  .kol-headline--h3 {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.5;\n  }\n  .kol-headline--h4 {\n    font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n    line-height: 2;\n  }\n  .kol-headline--h5 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-headline--h6 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n    font-weight: var(--font-weight-bold);\n  }\n}";
 
-var css_248z$u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    color: var(--color-grey);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control--label-align-left .kol-field-control__label {\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right .kol-field-control__label {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-checkbox .kol-input {\n    background-color: var(--color-white);\n    border-width: 2px;\n    border-style: solid;\n    border-color: var(--color-grey-75);\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-checkbox .kol-input:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:checked:not(:disabled):hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .kol-checkbox .kol-input--error {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked:not(:disabled):hover {\n    background-color: var(--color-red-120);\n    border-color: var(--color-red-120);\n  }\n  .kol-checkbox--variant-default {\n    min-width: unset;\n    width: unset;\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: block;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: var(--color-grey-75);\n  }\n  .kol-checkbox--variant-switch:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-blue);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-icon {\n    background-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-red);\n  }\n  .kol-input-checkbox--variant-button {\n    gap: var(--spacing-xs) 0;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__input {\n    order: 1;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-input-checkbox--variant-button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
+var css_248z$u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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 {\n    color: var(--color-grey);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control--label-align-left .kol-field-control__label {\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right .kol-field-control__label {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-checkbox .kol-input {\n    background-color: var(--color-white);\n    border-width: 2px;\n    border-style: solid;\n    border-color: var(--color-grey-75);\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-checkbox .kol-input:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:checked:not(:disabled):hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .kol-checkbox .kol-input--error {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked:not(:disabled):hover {\n    background-color: var(--color-red-120);\n    border-color: var(--color-red-120);\n  }\n  .kol-checkbox--variant-default {\n    min-width: unset;\n    width: unset;\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: block;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: var(--color-grey-75);\n  }\n  .kol-checkbox--variant-switch:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-blue);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-icon {\n    background-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-red);\n  }\n  .kol-input-checkbox--variant-button {\n    gap: var(--spacing-xs) 0;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__input {\n    order: 1;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-input-checkbox--variant-button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
 
-var css_248z$t = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n.kol-input-color__inputs-wrapper {\n  gap: calc(16rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__input--text, .kol-input-color__input--color {\n  background-color: var(--color-white);\n  border: 1px solid var(--color-blue);\n  min-height: calc(var(--a11y-min-size) - 8rem / var(--kolibri-root-font-size, 16));\n}";
+var css_248z$t = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n.kol-input-color__inputs-wrapper {\n  gap: calc(16rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__input--text, .kol-input-color__input--color {\n  background-color: var(--color-white);\n  border: 1px solid var(--color-blue);\n  min-height: calc(var(--a11y-min-size) - 8rem / var(--kolibri-root-font-size, 16));\n}";
 
-var css_248z$s = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$s = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .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-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .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-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .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-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\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    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button__text:active, .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-button--secondary .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-button--secondary.button:focus-visible .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button__text {\n    border-radius: 0 !important;\n    white-space: nowrap;\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-blue) !important;\n  }\n}";
+var css_248z$q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .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-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .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-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .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-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\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    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button__text:active, .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-button--secondary .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-button--secondary.button:focus-visible .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button__text {\n    border-radius: 0;\n    white-space: nowrap;\n  }\n  .kol-input-container {\n    padding: 0 0 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-blue);\n  }\n}";
 
-var css_248z$p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n  }\n  /**\n   * order the layout of form elements.\n  */\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__input {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-form-field {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    padding: 0 calc(14rem / var(--kolibri-root-font-size, 16)) calc(10rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    color: var(--color-grey);\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(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    outline: 2px solid var(--color-grey-75);\n    outline-offset: 2px;\n  }\n  .kol-input:before {\n    display: none;\n  }\n  .kol-input:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-input:focus {\n    outline-color: var(--color-blue);\n  }\n  .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input.kol-input--error {\n    border: 2px solid var(--color-red);\n  }\n  .kol-input.kol-input--error:before {\n    display: none;\n  }\n  .kol-input.kol-input--error:checked {\n    border-color: var(--color-red);\n    border-width: 7px;\n  }\n  .kol-input.kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n}";
+var css_248z$n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n  }\n  /**\n   * order the layout of form elements.\n  */\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__input {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-form-field {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    padding: 0 calc(14rem / var(--kolibri-root-font-size, 16)) calc(10rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    color: var(--color-grey);\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(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    outline: 2px solid var(--color-grey-75);\n    outline-offset: 2px;\n  }\n  .kol-input:before {\n    display: none;\n  }\n  .kol-input:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-input:focus {\n    outline-color: var(--color-blue);\n  }\n  .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input.kol-input--error {\n    border: 2px solid var(--color-red);\n  }\n  .kol-input.kol-input--error:before {\n    display: none;\n  }\n  .kol-input.kol-input--error:checked {\n    border-color: var(--color-red);\n    border-width: 7px;\n  }\n  .kol-input.kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n}";
 
-var css_248z$m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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-range__inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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-range__inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$k = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\n  }\n}";
 
@@ -827,9 +1237,9 @@ var css_248z$e = "@layer kol-theme-component {\n  .kol-button {\n    --kolibri-s
 
 var css_248z$d = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select {\n    position: relative;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .single-select__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 2.5rem);\n    position: relative;\n  }\n  .single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .single-select__input:not(.disabled) .single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n  }\n  .single-select__button:focus {\n    outline: 0;\n  }\n  .single-select__listbox {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    overflow-y: auto;\n    overflow-x: hidden;\n    width: 100%;\n  }\n  .single-select__item {\n    display: flex;\n    align-items: flex-start;\n    justify-items: center;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n  }\n  .single-select__item .radio-label {\n    align-self: center;\n    padding-left: 1em;\n  }\n  .single-select__item:focus, .single-select__item.highlighted {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input: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  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var css_248z$b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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 {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-style: solid;\n    border-width: 1px;\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-single-select__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 2.5rem);\n    position: relative;\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 = "@layer kol-theme-component {\n  .kol-skip-nav {\n    font-family: var(--font-family);\n  }\n  .kol-skip-nav .kol-link__text {\n    border-radius: 4px;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    background-color: #0e47cb;\n    color: #fff;\n    cursor: pointer;\n  }\n}";
 
@@ -837,15 +1247,15 @@ var css_248z$9 = "@layer kol-theme-component {\n  .cycle {\n    padding: calc(2r
 
 var css_248z$8 = "@layer kol-theme-component {\n  .kol-split-button {\n    font-family: var(--font-family);\n    border-style: solid;\n    border-width: 2px;\n    border-color: var(--color-blue);\n    border-radius: 4px;\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    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: 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    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\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    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\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-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / 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}";
 
-var css_248z$7 = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\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-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\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-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-midnight);\n    background-color: var(--color-white);\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    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 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    display: block;\n    border-color: var(--color-grey-75);\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  .kol-table-stateful {\n    font-family: var(--font-family);\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 = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\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-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\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-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-midnight);\n    background-color: var(--color-white);\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    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 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    display: block;\n    border-color: var(--color-grey-75);\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  .kol-table-stateful {\n    font-family: var(--font-family);\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$6 = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\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-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\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-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-midnight);\n    background-color: var(--color-white);\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    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 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    display: block;\n    border-color: var(--color-grey-75);\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 = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\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-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\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-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-midnight);\n    background-color: var(--color-white);\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    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 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    display: block;\n    border-color: var(--color-grey-75);\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 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    border-bottom: 1px solid var(--color-grey-25);\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button {\n    border: none;\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\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    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .kol-tabs .kol-button .kol-span {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n}";
 
-var css_248z$4 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$4 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\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    font-size: 1.5em;\n    margin: var(--spacing-2xs);\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    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\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    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: 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-top: 1px solid var(--color-blue);\n    border-bottom: 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$3 = "@layer kol-theme-component {\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    right: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(440rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n  }\n  .kol-toast-item {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-toast-item .kol-alert--msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-toast-item .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-toast-item .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-toast-item .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-toast-item .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-toast-item .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-toast-item .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n  .kol-toast-item .heading {\n    width: 100%;\n  }\n  .kol-toast-item .heading .heading-content {\n    flex: 1;\n  }\n}";
+var css_248z$3 = "@layer kol-theme-component {\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    right: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(440rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n  }\n  .kol-toast-item {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-toast-item .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--variant-card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\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    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-toast-item .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-toast-item .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-toast-item .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-toast-item .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-toast-item .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-toast-item .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--variant-msg .kol-toast-item .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__closer .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--variant-msg .kol-toast-item .kol-alert__icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n  .kol-toast-item .heading {\n    width: 100%;\n  }\n  .kol-toast-item .heading .heading-content {\n    flex: 1;\n  }\n}";
 
 var css_248z$2 = "@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .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-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .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-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .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-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\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    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button__text:active, .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-button--secondary .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-button--secondary.button:focus-visible .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-link {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-link--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-link--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-link--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-link--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-link--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-link--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-link--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-link--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-link--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\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    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-link__text:active, .kol-link__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-link--secondary .kol-link__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-link--secondary.button:focus-visible .kol-link__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-link:focus-visible .kol-link__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-toolbar {\n    padding: var(--spacing-s);\n    border-radius: 8px;\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    background-color: var(--color-white);\n  }\n  .kol-link {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-link:hover {\n    --text-background-color: #fc0;\n  }\n}";