@public-ui/themes 3.0.0-alpha.1 → 3.0.0-be4b07a21043aa6a0cb628307b66a710b79a4b78.0

package/dist/index.cjs

@@ -3,555 +3,1040 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-var commonjsGlobal="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},loglevel={exports:{}};!function(e){var t,o;t=commonjsGlobal,o=function(){var e=function(){},t="undefined",o=typeof window!==t&&typeof window.navigator!==t&&/Trident\/|MSIE /.test(window.navigator.userAgent),n=["trace","debug","info","warn","error"],s={},a=null;function r(e,t){var o=e[t];if("function"==typeof o.bind)return o.bind(e);try{return Function.prototype.bind.call(o,e)}catch(t){return function(){return Function.prototype.apply.apply(o,[e,arguments])}}}function l(){console.log&&(console.log.apply?console.log.apply(console,arguments):Function.prototype.apply.apply(console.log,[console,arguments])),console.trace&&console.trace();}function i(){for(var o=this.getLevel(),s=0;s<n.length;s++){var a=n[s];this[a]=s<o?e:this.methodFactory(a,o,this.name);}if(this.log=this.debug,typeof console===t&&o<this.levels.SILENT)return "No console available for logging"}function c(e){return function(){typeof console!==t&&(i.call(this),this[e].apply(this,arguments));}}function h(n,s,a){return function(n){return "debug"===n&&(n="log"),typeof console!==t&&("trace"===n&&o?l:void 0!==console[n]?r(console,n):void 0!==console.log?r(console,"log"):e)}(n)||c.apply(this,arguments)}function f(e,o){var r,l,c,f=this,m="loglevel";function y(){var e;if(typeof window!==t&&m){try{e=window.localStorage[m];}catch(e){}if(typeof e===t)try{var o=window.document.cookie,n=encodeURIComponent(m),s=o.indexOf(n+"=");-1!==s&&(e=/^([^;]+)/.exec(o.slice(s+n.length+1))[1]);}catch(e){}return void 0===f.levels[e]&&(e=void 0),e}}function d(e){var t=e;if("string"==typeof t&&void 0!==f.levels[t.toUpperCase()]&&(t=f.levels[t.toUpperCase()]),"number"==typeof t&&t>=0&&t<=f.levels.SILENT)return t;throw new TypeError("log.setLevel() called with invalid level: "+e)}"string"==typeof e?m+=":"+e:"symbol"==typeof e&&(m=void 0),f.name=e,f.levels={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4,SILENT:5},f.methodFactory=o||h,f.getLevel=function(){return null!=c?c:null!=l?l:r},f.setLevel=function(e,o){return c=d(e),!1!==o&&function(e){var o=(n[e]||"silent").toUpperCase();if(typeof window!==t&&m){try{return void(window.localStorage[m]=o)}catch(e){}try{window.document.cookie=encodeURIComponent(m)+"="+o+";";}catch(e){}}}(c),i.call(f)},f.setDefaultLevel=function(e){l=d(e),y()||f.setLevel(e,!1);},f.resetLevel=function(){c=null,function(){if(typeof window!==t&&m){try{window.localStorage.removeItem(m);}catch(e){}try{window.document.cookie=encodeURIComponent(m)+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC";}catch(e){}}}(),i.call(f);},f.enableAll=function(e){f.setLevel(f.levels.TRACE,e);},f.disableAll=function(e){f.setLevel(f.levels.SILENT,e);},f.rebuild=function(){if(a!==f&&(r=d(a.getLevel())),i.call(f),a===f)for(var e in s)s[e].rebuild();},r=d(a?a.getLevel():"WARN");var u=y();null!=u&&(c=d(u)),i.call(f);}(a=new f).getLogger=function(e){if("symbol"!=typeof e&&"string"!=typeof e||""===e)throw new TypeError("You must supply a name when creating a logger.");var t=s[e];return t||(t=s[e]=new f(e,a.methodFactory)),t};var m=typeof window!==t?window.log:void 0;return a.noConflict=function(){return typeof window!==t&&window.log===a&&(window.log=m),a},a.getLoggers=function(){return s},a.default=a,a},e.exports?e.exports=o():t.log=o();}(loglevel);const j=(e,t)=>o=>o(e,t),R=(e,t)=>o=>o(e,t,{append:!1}),H=new Map,M=[],Y=new Map,o={A11yUi:{CSS_STYLE_CACHE:H,HYDRATED_HISTORY:M,STYLING_TASK_QUEUE:Y,Themes:{}}};const C=new Set,F=/--[^;]+/g,q=/:/,J=(e,t)=>{let o=t.match(F);if(Array.isArray(o)){o=o.filter((e=>q.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}C.add(e);},l=(e,t)=>"object"==typeof o.A11yUi&&null!==o.A11yUi&&"object"==typeof o.A11yUi.Themes&&null!==o.A11yUi.Themes&&"object"==typeof o.A11yUi.Themes[e]&&null!==o.A11yUi.Themes[e]&&"string"==typeof o.A11yUi.Themes[e][t]?o.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",V=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName&&void 0===t.dataset.themingFallback))break;e.removeChild(t);}},W=(e,t)=>{try{if("ssr"===o.A11yUi.Theme?.mode)throw new Error("SSR");const n=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),n.push(t);})),e.adoptedStyleSheets=n;}catch{[...t].reverse().forEach(((t,o)=>{if("string"!=typeof t||0===t.length)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",o){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="";}n.innerHTML=t,e.insertBefore(n,e.firstChild);}));}},X=(e,t,o)=>{if(!1!==o){const n=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let s;try{s=[...Array.from(e.adoptedStyleSheets)];}catch{s=[];}"before"===o?.mode?(n.reverse().forEach((e=>t.unshift(e.innerHTML))),s.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(n.forEach((e=>t.push(e.innerHTML))),s.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},w=(e,t)=>{const n=t.name||"default";let s;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");s=e.shadowRoot;}catch{s=e;}if(o.A11yUi.CSS_STYLE_CACHE.get(n)?.has(e.tagName))L(s,o.A11yUi.CSS_STYLE_CACHE.get(n)?.get(e.tagName));else {const a=l(n,"PROPERTIES"),r=l(n,"GLOBAL"),i=l(n,e.tagName);!1===C.has(n)&&J(n,r);const c=[a,r,i];X(s,c,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,c),!0===t.cache&&(!1===o.A11yUi.CSS_STYLE_CACHE.has(n)&&o.A11yUi.CSS_STYLE_CACHE.set(n,new Map),o.A11yUi.CSS_STYLE_CACHE.get(n)?.set(e.tagName,c)),L(s,c);}},L=(e,t)=>{V(e),W(e,t);},_=e=>{"debug"===e.loglevel&&o.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:o.A11yUi.STYLING_TASK_QUEUE.size});},te=e=>{o.A11yUi.STYLING_TASK_QUEUE.delete(e);},v=(e,t)=>{te(e),_(t);},se=e=>{for(const t of e)if(o.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{themeDetails:e}=o.A11yUi.STYLING_TASK_QUEUE.get(t.target);w(t.target,e),v(t.target,e);}};let y;try{y=new MutationObserver(se);}catch{y=null;}class ne{constructor(e,t,o){this.createTheme=(e,t)=>R(e,t),this.createTranslation=(e,t)=>j(e,t),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o);}}
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var loglevel = {exports: {}};
+
+/*
+* loglevel - https://github.com/pimterry/loglevel
+*
+* Copyright (c) 2013 Tim Perry
+* Licensed under the MIT license.
+*/
+
+(function (module) {
+(function (root, definition) {
+    if (module.exports) {
+        module.exports = definition();
+    } else {
+        root.log = definition();
+    }
+}(commonjsGlobal, function () {
+
+    // Slightly dubious tricks to cut down minimized file size
+    var noop = function() {};
+    var undefinedType = "undefined";
+    var isIE = (typeof window !== undefinedType) && (typeof window.navigator !== undefinedType) && (
+        /Trident\/|MSIE /.test(window.navigator.userAgent)
+    );
+
+    var logMethods = [
+        "trace",
+        "debug",
+        "info",
+        "warn",
+        "error"
+    ];
+
+    var _loggersByName = {};
+    var defaultLogger = null;
+
+    // Cross-browser bind equivalent that works at least back to IE6
+    function bindMethod(obj, methodName) {
+        var method = obj[methodName];
+        if (typeof method.bind === 'function') {
+            return method.bind(obj);
+        } else {
+            try {
+                return Function.prototype.bind.call(method, obj);
+            } catch (e) {
+                // Missing bind shim or IE8 + Modernizr, fallback to wrapping
+                return function() {
+                    return Function.prototype.apply.apply(method, [obj, arguments]);
+                };
+            }
+        }
+    }
+
+    // Trace() doesn't print the message in IE, so for that case we need to wrap it
+    function traceForIE() {
+        if (console.log) {
+            if (console.log.apply) {
+                console.log.apply(console, arguments);
+            } else {
+                // In old IE, native console methods themselves don't have apply().
+                Function.prototype.apply.apply(console.log, [console, arguments]);
+            }
+        }
+        if (console.trace) console.trace();
+    }
+
+    // Build the best logging method possible for this env
+    // Wherever possible we want to bind, not wrap, to preserve stack traces
+    function realMethod(methodName) {
+        if (methodName === 'debug') {
+            methodName = 'log';
+        }
+
+        if (typeof console === undefinedType) {
+            return false; // No method possible, for now - fixed later by enableLoggingWhenConsoleArrives
+        } else if (methodName === 'trace' && isIE) {
+            return traceForIE;
+        } else if (console[methodName] !== undefined) {
+            return bindMethod(console, methodName);
+        } else if (console.log !== undefined) {
+            return bindMethod(console, 'log');
+        } else {
+            return noop;
+        }
+    }
+
+    // These private functions always need `this` to be set properly
+
+    function replaceLoggingMethods() {
+        /*jshint validthis:true */
+        var level = this.getLevel();
+
+        // Replace the actual methods.
+        for (var i = 0; i < logMethods.length; i++) {
+            var methodName = logMethods[i];
+            this[methodName] = (i < level) ?
+                noop :
+                this.methodFactory(methodName, level, this.name);
+        }
+
+        // Define log.log as an alias for log.debug
+        this.log = this.debug;
+
+        // Return any important warnings.
+        if (typeof console === undefinedType && level < this.levels.SILENT) {
+            return "No console available for logging";
+        }
+    }
+
+    // In old IE versions, the console isn't present until you first open it.
+    // We build realMethod() replacements here that regenerate logging methods
+    function enableLoggingWhenConsoleArrives(methodName) {
+        return function () {
+            if (typeof console !== undefinedType) {
+                replaceLoggingMethods.call(this);
+                this[methodName].apply(this, arguments);
+            }
+        };
+    }
+
+    // By default, we use closely bound real methods wherever possible, and
+    // otherwise we wait for a console to appear, and then try again.
+    function defaultMethodFactory(methodName, _level, _loggerName) {
+        /*jshint validthis:true */
+        return realMethod(methodName) ||
+               enableLoggingWhenConsoleArrives.apply(this, arguments);
+    }
+
+    function Logger(name, factory) {
+      // Private instance variables.
+      var self = this;
+      /**
+       * The level inherited from a parent logger (or a global default). We
+       * cache this here rather than delegating to the parent so that it stays
+       * in sync with the actual logging methods that we have installed (the
+       * parent could change levels but we might not have rebuilt the loggers
+       * in this child yet).
+       * @type {number}
+       */
+      var inheritedLevel;
+      /**
+       * The default level for this logger, if any. If set, this overrides
+       * `inheritedLevel`.
+       * @type {number|null}
+       */
+      var defaultLevel;
+      /**
+       * A user-specific level for this logger. If set, this overrides
+       * `defaultLevel`.
+       * @type {number|null}
+       */
+      var userLevel;
+
+      var storageKey = "loglevel";
+      if (typeof name === "string") {
+        storageKey += ":" + name;
+      } else if (typeof name === "symbol") {
+        storageKey = undefined;
+      }
+
+      function persistLevelIfPossible(levelNum) {
+          var levelName = (logMethods[levelNum] || 'silent').toUpperCase();
+
+          if (typeof window === undefinedType || !storageKey) return;
+
+          // Use localStorage if available
+          try {
+              window.localStorage[storageKey] = levelName;
+              return;
+          } catch (ignore) {}
+
+          // Use session cookie as fallback
+          try {
+              window.document.cookie =
+                encodeURIComponent(storageKey) + "=" + levelName + ";";
+          } catch (ignore) {}
+      }
+
+      function getPersistedLevel() {
+          var storedLevel;
+
+          if (typeof window === undefinedType || !storageKey) return;
+
+          try {
+              storedLevel = window.localStorage[storageKey];
+          } catch (ignore) {}
+
+          // Fallback to cookies if local storage gives us nothing
+          if (typeof storedLevel === undefinedType) {
+              try {
+                  var cookie = window.document.cookie;
+                  var cookieName = encodeURIComponent(storageKey);
+                  var location = cookie.indexOf(cookieName + "=");
+                  if (location !== -1) {
+                      storedLevel = /^([^;]+)/.exec(
+                          cookie.slice(location + cookieName.length + 1)
+                      )[1];
+                  }
+              } catch (ignore) {}
+          }
+
+          // If the stored level is not valid, treat it as if nothing was stored.
+          if (self.levels[storedLevel] === undefined) {
+              storedLevel = undefined;
+          }
+
+          return storedLevel;
+      }
+
+      function clearPersistedLevel() {
+          if (typeof window === undefinedType || !storageKey) return;
+
+          // Use localStorage if available
+          try {
+              window.localStorage.removeItem(storageKey);
+          } catch (ignore) {}
+
+          // Use session cookie as fallback
+          try {
+              window.document.cookie =
+                encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+          } catch (ignore) {}
+      }
+
+      function normalizeLevel(input) {
+          var level = input;
+          if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
+              level = self.levels[level.toUpperCase()];
+          }
+          if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
+              return level;
+          } else {
+              throw new TypeError("log.setLevel() called with invalid level: " + input);
+          }
+      }
+
+      /*
+       *
+       * Public logger API - see https://github.com/pimterry/loglevel for details
+       *
+       */
+
+      self.name = name;
+
+      self.levels = { "TRACE": 0, "DEBUG": 1, "INFO": 2, "WARN": 3,
+          "ERROR": 4, "SILENT": 5};
+
+      self.methodFactory = factory || defaultMethodFactory;
+
+      self.getLevel = function () {
+          if (userLevel != null) {
+            return userLevel;
+          } else if (defaultLevel != null) {
+            return defaultLevel;
+          } else {
+            return inheritedLevel;
+          }
+      };
+
+      self.setLevel = function (level, persist) {
+          userLevel = normalizeLevel(level);
+          if (persist !== false) {  // defaults to true
+              persistLevelIfPossible(userLevel);
+          }
+
+          // NOTE: in v2, this should call rebuild(), which updates children.
+          return replaceLoggingMethods.call(self);
+      };
+
+      self.setDefaultLevel = function (level) {
+          defaultLevel = normalizeLevel(level);
+          if (!getPersistedLevel()) {
+              self.setLevel(level, false);
+          }
+      };
+
+      self.resetLevel = function () {
+          userLevel = null;
+          clearPersistedLevel();
+          replaceLoggingMethods.call(self);
+      };
+
+      self.enableAll = function(persist) {
+          self.setLevel(self.levels.TRACE, persist);
+      };
+
+      self.disableAll = function(persist) {
+          self.setLevel(self.levels.SILENT, persist);
+      };
+
+      self.rebuild = function () {
+          if (defaultLogger !== self) {
+              inheritedLevel = normalizeLevel(defaultLogger.getLevel());
+          }
+          replaceLoggingMethods.call(self);
+
+          if (defaultLogger === self) {
+              for (var childName in _loggersByName) {
+                _loggersByName[childName].rebuild();
+              }
+          }
+      };
+
+      // Initialize all the internal levels.
+      inheritedLevel = normalizeLevel(
+          defaultLogger ? defaultLogger.getLevel() : "WARN"
+      );
+      var initialLevel = getPersistedLevel();
+      if (initialLevel != null) {
+          userLevel = normalizeLevel(initialLevel);
+      }
+      replaceLoggingMethods.call(self);
+    }
+
+    /*
+     *
+     * Top-level API
+     *
+     */
+
+    defaultLogger = new Logger();
+
+    defaultLogger.getLogger = function getLogger(name) {
+        if ((typeof name !== "symbol" && typeof name !== "string") || name === "") {
+            throw new TypeError("You must supply a name when creating a logger.");
+        }
+
+        var logger = _loggersByName[name];
+        if (!logger) {
+            logger = _loggersByName[name] = new Logger(
+                name,
+                defaultLogger.methodFactory
+            );
+        }
+        return logger;
+    };
+
+    // Grab the current global log variable in case of overwrite
+    var _log = (typeof window !== undefinedType) ? window.log : undefined;
+    defaultLogger.noConflict = function() {
+        if (typeof window !== undefinedType &&
+               window.log === defaultLogger) {
+            window.log = _log;
+        }
+
+        return defaultLogger;
+    };
+
+    defaultLogger.getLoggers = function getLoggers() {
+        return _loggersByName;
+    };
+
+    // ES6 default export, for compatibility
+    defaultLogger['default'] = defaultLogger;
+
+    return defaultLogger;
+}));
+}(loglevel));
+
+const H=(t,e)=>s=>s(t,e),$=(t,e)=>s=>s(t,e,{append:false}),I=new Map,P=[],_=new Map,o={A11yUi:{CSS_STYLE_CACHE:I,HYDRATED_HISTORY:P,STYLING_TASK_QUEUE:_,Themes:{}}};const v=new Set,W=/--[^;]+/g,q=/:/,J=typeof IntersectionObserver<"u",X=typeof MutationObserver<"u",Z=(t,e)=>{let s=e.match(W);if(Array.isArray(s)){s=s.filter(n=>q.test(n));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}v.add(t);},y=(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,""):"",ee=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},te=(t,e)=>{try{if(o.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];e.forEach(a=>{const n=new CSSStyleSheet;n.replaceSync(a),s.push(n);}),t.adoptedStyleSheets=s;}catch{[...e].reverse().forEach((a,n)=>{if(typeof a!="string"||a.length===0)return;const r=document.createElement("style");switch(r.dataset.themingFallback="",n){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);});}},se=(t,e,s)=>{if(s!==false){const a=[...Array.from(t.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE")];let n;try{n=[...Array.from(t.adoptedStyleSheets)];}catch{n=[];}s?.mode==="before"?(a.reverse().forEach(r=>e.unshift(r.innerHTML)),n.reverse().forEach(r=>e.unshift(Array.from(r.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(r=>e.push(r.innerHTML)),n.forEach(r=>e.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},ae=(t,e,s)=>{const a=e.name||"default";let n;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");n=t.shadowRoot;}catch{n=t;}if(o.A11yUi.CSS_STYLE_CACHE.get(a)?.has(t.tagName))M(t,n,o.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);v.has(a)===false&&Z(a,i);const d=[r,i,c];se(n,d,e.encroachCss),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,d)),M(t,n,d,s);}},oe=t=>{const e=getComputedStyle(t).getPropertyValue("--kolbri-theme-delay").trim();if(e.endsWith("ms"))return parseFloat(e);if(e.endsWith("s"))return parseFloat(e)*1e3;const s=parseFloat(e);return isNaN(s)?0:s},j=(t,e)=>{t.style.setProperty("opacity",e);},M=(t,e,s,a)=>{ee(e),te(e,s),O(t);const n=oe(t);n<=0?j(t,a):setTimeout(()=>{j(t,a);},n);},g=t=>{const e=o.A11yUi.STYLING_TASK_QUEUE.get(t);if(e){const{styleVisibility:s,themeDetails:a}=e;ae(t,a,s),O(t);}},A=t=>{const e=setTimeout(()=>{clearTimeout(e),t.classList.contains("hydrated")?g(t):A(t);},25);},N={attributes:true,attributeFilter:["class"],childList:false,subtree:false},re={attributes:true,attributeFilter:[],childList:false,subtree:false},m=X?new MutationObserver(t=>{for(const e of t){const s=e.target;s.classList.contains("hydrated")&&(g(s),m?.observe(s,re));}}):null,b=J?new IntersectionObserver(t=>{for(const e of t){const s=e.target;e.isIntersecting&&(s.classList.contains("hydrated")?g(s):m?m?.observe(s,N):A(s),b?.unobserve(s));}},{root:null,rootMargin:"15%",threshold:0}):null,O=t=>{o.A11yUi.STYLING_TASK_QUEUE.delete(t);};class ce{Prefix;Key;Tag;createTheme=(e,s)=>$(e,s);createTranslation=(e,s)=>H(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
 
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-var KeyEnum,TagEnum;!function(t){t[t.error=0]="error",t[t.warning=1]="warning",t[t.info=2]="info",t[t.success=3]="success",t[t.message=4]="message",t[t.close=5]="close",t[t["form-description"]=6]="form-description",t[t.of=7]="of",t[t.characters=8]="characters",t[t.new=9]="new",t[t["no-entries"]=10]="no-entries",t[t["change-order"]=11]="change-order",t[t["action-running"]=12]="action-running",t[t["action-done"]=13]="action-done",t[t["page-first"]=14]="page-first",t[t["page-back"]=15]="page-back",t[t["page-next"]=16]="page-next",t[t["page-last"]=17]="page-last",t[t["entries-per-site"]=18]="entries-per-site",t[t["page-current"]=19]="page-current",t[t["page-selected"]=20]="page-selected",t[t["page-per-site"]=21]="page-per-site",t[t["logo-description"]=22]="logo-description",t[t["open-link-in-tab"]=23]="open-link-in-tab",t[t["kolibri-logo"]=24]="kolibri-logo";}(KeyEnum||(KeyEnum={})),function(t){t[t.abbr=0]="abbr",t[t.accordion=1]="accordion",t[t["accordion-group"]=2]="accordion-group",t[t.alert=3]="alert",t[t.avatar=4]="avatar",t[t.badge=5]="badge",t[t.breadcrumb=6]="breadcrumb",t[t.button=7]="button",t[t["button-group"]=8]="button-group",t[t["button-link"]=9]="button-link",t[t.card=10]="card",t[t.combobox=11]="combobox",t[t.details=12]="details",t[t.drawer=13]="drawer",t[t.form=14]="form",t[t.heading=15]="heading",t[t.icon=16]="icon",t[t.image=17]="image",t[t["indented-text"]=18]="indented-text",t[t["input-checkbox"]=19]="input-checkbox",t[t["input-color"]=20]="input-color",t[t["input-date"]=21]="input-date",t[t["input-email"]=22]="input-email",t[t["input-file"]=23]="input-file",t[t["input-number"]=24]="input-number",t[t["input-password"]=25]="input-password",t[t["input-radio"]=26]="input-radio",t[t["input-range"]=27]="input-range",t[t["input-text"]=28]="input-text",t[t.kolibri=29]="kolibri",t[t.link=30]="link",t[t["link-button"]=31]="link-button",t[t["link-group"]=32]="link-group",t[t.logo=33]="logo",t[t.modal=34]="modal",t[t.nav=35]="nav",t[t.pagination=36]="pagination",t[t.progress=37]="progress",t[t.select=38]="select",t[t.separator=39]="separator",t[t["skip-nav"]=40]="skip-nav",t[t.spin=41]="spin",t[t["single-select"]=42]="single-select",t[t["split-button"]=43]="split-button",t[t.symbol=44]="symbol",t[t.table=45]="table",t[t["table-stateless"]=46]="table-stateless",t[t["table-stateful"]=47]="table-stateful",t[t.tabs=48]="tabs",t[t.textarea=49]="textarea",t[t["toast-container"]=50]="toast-container",t[t.toolbar=51]="toolbar",t[t.tooltip=52]="tooltip",t[t.tree=53]="tree",t[t["tree-item"]=54]="tree-item";}(TagEnum||(TagEnum={}));const KoliBri=new ne("kol",KeyEnum,TagEnum);
 
-var css_248z$2L = "@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, calc(5rem / var(--kolibri-root-font-size, 16)));\n    --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n    --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n    --border-width: var(--kolibri-border-width, calc(1rem / var(--kolibri-root-font-size, 16)));\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-danger: var(--kolibri-color-danger, #b4003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-heading-wc {\n    font-weight: 700;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    border: var(--border-width) solid var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: var(--color-light);\n  }\n  .kol-tooltip-wc .tooltip-content {\n    border-radius: var(--border-radius);\n    line-height: 1.5;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
+var KeyEnum;
+(function (KeyEnum) {
+    KeyEnum[KeyEnum["error"] = 0] = "error";
+    KeyEnum[KeyEnum["warning"] = 1] = "warning";
+    KeyEnum[KeyEnum["info"] = 2] = "info";
+    KeyEnum[KeyEnum["success"] = 3] = "success";
+    KeyEnum[KeyEnum["message"] = 4] = "message";
+    KeyEnum[KeyEnum["close"] = 5] = "close";
+    KeyEnum[KeyEnum["form-description"] = 6] = "form-description";
+    KeyEnum[KeyEnum["of"] = 7] = "of";
+    KeyEnum[KeyEnum["characters"] = 8] = "characters";
+    KeyEnum[KeyEnum["new"] = 9] = "new";
+    KeyEnum[KeyEnum["no-entries"] = 10] = "no-entries";
+    KeyEnum[KeyEnum["change-order"] = 11] = "change-order";
+    KeyEnum[KeyEnum["action-running"] = 12] = "action-running";
+    KeyEnum[KeyEnum["action-done"] = 13] = "action-done";
+    KeyEnum[KeyEnum["page-first"] = 14] = "page-first";
+    KeyEnum[KeyEnum["page-back"] = 15] = "page-back";
+    KeyEnum[KeyEnum["page-next"] = 16] = "page-next";
+    KeyEnum[KeyEnum["page-last"] = 17] = "page-last";
+    KeyEnum[KeyEnum["entries-per-site"] = 18] = "entries-per-site";
+    KeyEnum[KeyEnum["page-current"] = 19] = "page-current";
+    KeyEnum[KeyEnum["page-selected"] = 20] = "page-selected";
+    KeyEnum[KeyEnum["page-per-site"] = 21] = "page-per-site";
+    KeyEnum[KeyEnum["logo-description"] = 22] = "logo-description";
+    KeyEnum[KeyEnum["open-link-in-tab"] = 23] = "open-link-in-tab";
+    KeyEnum[KeyEnum["kolibri-logo"] = 24] = "kolibri-logo";
+})(KeyEnum || (KeyEnum = {}));
+
+var TagEnum;
+(function (TagEnum) {
+    TagEnum[TagEnum["abbr"] = 0] = "abbr";
+    TagEnum[TagEnum["accordion"] = 1] = "accordion";
+    TagEnum[TagEnum["accordion-group"] = 2] = "accordion-group";
+    TagEnum[TagEnum["alert"] = 3] = "alert";
+    TagEnum[TagEnum["avatar"] = 4] = "avatar";
+    TagEnum[TagEnum["badge"] = 5] = "badge";
+    TagEnum[TagEnum["breadcrumb"] = 6] = "breadcrumb";
+    TagEnum[TagEnum["button"] = 7] = "button";
+    TagEnum[TagEnum["button-link"] = 8] = "button-link";
+    TagEnum[TagEnum["card"] = 9] = "card";
+    TagEnum[TagEnum["combobox"] = 10] = "combobox";
+    TagEnum[TagEnum["details"] = 11] = "details";
+    TagEnum[TagEnum["drawer"] = 12] = "drawer";
+    TagEnum[TagEnum["form"] = 13] = "form";
+    TagEnum[TagEnum["heading"] = 14] = "heading";
+    TagEnum[TagEnum["icon"] = 15] = "icon";
+    TagEnum[TagEnum["image"] = 16] = "image";
+    TagEnum[TagEnum["input-checkbox"] = 17] = "input-checkbox";
+    TagEnum[TagEnum["input-color"] = 18] = "input-color";
+    TagEnum[TagEnum["input-date"] = 19] = "input-date";
+    TagEnum[TagEnum["input-email"] = 20] = "input-email";
+    TagEnum[TagEnum["input-file"] = 21] = "input-file";
+    TagEnum[TagEnum["input-number"] = 22] = "input-number";
+    TagEnum[TagEnum["input-password"] = 23] = "input-password";
+    TagEnum[TagEnum["input-radio"] = 24] = "input-radio";
+    TagEnum[TagEnum["input-range"] = 25] = "input-range";
+    TagEnum[TagEnum["input-text"] = 26] = "input-text";
+    TagEnum[TagEnum["kolibri"] = 27] = "kolibri";
+    TagEnum[TagEnum["link"] = 28] = "link";
+    TagEnum[TagEnum["link-button"] = 29] = "link-button";
+    TagEnum[TagEnum["logo"] = 30] = "logo";
+    TagEnum[TagEnum["modal"] = 31] = "modal";
+    TagEnum[TagEnum["nav"] = 32] = "nav";
+    TagEnum[TagEnum["pagination"] = 33] = "pagination";
+    TagEnum[TagEnum["popover-button"] = 34] = "popover-button";
+    TagEnum[TagEnum["progress"] = 35] = "progress";
+    TagEnum[TagEnum["select"] = 36] = "select";
+    TagEnum[TagEnum["separator"] = 37] = "separator";
+    TagEnum[TagEnum["single-select"] = 38] = "single-select";
+    TagEnum[TagEnum["skip-nav"] = 39] = "skip-nav";
+    TagEnum[TagEnum["spin"] = 40] = "spin";
+    TagEnum[TagEnum["split-button"] = 41] = "split-button";
+    TagEnum[TagEnum["symbol"] = 42] = "symbol";
+    TagEnum[TagEnum["table"] = 43] = "table";
+    TagEnum[TagEnum["table-stateful"] = 44] = "table-stateful";
+    TagEnum[TagEnum["table-stateless"] = 45] = "table-stateless";
+    TagEnum[TagEnum["tabs"] = 46] = "tabs";
+    TagEnum[TagEnum["textarea"] = 47] = "textarea";
+    TagEnum[TagEnum["toast-container"] = 48] = "toast-container";
+    TagEnum[TagEnum["toolbar"] = 49] = "toolbar";
+    TagEnum[TagEnum["tooltip"] = 50] = "tooltip";
+    TagEnum[TagEnum["tree"] = 51] = "tree";
+    TagEnum[TagEnum["tree-item"] = 52] = "tree-item";
+})(TagEnum || (TagEnum = {}));
+
+const KoliBri = new ce('kol', KeyEnum, TagEnum);
+
+var Bundesministerium;
+(function (Bundesministerium) {
+    Bundesministerium["Die Bundesregierung"] = "BReg";
+    Bundesministerium["Bundesministerium der Finanzen"] = "BMF";
+    Bundesministerium["Bundesministerium des Innern, f\u00FCr Bau und Heimat"] = "BMI";
+    Bundesministerium["Ausw\u00E4rtiges Amt"] = "AA";
+    Bundesministerium["Bundesministerium f\u00FCr Wirtschaft und Energie"] = "BMWi";
+    Bundesministerium["Bundesministerium der Justiz und f\u00FCr Verbraucherschutz"] = "BMJV";
+    Bundesministerium["Bundesministerium f\u00FCr Arbeit und Soziales"] = "BMAS";
+    Bundesministerium["Bundesministerium der Verteidigung"] = "BMVg";
+    Bundesministerium["Bundesministerium f\u00FCr Ern\u00E4hrung und Landwirtschaft"] = "BMEL";
+    Bundesministerium["Bundesministerium f\u00FCr Familie, Senioren, Frauen und Jugend"] = "BMFSFJ";
+    Bundesministerium["Bundesministerium f\u00FCr Gesundheit"] = "BMG";
+    Bundesministerium["Bundesministerium f\u00FCr Verkehr und digitale Infrastruktur"] = "BMVI";
+    Bundesministerium["Bundesministerium f\u00FCr Umwelt, Naturschutz und nukleare Sicherheit"] = "BMU";
+    Bundesministerium["Bundesministerium f\u00FCr Bildung und Forschung"] = "BMBF";
+    Bundesministerium["Bundesministerium f\u00FCr wirtschaftliche Zusammenarbeit und Entwicklung"] = "BMZ";
+})(Bundesministerium || (Bundesministerium = {}));
+var Bundesamt;
+(function (Bundesamt) {
+    Bundesamt["Beschaffungsamt des Bundesministeriums des Innern"] = "BeschA";
+    Bundesamt["Bundesamt f\u00FCr Ausr\u00FCstung, Informationstechnik und Nutzung der Bundeswehr"] = "BAAINBw";
+    Bundesamt["Bundesamt f\u00FCr \u00E4u\u00DFere Restitutionen"] = "BAR";
+    Bundesamt["Bundesamt f\u00FCr Bauwesen und Raumordnung"] = "BBR";
+    Bundesamt["Bundesamt f\u00FCr Bev\u00F6lkerungsschutz und Katastrophenhilfe"] = "BBK";
+    Bundesamt["Bundesamt f\u00FCr Familie und zivilgesellschaftliche Aufgaben"] = "BAFzA";
+    Bundesamt["Bundesamt f\u00FCr G\u00FCterverkehr"] = "BAG";
+    Bundesamt["Bundesamt f\u00FCr Justiz"] = "BfJ";
+    Bundesamt["Bundesamt f\u00FCr Kartographie und Geod\u00E4sie"] = "BKG";
+    Bundesamt["Bundesamt f\u00FCr kerntechnische Entsorgungssicherheit"] = "BASE";
+    Bundesamt["Bundesamt f\u00FCr Migration und Fl\u00FCchtlinge"] = "BAMF";
+    Bundesamt["Bundesamt f\u00FCr Sicherheit in der Informationstechnik"] = "BSI";
+    Bundesamt["Bundesamt f\u00FCr Verbraucherschutz und Lebensmittelsicherheit"] = "BVL";
+    Bundesamt["Bundesamt f\u00FCr Verfassungsschutz"] = "BfV";
+    Bundesamt["Bundesamt f\u00FCr Wirtschaft und Ausfuhrkontrolle"] = "BAFA";
+    Bundesamt["Bundesamt f\u00FCr zentrale Dienste und offene Verm\u00F6gensfragen"] = "BADV";
+    Bundesamt["Bundesanstalt f\u00FCr Verwaltungsdienstleistungen"] = "BAV";
+    Bundesamt["Bundesarchiv"] = "BArch";
+    Bundesamt["Bundesaufsichtsamt f\u00FCr Flugsicherung"] = "BAF";
+    Bundesamt["Bundesausgleichsamt"] = "BAA";
+    Bundesamt["Bundeskartellamt"] = "BKartA";
+    Bundesamt["Bundeskriminalamt"] = "BKA";
+    Bundesamt["Bundesnachrichtendienst"] = "BND";
+    Bundesamt["Bundesnetzagentur f\u00FCr Elektrizit\u00E4t, Gas, Telekommunikation, Post und Eisenbahnen"] = "BNetzA";
+    Bundesamt["Bundespolizeipr\u00E4sidium"] = "BPOLP";
+    Bundesamt["Bundespr\u00FCfstelle f\u00FCr jugendgef\u00E4hrdende Medien"] = "BPjM";
+    Bundesamt["Bundessortenamt"] = "BSA";
+    Bundesamt["Bundessprachenamt"] = "BSprA";
+    Bundesamt["Bundesamt f\u00FCr Soziale Sicherung"] = "BAS";
+    Bundesamt["Bundesverwaltungsamt"] = "BVA";
+    Bundesamt["Bundeszentralamt f\u00FCr Steuern"] = "BZSt";
+    Bundesamt["Deutsches Patent- und Markenamt"] = "DPMA";
+    Bundesamt["Eisenbahn-Bundesamt"] = "EBA";
+    Bundesamt["Generalzolldirektion"] = "GZD";
+    Bundesamt["Milit\u00E4rischer Abschirmdienst"] = "MAD";
+    Bundesamt["Zentrale Stelle f\u00FCr Informationstechnik im Sicherheitsbereich"] = "ZITiS";
+})(Bundesamt || (Bundesamt = {}));
+var Bundesanstalt;
+(function (Bundesanstalt) {
+    Bundesanstalt["Informationstechnikzentrum Bund"] = "ITZBund";
+    Bundesanstalt["Bundesanstalt f\u00FCr den Digitalfunk der Beh\u00F6rden und Organisationen mit Sicherheitsaufgaben"] = "BDBOS";
+    Bundesanstalt["Bundesanstalt f\u00FCr Landwirtschaft und Ern\u00E4hrung"] = "BLE";
+    Bundesanstalt["Bundesanstalt Technisches Hilfswerk"] = "THW";
+    Bundesanstalt["Bundesinstitut f\u00FCr Arzneimittel und Medizinprodukte"] = "BfArM";
+    Bundesanstalt["Bundesinstitut f\u00FCr Bev\u00F6lkerungsforschung"] = "BiB";
+    Bundesanstalt["Bundesinstitut f\u00FCr Sportwissenschaft"] = "BISp";
+})(Bundesanstalt || (Bundesanstalt = {}));
+const BUND_LOGO_TEXT_MAP = new Map();
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Die Bundesregierung'], ['Die', 'Bundesregierung']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium der Finanzen'], ['Bundesministerium', 'der Finanzen']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium des Innern, für Bau und Heimat'], ['Bundesministerium', 'des Inneren, für Bau', 'und Heimat']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Auswärtiges Amt'], ['Auswärtiges Amt']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Wirtschaft und Energie'], ['Bundesministerium', 'für Wirtschaft', 'und Energie']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium der Justiz und für Verbraucherschutz'], [
+    'Bundesministerium',
+    'der Justiz und',
+    'für Verbraucherschutz',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Arbeit und Soziales'], ['Bundesministerium', 'für Arbeit und Soziales']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium der Verteidigung'], ['Bundesministerium', 'der Verteidigung']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Bildung und Forschung'], ['Bundesministerium', 'für Bildung', 'und Forschung']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Ernährung und Landwirtschaft'], ['Bundesministerium', 'für Ernährung', 'und Landwirtschaft']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Familie, Senioren, Frauen und Jugend'], [
+    'Bundesministerium',
+    'für Familie, Senioren, Frauen',
+    'und Jugend',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Gesundheit'], ['Bundesministerium', 'für Gesundheit']);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Umwelt, Naturschutz und nukleare Sicherheit'], [
+    'Bundesministerium',
+    'für Umwelt, Naturschutz',
+    'und nukleare Sicherheit',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für Verkehr und digitale Infrastruktur'], [
+    'Bundesministerium',
+    'für Verkehr und',
+    'digitale Infrastruktur',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesministerium['Bundesministerium für wirtschaftliche Zusammenarbeit und Entwicklung'], [
+    'Bundesministerium',
+    'für wirtschaftliche Zusammenarbeit',
+    'und Entwicklung',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Beschaffungsamt des Bundesministeriums des Innern'], ['Beschaffungsamt', 'des Bundesministeriums', 'des Innern']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Ausrüstung, Informationstechnik und Nutzung der Bundeswehr'], []);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für äußere Restitutionen'], []);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Bauwesen und Raumordnung'], []);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Bevölkerungsschutz und Katastrophenhilfe'], ['Bundesamt', 'für Bevölkerungsschutz', 'und Katastrophenhilfe']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Familie und zivilgesellschaftliche Aufgaben'], [
+    'Bundesamt',
+    'für Familie und',
+    'zivilgesellschaftliche Aufgaben',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Güterverkehr'], ['Bundesamt', 'für Güterverkehr']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Justiz'], ['Bundesamt für', 'Justiz']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Kartographie und Geodäsie'], ['Bundesamt für', 'Kartographie und Geodäsie']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für kerntechnische Entsorgungssicherheit'], ['Bundesamt für', 'kerntechnische', 'Entsorgungssicherheit']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Migration und Flüchtlinge'], ['Bundesamt', 'für Migration', 'und Flüchtlinge']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Sicherheit in der Informationstechnik'], ['Bundesamt', 'für Sicherheit in der', 'Informationstechnik']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Verbraucherschutz und Lebensmittelsicherheit'], [
+    'Bundesamt für',
+    'Verbraucherschutz und',
+    'Lebensmittelsicherheit',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Verfassungsschutz'], ['Bundesamt für', 'Verfassungsschutz']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Wirtschaft und Ausfuhrkontrolle'], ['Bundesamt', 'für Wirtschaft', 'Ausfuhrkontrolle']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für zentrale Dienste und offene Vermögensfragen'], [
+    'Bundesamt',
+    'für zentrale Dienste und',
+    'offene Vermögensfragen',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesanstalt für Verwaltungsdienstleistungen'], ['Bundesanstalt', 'für Verwaltungsdienstleistungen']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesarchiv'], ['Das', 'Bundesarchiv']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesaufsichtsamt für Flugsicherung'], ['Bundesaufsichtsamt', 'für Flugsicherung']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesausgleichsamt'], ['Bundesausgleichsamt']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundeskartellamt'], ['Bundeskartellamt']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundeskriminalamt'], ['Bundeskriminalamt']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesnachrichtendienst'], ['Bundesnachrichtendienst']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesnetzagentur für Elektrizität, Gas, Telekommunikation, Post und Eisenbahnen'], ['Bundesnetzagentur']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundespolizeipräsidium'], ['Bundespolizeipräsidium']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesprüfstelle für jugendgefährdende Medien'], ['Bundesprüfstelle', 'für jugendgefährdende', 'Medien']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundessortenamt'], ['Bundessortenamt']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundessprachenamt'], ['Bundessprachenamt']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesamt für Soziale Sicherung'], ['Bundesamt', 'für Soziale Sicherung']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundesverwaltungsamt'], ['Bundesverwaltungsamt']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Bundeszentralamt für Steuern'], ['Bundeszentralamt', 'für Steuern']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Deutsches Patent- und Markenamt'], ['Deutsches', 'Patent- und Markenamt']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Eisenbahn-Bundesamt'], ['Eisenbahn-Bundesamt']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Generalzolldirektion'], ['Generalzolldirektion']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Militärischer Abschirmdienst'], ['Bundesamt für den', 'Militärischen Abschirmdienst']);
+BUND_LOGO_TEXT_MAP.set(Bundesamt['Zentrale Stelle für Informationstechnik im Sicherheitsbereich'], [
+    'Zentrale Stelle',
+    'für Informationstechnik',
+    'im Sicherheitsbereich',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Informationstechnikzentrum Bund'], ['Informations', 'Technik', 'Zentrum Bund']);
+BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesanstalt für den Digitalfunk der Behörden und Organisationen mit Sicherheitsaufgaben'], [
+    'Bundesanstalt',
+    'für den Digitalfunk der Behörden und',
+    'Organisationen mit Sicherheitsaufgaben',
+]);
+BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesanstalt für Landwirtschaft und Ernährung'], ['Bundesanstalt für', 'Landwirtschaft und Ernährung']);
+BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesanstalt Technisches Hilfswerk'], ['Bundesanstalt', 'Technisches Hilfswerk']);
+BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Medizinprodukte'], ['Bundesinstitut', 'für Arzneimittel', 'und Medizinprodukte']);
+BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
+BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
+
+var css_248z$25 = "@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, 5px);\n    --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n    --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n    --border-width: var(--kolibri-border-width, 1px);\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n    --color-danger: var(--kolibri-color-danger, #b4003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-headline {\n    font-weight: 700;\n  }\n  .kol-tooltip__floating {\n    border: var(--border-width) solid var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip__arrow {\n    background-color: var(--color-light);\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip__content {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    line-height: 1.5;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
+
+var css_248z$24 = "@layer kol-theme-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family);\n  }\n  .kol-accordion {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  .kol-accordion__content {\n    margin: 0;\n    padding-left: 2.25em;\n    padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading {\n    margin: 0;\n  }\n  .kol-accordion__heading-button {\n    display: flex;\n    border-radius: var(--border-radius);\n    min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n  .kol-accordion__heading-button:focus-within .kol-button {\n    outline: 0;\n  }\n  .kol-accordion__heading-button .kol-span__container {\n    display: flex;\n    place-items: baseline center;\n    text-align: left;\n    gap: 0.5em;\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.1;\n  }\n  .kol-accordion__heading-button .kol-button {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-button :focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    color: var(--color-primary);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+var css_248z$23 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$2K = "@layer kol-theme-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family);\n  }\n  .kol-accordion {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  .kol-accordion__content {\n    margin: 0;\n    padding-left: 2.25em;\n    padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading {\n    margin: 0;\n  }\n  .kol-accordion__heading-button {\n    display: flex;\n    border-radius: var(--border-radius);\n    min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n  .kol-accordion__heading-button:focus-within button {\n    outline: 0;\n  }\n  .kol-accordion__heading-button .kol-span-wc > span {\n    display: flex;\n    place-items: baseline center;\n    text-align: left;\n    gap: 0.5em;\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.1;\n  }\n  .kol-accordion__heading-button button {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button button :focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    color: var(--color-primary);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$22 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$2J = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$21 = "@layer kol-theme-component {\n  .kol-badge {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  .kol-badge--has-smart-button {\n    align-items: center;\n  }\n  .kol-badge__smart-button .kol-button {\n    color: inherit;\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__smart-button .kol-button:hover {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-badge__smart-button .kol-button__text {\n    align-items: center;\n    font-style: normal;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__label {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__label .kol-span__container {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$2I = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$20 = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-breadcrumb {\n    font-family: var(--font-family);\n  }\n  .kol-breadcrumb__list-element-span {\n    color: var(--color-subtle);\n  }\n  .kol-breadcrumb__link::part(icon) {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__icon {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-subtle);\n  }\n  .kol-link {\n    line-height: 1;\n  }\n}";
 
-var css_248z$2H = "@layer kol-theme-component {\n  .kol-badge {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  .kol-badge--has-smart-button {\n    align-items: center;\n  }\n  .kol-badge__smart-button .button {\n    color: inherit;\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__smart-button .button .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__smart-button:hover .button {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-badge__label {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__label .kol-span__container {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1$ = "@layer kol-theme-component {\n  :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--tertiary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\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    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:disabled:hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n}";
 
-var css_248z$2G = "@layer kol-theme-component {\n  .kol-breadcrumb {\n    font-family: var(--font-family);\n  }\n  .kol-breadcrumb__list-element-span {\n    color: var(--color-subtle);\n  }\n  .kol-breadcrumb__link::part(icon) {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__icon {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-subtle);\n  }\n}";
+var css_248z$1_ = "@layer kol-theme-component {\n  .kol-button {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-button {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    font-size: inherit;\n  }\n  .kol-button:focus {\n    outline: none;\n    --text-border-radius: var(--border-radius);\n    --text-outline: calc(var(--border-width) * 2) solid;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--text-border-radius);\n    outline: var(--text-outline);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n}";
 
-var css_248z$2F = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var css_248z$1Z = "@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: var(--color-light);\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n  }\n  .kol-card__header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n  }\n  .kol-card__headline {\n    line-height: 1.75;\n  }\n}";
 
-var css_248z$2E = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing);\n  }\n}";
+var css_248z$1Y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\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-primary-variant);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\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: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\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    width: 100%;\n  }\n  .kol-combobox__input {\n    flex-grow: 1;\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$2D = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    font-size: inherit;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: calc(var(--border-width) * 2) solid;\n  }\n  a:hover:not([aria-disabled]) .kol-span-wc .span-label,\n  button:hover:not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .skip:focus {\n    background-color: white;\n    left: unset;\n    position: unset;\n  }\n  .access-key-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var css_248z$1X = "@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    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  .kol-details__content.indented-text {\n    font-family: var(--font-family);\n    border-left: 2px solid var(--color-primary-variant);\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading {\n    margin: 0;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .kol-details__heading-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
 
-var css_248z$2C = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n  :host > div {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: var(--color-light);\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  :host .kol-heading-wc {\n    line-height: 1.75;\n  }\n  :host div.header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1W = "@layer kol-theme-component {\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 4px var(--color-subtle);\n  }\n  .kol-drawer__wrapper--left {\n    animation: slideInLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--left.kol-drawer__wrapper--is-closing {\n    animation: slideOutLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right {\n    animation: slideInRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right.kol-drawer__wrapper--is-closing {\n    animation: slideOutRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top {\n    animation: slideInTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top.kol-drawer__wrapper--is-closing {\n    animation: slideOutTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom {\n    animation: slideInBottom 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom.kol-drawer__wrapper--is-closing {\n    animation: slideOutBottom 0.4s forwards;\n  }\n}\n@keyframes slideInLeft {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInTop {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideInBottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideOutLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n@keyframes slideOutRight {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideOutTop {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n@keyframes slideOutBottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}";
 
-var css_248z$2B = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .combobox {\n    display: block;\n    position: relative;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__input {\n    flex-grow: 1;\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input::placeholder {\n    color: var(--color-subtle);\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: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__icon:focus {\n    outline: 0;\n  }\n  .combobox__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\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;\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-primary-variant);\n    color: var(--color-light);\n    outline: 0;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error:not(.hidden-error) {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    padding: 0;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1V = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    font-family: var(--font-family);\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\n    border-left: 2px solid var(--color-primary-variant);\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n}";
 
-var css_248z$2A = "@layer kol-theme-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family);\n  }\n  .details {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  .details__content.indented-text {\n    font-family: var(--font-family);\n    border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading {\n    margin: 0;\n  }\n  .details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading-button .kol-span-wc > span {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .details__heading-button .kol-span-wc .span-label {\n    border-bottom-color: #000;\n  }\n  .details__heading-button button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
+var css_248z$1U = "@layer kol-theme-component {\n  .kol-headline--h1 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.667;\n  }\n  .kol-headline--h2 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .kol-headline--h3 {\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.333;\n  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n    color: inherit;\n    font-style: normal;\n    font-family: var(--font-family);\n  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3 {\n    font-weight: 700;\n  }\n}";
 
-var css_248z$2z = "@layer kol-theme-component {\n  .drawer__wrapper {\n    box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n  }\n  .drawer__wrapper--left {\n    animation: slideInLeft 0.4s forwards;\n  }\n  .drawer__wrapper--left.is-closing {\n    animation: slideOutLeft 0.4s forwards;\n  }\n  .drawer__wrapper--right {\n    animation: slideInRight 0.4s forwards;\n  }\n  .drawer__wrapper--right.is-closing {\n    animation: slideOutRight 0.4s forwards;\n  }\n  .drawer__wrapper--top {\n    animation: slideInTop 0.4s forwards;\n  }\n  .drawer__wrapper--top.is-closing {\n    animation: slideOutTop 0.4s forwards;\n  }\n  .drawer__wrapper--bottom {\n    animation: slideInBottom 0.4s forwards;\n  }\n  .drawer__wrapper--bottom.is-closing {\n    animation: slideOutBottom 0.4s forwards;\n  }\n}\n@keyframes slideInLeft {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInTop {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideInBottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideOutLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n@keyframes slideOutRight {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideOutTop {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n@keyframes slideOutBottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}";
+var css_248z$1T = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-form-field--disabled .kol-form-field__input {\n    outline: none;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--label-align-left:not(.kol-input-checkbox__field-control--variant-button) .kol-field-control__label {\n    padding-right: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right:not(.kol-input-checkbox__field-control--variant-button) .kol-field-control__label {\n    padding-left: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    order: 1;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: var(--border-radius);\n    appearance: none;\n    background-color: white;\n    transition: 0.5s;\n    margin: 0;\n  }\n  .kol-checkbox .kol-input:checked, .kol-checkbox .kol-input:indeterminate {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-checkbox .kol-input:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-checkbox .kol-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-checkbox .kol-input:active {\n    box-shadow: none;\n  }\n  .kol-checkbox .kol-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-checkbox.kol-checkbox--disabled {\n    opacity: 0.5;\n  }\n  .kol-checkbox--variant-default {\n    width: initial;\n    min-width: initial;\n  }\n  .kol-checkbox--variant-default .kol-input {\n    border-radius: var(--border-radius);\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-default .kol-icon {\n    color: var(--color-light);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    background-color: var(--color-subtle);\n    border-radius: 1.25em;\n    border-width: 0;\n    display: block;\n    height: 1.5em;\n    min-width: 3.5em;\n    position: relative;\n    width: 3.5em;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-switch .kol-input:focus {\n    outline-color: var(--color-primary);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-checkbox--variant-switch .kol-input:before {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 1.25em;\n    background-color: white;\n    position: absolute;\n  }\n  .kol-checkbox--variant-switch .kol-input:checked {\n    background-color: var(--color-primary);\n  }\n  .kol-checkbox--variant-switch .kol-input:checked::before {\n    transform: translateX(2em);\n  }\n  .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n    transform: translateX(1em);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    transform: translate(2em, -50%);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n    transform: translate(1em, -50%);\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__input, .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n    border-color: var(--color-primary);\n    background-color: var(--color-light);\n    color: var(--color-primary);\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__input {\n    height: 100%;\n    border-width: 1px 0 1px 1px;\n    border-style: solid none solid solid;\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n    border-width: 1px 1px 1px 0;\n    border-style: solid solid solid none;\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n    justify-self: stretch;\n    align-self: stretch;\n    display: flex;\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__label-text {\n    margin: auto auto;\n    font-weight: 700;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__label {\n    border-color: var(--color-primary);\n    background-color: var(--color-mute);\n    color: var(--color-primary);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__label {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__input, .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__label {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) 0);\n  }\n  .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) 0 calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-input-checkbox__field-control--variant-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__input {\n    border-width: 1px 1px 1px 0;\n    border-style: solid solid solid none;\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__label {\n    border-width: 1px 0 1px 1px;\n    border-style: solid none solid solid;\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) 0 calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) 0);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--hide-label .kol-field-control__input {\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--border-radius);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--disabled .kol-field-control__input {\n    opacity: 0.5;\n    outline: none;\n  }\n}";
 
-var css_248z$2y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc {\n    display: inline-block;\n  }\n  .kol-link-wc :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1;\n  }\n  .kol-link-wc :is(a, button):focus {\n    outline: none;\n  }\n  .kol-link-wc :is(a, button):focus kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-link-wc a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  .kol-link-wc button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-link-wc :is(a, button):visited {\n    color: var(--visited);\n  }\n  .kol-link-wc .skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-link-wc .skip:focus {\n    background-color: white;\n    left: unset;\n    position: unset;\n  }\n  .mandatory-fields-hint {\n    font-family: var(--font-family);\n    border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1S = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\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-light);\n  border: 1px solid var(--color-subtle);\n  min-height: calc(var(--a11y-min-size) - 8rem / var(--kolibri-root-font-size, 16));\n}";
 
-var css_248z$2x = "@layer kol-theme-component {\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    color: inherit;\n    font-style: normal;\n    font-family: var(--font-family);\n  }\n  .headline-h1,\n  .headline-h2,\n  .headline-h3 {\n    font-weight: 700;\n  }\n  .headline-h1 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.667;\n  }\n  .headline-h2 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .headline-h3 {\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.333;\n  }\n}";
+var css_248z$1R = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$2w = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-indented-text-wc > div {\n    font-family: var(--font-family);\n    border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n}";
+var css_248z$1Q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$2v = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.default {\n    grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n  }\n  .kol-input.default[data-label-align=left]:not(.hide-label) {\n    grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.switch {\n    grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n  }\n  .kol-input.switch[data-label-align=left]:not(.hide-label) {\n    grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.button {\n    gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  .kol-input > div.input {\n    display: inherit;\n    min-height: var(--a11y-min-size);\n    order: 2;\n  }\n  .kol-input > div.input input {\n    margin: 0;\n  }\n  kol-input > label {\n    order: 3;\n  }\n  .disabled .input-label,\n  .disabled .checkbox-container {\n    cursor: not-allowed;\n  }\n  .kol-input > .kol-alert.error {\n    order: 1;\n    padding-top: calc(var(--spacing) / 2);\n    grid-column: span 2/auto;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.error:not(.hidden-error) input:focus,\n  .kol-input.error:not(.hidden-error) select:focus,\n  .kol-input.error:not(.hidden-error) textarea:focus {\n    outline-color: var(--color-danger);\n  }\n  input {\n    cursor: pointer;\n    order: 1;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: var(--border-radius);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  input:focus:hover {\n    box-shadow: none;\n  }\n  input:active {\n    box-shadow: none;\n  }\n  .kol-alert {\n    display: block;\n    width: 100%;\n  }\n  /* CHECKBOX */\n  .kol-input label span {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input input[type=checkbox] {\n    appearance: none;\n    background-color: white;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  .kol-input input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-input.default input[type=checkbox] {\n    border-radius: var(--border-radius);\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.default input[type=checkbox]:indeterminate {\n    background-color: var(--color-primary);\n  }\n  .kol-input.default .icon {\n    color: var(--color-light);\n    margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.switch input[type=checkbox] {\n    background-color: var(--color-subtle);\n    border-radius: 1.25em;\n    border-width: 0;\n    display: block;\n    height: 1.5em;\n    min-width: 3.5em;\n    position: relative;\n    width: 3.5em;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.switch input[type=checkbox]:before {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 1.25em;\n    background-color: white;\n    position: absolute;\n  }\n  .kol-input.switch input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n  }\n  .kol-input.switch input[type=checkbox]:checked:before {\n    transform: translateX(2em);\n  }\n  .kol-input.switch input[type=checkbox]:indeterminate:before {\n    transform: translateX(1em);\n  }\n  .kol-input input[type=checkbox]:focus {\n    outline-color: var(--color-primary);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .switch .icon {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .switch.checked .icon {\n    transform: translate(2em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(1em, -50%);\n  }\n  .button .input {\n    border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-top-style: solid;\n    border-left-style: solid;\n    border-bottom-style: solid;\n  }\n  .button.hide-label .input {\n    border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-right-style: solid;\n  }\n  .button .input-label {\n    border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-top-style: solid;\n    border-right-style: solid;\n    border-bottom-style: solid;\n    justify-self: stretch;\n    align-self: stretch;\n    display: flex;\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .button .input-label .input-label-span {\n    margin: auto auto;\n    font-weight: 700;\n  }\n  .button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .button .input,\n  .button .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-light);\n    color: var(--color-primary);\n  }\n  .button.indeterminate .input,\n  .button.indeterminate .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-mute);\n    color: var(--color-primary);\n  }\n  .button.checked .input,\n  .button.checked .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .button:is(:active, :hover):not(.disabled) .input,\n  .button:is(:active, :hover):not(.disabled) .input-label {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .button.disabled .input {\n    opacity: 0.5;\n    outline: none;\n  }\n  .button[data-label-align=left]:not(.hide-label) {\n    column-gap: 0;\n  }\n  .button[data-label-align=left]:not(.hide-label) .input {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n  }\n  .button[data-label-align=left]:not(.hide-label) .input-label {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1P = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}\n@layer kol-theme-component {\n  .kol-input-container {\n    padding: 0 0 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--tertiary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\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    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:disabled:hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-input-container {\n    gap: initial;\n    padding: 0 0 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__filename {\n    color: var(--color-subtle);\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-primary);\n  }\n  .kol-button__text {\n    border-top-right-radius: calc(var(--border-radius) - 2px);\n    border-bottom-right-radius: calc(var(--border-radius) - 2px);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    white-space: nowrap;\n  }\n  .kol-input {\n    padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n    background-color: transparent;\n  }\n}";
 
-var css_248z$2u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-input .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-input .input input {\n    border: none;\n  }\n  .kol-input .input input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input .input input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-theme-component {\n  input[type=color] {\n    border: none;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=color] {\n    background-color: transparent;\n  }\n}";
+var css_248z$1O = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$2t = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-input .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-input .input input {\n    border: none;\n  }\n  .kol-input .input input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input .input input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$2s = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-input .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-input .input input {\n    border: none;\n  }\n  .kol-input .input input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input .input input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1M = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field {\n    border: 0;\n    display: grid;\n    font-family: var(--font-family);\n    margin: 0;\n    padding: 0;\n  }\n  .kol-form-field--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field__label {\n    display: inline-block;\n    padding: 0;\n  }\n  .kol-form-field__input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__input--orientation-horizontal {\n    margin-top: calc(var(--spacing) / 2);\n    gap: var(--spacing) calc(var(--spacing) * 2);\n  }\n  .kol-field-control__label {\n    padding-top: 0.1em;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-radio {\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 50%;\n    line-height: 1.5;\n  }\n  .kol-input-radio:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-input-radio:focus {\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-radio:focus:hover {\n    box-shadow: none;\n  }\n  .kol-input-radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-input-radio:disabled {\n    background-color: var(--color-mute-variant);\n  }\n  .kol-input--error:focus {\n    outline-color: var(--color-danger);\n  }\n  .kol-field-control__hint,\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-alert--type-error {\n    margin-left: -0.25em;\n  }\n}";
 
-var css_248z$2r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-input .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-input .input input {\n    border: none;\n  }\n  .kol-input .input input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input .input input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-theme-component {\n  .kol-input .input input[type=file] {\n    padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=file] {\n    background-color: transparent;\n  }\n}";
+var css_248z$1L = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input-range__inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$2q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-input .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-input .input input {\n    border: none;\n  }\n  .kol-input .input input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input .input input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1K = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$2p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-input .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-input .input input {\n    border: none;\n  }\n  .kol-input .input input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input .input input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1J = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$2o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  label {\n    cursor: pointer;\n    display: grid;\n    line-height: 1.25;\n    gap: calc(var(--spacing) * 2);\n    width: 100%;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  input:focus:hover {\n    box-shadow: none;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n  }\n  .kol-alert {\n    display: block;\n    width: 100%;\n  }\n  .required legend > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  /* RADIO */\n  fieldset {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    display: grid;\n    gap: 0.25em;\n  }\n  .radio-input-wrapper {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    position: relative;\n  }\n  .radio-input-wrapper label {\n    cursor: pointer;\n    display: flex;\n    padding-left: calc(var(--spacing) / 2);\n    width: 100%;\n  }\n  .radio-input-wrapper label span {\n    margin-top: 0.125em;\n  }\n  .radio-input-wrapper input[type=radio] {\n    appearance: none;\n    transition: 0.5s;\n    border-radius: 100%;\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  .radio-input-wrapper input[type=radio]:before {\n    content: \"\";\n    cursor: pointer;\n    border-radius: 100%;\n    display: block;\n  }\n  .radio-input-wrapper input[type=radio]:checked:before {\n    background-color: var(--color-primary);\n  }\n  .radio-input-wrapper input[type=radio]:disabled {\n    cursor: not-allowed;\n    background-color: var(--color-mute-variant);\n  }\n  .kol-alert.error {\n    order: 3;\n  }\n  .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  fieldset legend {\n    order: 2;\n    display: contents;\n  }\n  fieldset .kol-input {\n    display: grid;\n    order: 2;\n  }\n  .kol-input .hint {\n    order: 3;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  fieldset.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  fieldset.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  fieldset.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  fieldset.error:not(.hidden-error) input:focus,\n  fieldset.error:not(.hidden-error) select:focus,\n  fieldset.error:not(.hidden-error) textarea:focus {\n    outline-color: var(--color-danger);\n  }\n  fieldset.error:not(.hidden-error) .kol-alert.error {\n    margin-left: -0.25em;\n  }\n  fieldset.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing) calc(var(--spacing) * 2);\n    align-items: flex-start;\n  }\n  fieldset.horizontal legend {\n    display: inline-block;\n    margin-bottom: calc(var(--spacing) / 2);\n  }\n  fieldset .input-slot {\n    gap: var(--spacing);\n  }\n  .radio-input-wrapper label {\n    padding-left: 0;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1I = "@layer kol-theme-component {\n  :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n  .kol-link__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-link--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-link--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-link--primary:not([disabled]):hover, .kol-link--secondary:not([disabled]):hover, .kol-link--tertiary:not([disabled]):hover, .kol-link--normal:not([disabled]):hover, .kol-link--danger:not([disabled]):hover, .kol-link--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-link--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\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    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-link__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-link--hide-label .kol-link__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-link:disabled:hover .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$2n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error:not(.hidden-error) {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input.icon-left > .kol-icon:first-child {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input.icon-right > .kol-icon:last-child {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1H = "@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 4px var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n}";
 
-var css_248z$2m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-input .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-input .input input {\n    border: none;\n  }\n  .kol-input .input input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input .input input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1G = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  :host {\n    font-family: inherit;\n  }\n  .kol-link {\n    line-height: 1;\n  }\n}";
 
-var css_248z$2l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$1F = "@layer kol-theme-component {\n  :host {\n    background-color: var(--color-mute);\n  }\n  .kol-nav {\n    font-family: var(--font-family);\n  }\n  .kol-nav__list {\n    list-style: none;\n  }\n  .kol-nav__list--nested {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__list--nested .kol-link,\n  .kol-nav__list--nested .kol-button {\n    font-weight: normal !important;\n    border-left-color: transparent !important;\n  }\n  .kol-nav__entry--link {\n    display: flex;\n  }\n  .kol-nav__entry .kol-link:hover {\n    text-decoration: underline;\n  }\n  .kol-nav__entry .kol-link,\n  .kol-nav__entry .kol-button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .kol-nav__entry .kol-link:focus-visible,\n  .kol-nav__entry .kol-button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__list--vertical .kol-nav__entry .kol-link,\n  .kol-nav__list--vertical .kol-nav__entry .kol-button {\n    border-left: 2px solid transparent;\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav--horizontal .kol-nav__entry .kol-link,\n  .kol-nav--horizontal .kol-nav__entry .kol-button {\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-link,\n  .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-button {\n    border-left-color: var(--color-primary);\n  }\n  .kol-nav__list-item--active .kol-nav__entry .kol-link,\n  .kol-nav__list-item--active .kol-nav__entry .kol-button {\n    font-weight: bold;\n  }\n  .kol-nav__expand-button .kol-button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .kol-nav__expand-button .kol-button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__expand-button .kol-button__text {\n    justify-content: center;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-nav__toggle-button .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__toggle-button .kol-button:disabled:hover .kol-nav__toggle-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n}";
 
-var css_248z$2k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    transition: outline-offset 0.2s linear;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n}";
+var css_248z$1E = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-pagination__button--selected .kol-button {\n    opacity: 1;\n  }\n  .kol-button__text {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n    border: 0;\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .kol-button:active .kol-button__text {\n    color: var(--color-light);\n    outline: none;\n  }\n}";
 
-var css_248z$2j = "@layer kol-theme-component {\n  :host {\n    font-family: inherit;\n  }\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .skip:focus {\n    background-color: white;\n    left: unset;\n    position: unset;\n  }\n}";
+var css_248z$1D = "@layer kol-theme-component {\n  :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--tertiary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\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    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:disabled:hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-popover-button__popover {\n    border: var(--border-width) solid var(--color-primary);\n    padding: var(--spacing);\n  }\n}";
 
-var css_248z$2i = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  nav {\n    background-color: var(--color-mute);\n  }\n  ul {\n    list-style: none;\n  }\n  .kol-link-wc {\n    display: flex;\n  }\n  .entry-item a,\n  .entry-item .button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .vertical .entry-item a,\n  .vertical .entry-item .button {\n    border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .horizontal .entry-item a,\n  .horizontal .entry-item .button {\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .vertical .active .entry-item a,\n  .vertical .active .entry-item .button {\n    border-left-color: var(--color-primary);\n  }\n  .entry-item a:focus-visible,\n  .entry-item .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .entry-item a:hover {\n    text-decoration: underline;\n  }\n  .list .list {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .active .entry-item a,\n  .active .entry-item .button {\n    font-weight: bold;\n  }\n  .active .list .entry-item a,\n  .active .list .entry-item .button {\n    font-weight: normal;\n    border-left-color: transparent;\n  }\n  .expand-button {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .expand-button .button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .expand-button .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .expand-button .button-inner {\n    justify-content: center;\n  }\n}";
+var css_248z$1C = "@layer kol-theme-component {\n  .kol-progress {\n    font-family: var(--font-family);\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-primary-variant);\n  }\n  .kol-progress__cycle-background {\n    stroke: var(--color-mute-variant);\n  }\n  .kol-progress__cycle-progress {\n    stroke: var(--color-primary-variant);\n  }\n}";
 
-var css_248z$2h = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .button:focus {\n    outline: none;\n  }\n  .button-inner {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .button:focus .button-inner {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .button:is(:active, :hover):not(:disabled) .button-inner {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .button:active .button-inner {\n    color: var(--color-light);\n    outline: none;\n  }\n  .selected button {\n    opacity: 1;\n  }\n  .selected .button-inner {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n    border: 0;\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    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-select {\n    border: none;\n  }\n  .kol-select[multiple] {\n    overflow: auto;\n  }\n  .kol-select__option {\n    margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n    border-radius: var(--border-radius);\n  }\n  .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-select:not([multiple]) .kol-select__option {\n    padding: 0.5em;\n  }\n}";
 
-var css_248z$2g = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  :host svg line:first-child,\n  :host svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-mute-variant);\n  }\n  :host svg line:last-child,\n  :host svg circle:last-child {\n    fill: transparent;\n    stroke: var(--color-primary);\n  }\n  .cycle .progress {\n    stroke: var(--color-primary-variant);\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    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\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-primary-variant);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\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: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\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  }\n  .kol-single-select__input {\n    flex-grow: 1;\n    border: none;\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-subtle);\n  }\n}";
 
-var css_248z$2f = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-input .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-input .input input {\n    border: none;\n  }\n  .kol-input .input input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input .input input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-theme-component {\n  .input > .kol-icon {\n    width: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  select {\n    border: none;\n  }\n  select[multiple] {\n    overflow: auto;\n  }\n  select option {\n    margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n  }\n  select option:disabled {\n    cursor: not-allowed;\n  }\n  select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  select:not([multiple]) option {\n    padding: 0.5em;\n  }\n}";
+var css_248z$1z = "@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: var(--a11y-min-size);\n    border-style: solid;\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: 1;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    cursor: pointer;\n  }\n}";
 
-var css_248z$2e = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .single-select__group {\n    width: 100%;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__input {\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .single-select__input::placeholder {\n    color: var(--color-subtle);\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-primary);\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__button:focus {\n    outline: 0;\n  }\n  .single-select__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\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    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item .radio-label {\n    align-self: center;\n    padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item:focus, .single-select__item.highlighted {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n    outline: 0;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error:not(.hidden-error) {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    padding: 0;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1y = "@layer kol-theme-component {\n  .kol-split-button {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .kol-split-button__button .kol-button .kol-span {\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n  }\n  .kol-split-button__horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: 2px;\n    width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button__secondary-button {\n    height: 100%;\n  }\n  .kol-split-button__secondary-button .kol-span {\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n  }\n  .kol-split-button .kol-span {\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-split-button .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-split-button .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-split-button .kol-button--primary:not([disabled]):hover, .kol-split-button .kol-button--secondary:not([disabled]):hover, .kol-split-button .kol-button--tertiary:not([disabled]):hover, .kol-split-button .kol-button--normal:not([disabled]):hover, .kol-split-button .kol-button--danger:not([disabled]):hover, .kol-split-button .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\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    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\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--hide-label .kol-split-button .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-split-button .kol-button:disabled:hover .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    box-shadow: none;\n  }\n  .kol-split-button__button .kol-button__text {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .kol-split-button__secondary-button .kol-button__text {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .kol-split-button .kol-button {\n    height: 100%;\n  }\n  .kol-split-button .kol-button__text {\n    height: 100%;\n    border: none;\n  }\n}";
 
-var css_248z$2d = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: 1;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    cursor: pointer;\n  }\n}";
+var css_248z$1x = "@layer kol-theme-component {\n  .kol-table-settings {\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-table-settings__content .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled]):hover, .kol-table-settings__content .kol-button--normal:not([disabled]):hover, .kol-table-settings__content .kol-button--danger:not([disabled]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-table-settings__content .kol-button:disabled:hover .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    border-top: var(--border-width) solid var(--color-mute-variant);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(var(--a11y-min-size) + 2px);\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 3px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-table-stateful__pagination {\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
 
-var css_248z$2c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .popover {\n    background-color: #fff;\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var css_248z$1w = "@layer kol-theme-component {\n  .kol-table-settings {\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-table-settings__content .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled]):hover, .kol-table-settings__content .kol-button--normal:not([disabled]):hover, .kol-table-settings__content .kol-button--danger:not([disabled]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-table-settings__content .kol-button:disabled:hover .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    border-top: var(--border-width) solid var(--color-mute-variant);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(var(--a11y-min-size) + 2px);\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 3px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n}";
 
-var css_248z$2b = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  @media (min-width: 1024px) {\n    div.pagination .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}\n@layer kol-theme-component {\n  :host,\n  .kol-table-stateless-wc * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  :host > div,\n  kol-table-stateless-wc > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-primary);\n  }\n  tr.foot-spacer,\n  tr.head-spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  tr.foot-spacer td,\n  tr.head-spacer td {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  tr.foot-spacer td {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  tr.head-spacer td {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  table,\n  table caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  th {\n    background-color: var(--color-light);\n  }\n  th[aria-sort=ascending] .button,\n  th[aria-sort=descending] .button {\n    font-weight: 700;\n  }\n  th div {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  table tbody tr:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  th,\n  td {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n  .input input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  .input input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input:focus:hover {\n    box-shadow: none;\n  }\n  .input input[type=checkbox] {\n    border-color: var(--color-subtle);\n    border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .input .icon {\n    color: var(--color-light);\n  }\n  .input.indeterminate input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .input kol-icon:hover ~ input[type=checkbox],\n  .input input[type=checkbox]:hover {\n    border-color: var(--color-primary);\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .input input[type=radio]:checked {\n    border-color: var(--color-primary);\n  }\n  .input input[type=radio]:checked:before {\n    background-color: var(--color-primary);\n  }\n}";
+var css_248z$1v = "@layer kol-theme-component {\n  .kol-tabs {\n    font-family: var(--font-family);\n    display: grid;\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-display: grid;\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: flex;\n    --grid-template-rows: 1fr auto;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-top {\n    --display: flex;\n    --grid-template-rows: auto 1fr;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: var(--display);\n    flex-wrap: wrap;\n    gap: var(--button-group-gap);\n    order: var(--button-group-order);\n  }\n  .kol-tabs .kol-button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    border: none;\n    font-style: normal;\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n  }\n  .kol-tabs .kol-button:hover {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n    padding-bottom: 0.25em;\n  }\n  .kol-tabs .kol-button.selected .kol-span__container {\n    border-bottom: 0.25em solid;\n  }\n  .kol-tabs .kol-button .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-icon {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__content {\n    padding: 0.25em 0;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n  .kol-tabs .kol-button-wc {\n    width: 100%;\n  }\n}";
 
-var css_248z$2a = "@layer kol-theme-component {\n  :host,\n  .kol-table-stateless-wc * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  :host > div,\n  kol-table-stateless-wc > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-primary);\n  }\n  tr.foot-spacer,\n  tr.head-spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  tr.foot-spacer td,\n  tr.head-spacer td {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  tr.foot-spacer td {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  tr.head-spacer td {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  table,\n  table caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  th {\n    background-color: var(--color-light);\n  }\n  th[aria-sort=ascending] .button,\n  th[aria-sort=descending] .button {\n    font-weight: 700;\n  }\n  th div {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  table tbody tr:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  th,\n  td {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n  .input input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  .input input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input:focus:hover {\n    box-shadow: none;\n  }\n  .input input[type=checkbox] {\n    border-color: var(--color-subtle);\n    border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .input .icon {\n    color: var(--color-light);\n  }\n  .input.indeterminate input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .input kol-icon:hover ~ input[type=checkbox],\n  .input input[type=checkbox]:hover {\n    border-color: var(--color-primary);\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .input input[type=radio]:checked {\n    border-color: var(--color-primary);\n  }\n  .input input[type=radio]:checked:before {\n    background-color: var(--color-primary);\n  }\n}";
+var css_248z$1u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}\n@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter {\n    order: 4;\n  }\n  .kol-form-field__hint {\n    order: 5;\n  }\n  .kol-textarea {\n    border: none;\n    display: block;\n    overflow: auto;\n  }\n  .kol-textarea::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$29 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .tabs-button-group {\n    display: inline-flex;\n    gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    font-style: normal;\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n  }\n  button:hover {\n    color: var(--color-primary);\n  }\n  button.primary,\n  button.selected {\n    color: var(--color-primary);\n  }\n  button:not(.selected) .kol-span-wc > span {\n    padding-bottom: 0.25em;\n  }\n  button.selected .kol-span-wc > span {\n    border-bottom: 0.25em solid;\n  }\n  button .kol-span-wc > span {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .tabs-content {\n    padding: 0.25em 0;\n  }\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  div.grid {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .tabs-button-group {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .tabs-button-group {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .tabs-button-group {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child {\n    margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n  }\n  :host > .tabs-align-bottom > .tabs-button-group > div > div {\n    margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .tabs-button-group {\n    order: 0;\n  }\n  :host > .tabs-align-top .tabs-button-group > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .tabs-button-group > div > div:first-child {\n    margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n  }\n  :host > .tabs-align-top > .tabs-button-group > div > div {\n    margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left {\n    grid-template-columns: auto 1fr;\n  }\n  :host > div.tabs-align-right {\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-left .tabs-button-group,\n  :host > .tabs-align-top .tabs-button-group {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .tabs-button-group,\n  :host > .tabs-align-right .tabs-button-group {\n    order: 1;\n  }\n  :host > .tabs-align-left .tabs-button-group,\n  :host > .tabs-align-right .tabs-button-group {\n    gap: inherit;\n  }\n  :host > div.tabs-align-left .tabs-button-group > div,\n  :host > div.tabs-align-left .tabs-button-group > div > div,\n  :host > div.tabs-align-right .tabs-button-group > div,\n  :host > div.tabs-align-right .tabs-button-group > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n  :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .tabs-button-group div,\n  :host > div.tabs-align-top .tabs-button-group div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :host .tabs-button-group button {\n    border: none;\n  }\n}";
+var css_248z$1t = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\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  }\n  .kol-toast-item {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$28 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error:not(.hidden-error) {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  textarea {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  textarea:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  select[multiple],\n  textarea {\n    overflow: auto;\n  }\n  textarea {\n    display: block;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1s = "@layer kol-theme-component {\n  :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--tertiary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\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    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:disabled:hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  :host {\n    --kolbri-theme-delay: 0.5s;\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n  .kol-link__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-link--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-link--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-link--primary:not([disabled]):hover, .kol-link--secondary:not([disabled]):hover, .kol-link--tertiary:not([disabled]):hover, .kol-link--normal:not([disabled]):hover, .kol-link--danger:not([disabled]):hover, .kol-link--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-link--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\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    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-link__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-link--hide-label .kol-link__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-link:disabled:hover .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-toolbar {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    background-color: var(--color-light);\n    border-width: var(--border-width);\n    border-style: solid;\n  }\n  .kol-link {\n    text-decoration: none;\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n}";
 
-var css_248z$27 = "@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  }\n  .toast {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert {\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1r = "@layer kol-theme-component {\n  .kol-tree-item {\n    --tree-item-indentation: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link {\n    display: block;\n    border: 1px solid transparent;\n  }\n  .kol-tree-item__link .kol-link {\n    color: var(--color-text);\n    text-align: left;\n  }\n  .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n    border: 1px solid var(--color-primary);\n    background-color: var(--color-primary-variant);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    outline-offset: 0;\n    color: var(--color-light);\n  }\n  .kol-tree-item__link--active {\n    background-color: var(--color-primary);\n  }\n  .kol-tree-item__link--active .kol-link {\n    color: var(--color-light);\n  }\n  .kol-tree-item__toggle-button:hover .kol-tree-item__toggle-button-icon::part(icon) {\n    transform: scale(1.6);\n  }\n  .kol-tree-item__text {\n    text-decoration: none;\n  }\n}";
 
-var css_248z$26 = "@layer kol-theme-component {\n  .toolbar {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    background-color: var(--color-light);\n    border-width: var(--border-width);\n    border-style: solid;\n  }\n}";
-
-var css_248z$25 = "@layer kol-theme-component {\n  .tree-link {\n    display: block;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n  }\n  .tree-link:hover, .tree-link:focus-within {\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n    background-color: var(--color-primary-variant);\n  }\n  .tree-link:hover > a, .tree-link:focus-within > a {\n    outline-offset: 0;\n  }\n  .tree-link:hover > a,\n  .tree-link:hover .toggle-button, .tree-link:focus-within > a,\n  .tree-link:focus-within .toggle-button {\n    color: var(--color-light);\n  }\n  .tree-link.active {\n    background-color: var(--color-primary);\n  }\n  .tree-link.active a,\n  .tree-link.active .toggle-button {\n    color: var(--color-light);\n  }\n  .tree-link a {\n    display: block;\n    color: var(--color-text);\n    text-decoration: none;\n    text-align: left;\n  }\n  .tree-link a .toggle-button {\n    display: inline-block;\n  }\n  .tree-link a .toggle-button:hover {\n    transform: scale(1.3);\n  }\n}";
-
-var css_248z$24 = "@layer kol-theme-component {\n  .tree ul {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    border-radius: var(--border-radius);\n  }\n  .tree:focus-within {\n    outline: 0;\n  }\n  .tree:focus-within ul {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n  }\n}";
+var css_248z$1q = "@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    border: 2px solid transparent;\n    border-radius: var(--border-radius);\n  }\n  .kol-tree:focus-within {\n    outline: 0;\n  }\n  .kol-tree:focus-within ul {\n    border: 2px solid var(--color-primary);\n  }\n}";
 
 const DEFAULT = KoliBri.createTheme('default', {
-    GLOBAL: css_248z$2L,
-    'KOL-ACCORDION': css_248z$2K,
-    'KOL-ALERT': css_248z$2J,
-    'KOL-AVATAR': css_248z$2I,
-    'KOL-BADGE': css_248z$2H,
-    'KOL-BREADCRUMB': css_248z$2G,
-    'KOL-BUTTON': css_248z$2F,
-    'KOL-BUTTON-GROUP': css_248z$2E,
-    'KOL-BUTTON-LINK': css_248z$2D,
-    'KOL-CARD': css_248z$2C,
-    'KOL-COMBOBOX': css_248z$2B,
-    'KOL-DETAILS': css_248z$2A,
-    'KOL-DRAWER': css_248z$2z,
-    'KOL-FORM': css_248z$2y,
-    'KOL-HEADING': css_248z$2x,
-    'KOL-INDENTED-TEXT': css_248z$2w,
-    'KOL-INPUT-CHECKBOX': css_248z$2v,
-    'KOL-INPUT-COLOR': css_248z$2u,
-    'KOL-INPUT-DATE': css_248z$2t,
-    'KOL-INPUT-EMAIL': css_248z$2s,
-    'KOL-INPUT-FILE': css_248z$2r,
-    'KOL-INPUT-NUMBER': css_248z$2q,
-    'KOL-INPUT-PASSWORD': css_248z$2p,
-    'KOL-INPUT-RADIO': css_248z$2o,
-    'KOL-INPUT-RANGE': css_248z$2n,
-    'KOL-INPUT-TEXT': css_248z$2m,
-    'KOL-KOLIBRI': css_248z$2l,
-    'KOL-LINK': css_248z$2j,
-    'KOL-LINK-BUTTON': css_248z$2k,
-    'KOL-NAV': css_248z$2i,
-    'KOL-PAGINATION': css_248z$2h,
-    'KOL-PROGRESS': css_248z$2g,
-    'KOL-SELECT': css_248z$2f,
-    'KOL-SINGLE-SELECT': css_248z$2e,
-    'KOL-SKIP-NAV': css_248z$2d,
-    'KOL-SPLIT-BUTTON': css_248z$2c,
-    'KOL-TABLE-STATEFUL': css_248z$2b,
-    'KOL-TABLE-STATELESS': css_248z$2a,
-    'KOL-TABS': css_248z$29,
-    'KOL-TEXTAREA': css_248z$28,
-    'KOL-TOAST-CONTAINER': css_248z$27,
-    'KOL-TOOLBAR': css_248z$26,
-    'KOL-TREE': css_248z$24,
-    'KOL-TREE-ITEM': css_248z$25,
+    GLOBAL: css_248z$25,
+    'KOL-ACCORDION': css_248z$24,
+    'KOL-ALERT': css_248z$23,
+    'KOL-AVATAR': css_248z$22,
+    'KOL-BADGE': css_248z$21,
+    'KOL-BREADCRUMB': css_248z$20,
+    'KOL-BUTTON': css_248z$1$,
+    'KOL-BUTTON-LINK': css_248z$1_,
+    'KOL-CARD': css_248z$1Z,
+    'KOL-COMBOBOX': css_248z$1Y,
+    'KOL-DETAILS': css_248z$1X,
+    'KOL-DRAWER': css_248z$1W,
+    'KOL-FORM': css_248z$1V,
+    'KOL-HEADING': css_248z$1U,
+    'KOL-INPUT-CHECKBOX': css_248z$1T,
+    'KOL-INPUT-COLOR': css_248z$1S,
+    'KOL-INPUT-DATE': css_248z$1R,
+    'KOL-INPUT-EMAIL': css_248z$1Q,
+    'KOL-INPUT-FILE': css_248z$1P,
+    'KOL-INPUT-NUMBER': css_248z$1O,
+    'KOL-INPUT-PASSWORD': css_248z$1N,
+    'KOL-INPUT-RADIO': css_248z$1M,
+    'KOL-INPUT-RANGE': css_248z$1L,
+    'KOL-INPUT-TEXT': css_248z$1K,
+    'KOL-KOLIBRI': css_248z$1J,
+    'KOL-LINK': css_248z$1G,
+    'KOL-LINK-BUTTON': css_248z$1I,
+    'KOL-MODAL': css_248z$1H,
+    'KOL-NAV': css_248z$1F,
+    'KOL-PAGINATION': css_248z$1E,
+    'KOL-POPOVER-BUTTON': css_248z$1D,
+    'KOL-PROGRESS': css_248z$1C,
+    'KOL-SELECT': css_248z$1B,
+    'KOL-SINGLE-SELECT': css_248z$1A,
+    'KOL-SKIP-NAV': css_248z$1z,
+    'KOL-SPLIT-BUTTON': css_248z$1y,
+    'KOL-TABLE-STATEFUL': css_248z$1x,
+    'KOL-TABLE-STATELESS': css_248z$1w,
+    'KOL-TABS': css_248z$1v,
+    'KOL-TEXTAREA': css_248z$1u,
+    'KOL-TOAST-CONTAINER': css_248z$1t,
+    'KOL-TOOLBAR': css_248z$1s,
+    'KOL-TREE': css_248z$1q,
+    'KOL-TREE-ITEM': css_248z$1r,
 });
 
-var css_248z$23 = "@layer kol-theme-global {\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #f2f2f2;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #626262;\n  }\n  :host {\n    --color-blue: #004494;\n    --color-yellow: #ffd617;\n    --color-grey: #404040;\n    --color-blue-130: #002f67;\n    --color-blue-120: #003776;\n    --color-blue-110: #003d84;\n    --color-blue-100: var(--color-blue);\n    --color-blue-75: #4073af;\n    --color-blue-50: #bfd0e4;\n    --color-blue-25: #bfd0e4;\n    --color-blue-5: #f2f5f9;\n    --color-yellow-120: #f8ae21;\n    --color-yellow-110: #fbc11d;\n    --color-yellow-100: var(--color-yellow);\n    --color-yellow-75: #ffde39;\n    --color-yellow-50: #ffe879;\n    --color-yellow-25: #fff4bb;\n    --color-grey-100: var(--color-grey);\n    --color-grey-75: #707070;\n    --color-grey-50: #9f9f9f;\n    --color-grey-25: #cfcfcf;\n    --color-grey-20: #d9d9d9;\n    --color-grey-15: #e3e3e3;\n    --color-grey-10: #ebebeb;\n    --color-grey-5: #f5f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-blue-n: #006fb4;\n    --color-orange: #f29527;\n    --color-green: #467a39;\n    --color-red: #da2131;\n    --color-red-1xx: #981722;\n    --color-black: #000;\n    --color-white: #fff;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight: 400;\n    --font-weight-bold: 600;\n    --line-height: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  a,\n  button {\n    font-size: var(--font-size);\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n    margin: 0;\n    padding: 0;\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n}";
+var css_248z$1p = "@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border-radius: 2px;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #004494;\n    --color-yellow: #ffd617;\n    --color-grey: #404040;\n    --color-blue-130: #002f67;\n    --color-blue-120: #003776;\n    --color-blue-110: #003d84;\n    --color-blue-100: var(--color-blue);\n    --color-blue-75: #4073af;\n    --color-blue-50: #bfd0e4;\n    --color-blue-25: #bfd0e4;\n    --color-blue-5: #f2f5f9;\n    --color-yellow-120: #f8ae21;\n    --color-yellow-110: #fbc11d;\n    --color-yellow-100: var(--color-yellow);\n    --color-yellow-75: #ffde39;\n    --color-yellow-50: #ffe879;\n    --color-yellow-25: #fff4bb;\n    --color-grey-100: var(--color-grey);\n    --color-grey-75: #707070;\n    --color-grey-50: #9f9f9f;\n    --color-grey-25: #cfcfcf;\n    --color-grey-20: #d9d9d9;\n    --color-grey-15: #e3e3e3;\n    --color-grey-10: #ebebeb;\n    --color-grey-5: #f5f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-blue-n: #006fb4;\n    --color-orange: #f29527;\n    --color-green: #467a39;\n    --color-red: #da2131;\n    --color-red-1xx: #981722;\n    --color-black: #000;\n    --color-white: #fff;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight: 400;\n    --font-weight-bold: 600;\n    --line-height: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  a,\n  button {\n    font-size: var(--font-size);\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n    margin: 0;\n    padding: 0;\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$22 = "@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: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button 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 button span {\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 button:focus, .kol-accordion__heading-button button:hover {\n    background-color: var(--color-grey-25);\n  }\n  .kol-accordion__heading-button button:focus {\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\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$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$21 = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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$20 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$1m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$1$ = "@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$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$1_ = "@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$1Z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  a .kol-span-wc,\n  button .kol-span-wc {\n    border-radius: 0;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  a,\n  button {\n    appearance: none;\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n  }\n  a:focus .kol-span-wc,\n  button:focus .kol-span-wc {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n  }\n  button.ghost:focus .kol-span-wc {\n    outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n  }\n  .primary a .kol-span-wc,\n  .primary button .kol-span-wc {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n  }\n  .primary a:focus .kol-span-wc,\n  .primary button:focus .kol-span-wc {\n    outline-color: var(--color-white);\n  }\n  .primary a:hover .kol-span-wc,\n  .primary button:hover .kol-span-wc {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .secondary a .kol-span-wc,\n  .secondary button .kol-span-wc {\n    background-color: var(--color-white);\n    border-color: var(--color-blue);\n    color: var(--color-blue);\n  }\n  .secondary a:focus .kol-span-wc,\n  .secondary button:focus .kol-span-wc {\n    outline-color: var(--color-blue);\n    outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n  }\n  .secondary a:hover .kol-span-wc,\n  .secondary button:hover .kol-span-wc {\n    border-color: var(--color-blue-130);\n    color: var(--color-blue-130);\n  }\n  .normal a .kol-span-wc,\n  .normal button .kol-span-wc {\n    background-color: var(--color-yellow);\n    border-color: var(--color-yellow);\n    color: var(--color-black);\n  }\n  .normal a:hover .kol-span-wc,\n  .normal button:hover .kol-span-wc {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a .kol-span-wc,\n  .ghost button .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-blue);\n  }\n  .ghost a:focus .kol-span-wc,\n  .ghost button:focus .kol-span-wc {\n    outline-color: var(--color-blue);\n  }\n  .ghost a:hover .kol-span-wc,\n  .ghost button:hover .kol-span-wc {\n    color: var(--color-blue-130);\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}";
 
-var css_248z$1Y = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--spacing-2xs);\n  }\n}";
+var css_248z$1i = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\n  }\n  .badge-text-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$1X = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n    font-size: inherit;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: calc(var(--border-width) * 2) solid;\n  }\n  :is(a, button):hover .kol-span-wc .span-label {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .skip:focus {\n    background-color: white;\n    left: unset;\n    position: unset;\n  }\n  .access-key-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+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$1W = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\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  :host .kol-heading-wc {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75em;\n  }\n  :host div.header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  :host div.content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: var(--spacing-xs) var(--spacing-m);\n  }\n  :host > div > div.content + div.footer {\n    border-top: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\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$1V = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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: calc(44rem / var(--kolibri-root-font-size, 16));\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: calc(1rem / var(--kolibri-root-font-size, 16));\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: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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: calc(1rem / var(--kolibri-root-font-size, 16)) 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$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$1U = "@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  .details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .details__heading-button button .kol-span-wc .span-label {\n    border-bottom-color: #000;\n  }\n  .details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading-button .kol-span-wc > span {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .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$1T = "@layer kol-theme-component {\n  :host .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--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$1S = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    width: 100%;\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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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-link-wc {\n    display: inline-block;\n  }\n  .kol-link-wc a,\n  .kol-link-wc button {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link-wc a:hover,\n  .kol-link-wc button:hover {\n    color: var(--color-blue-130);\n  }\n  .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-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$1R = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .headline-h1 {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n  }\n  .headline-h2 {\n    font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.143;\n  }\n  .headline-h3 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.1667;\n  }\n  .headline-h4 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .headline-h5 {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n  }\n  .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--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$1Q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-indented-text-wc > div {\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}";
+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$1P = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  .checkbox-container {\n    justify-content: flex-start;\n  }\n  .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n    justify-content: flex-end;\n  }\n  input[type=checkbox] {\n    background-color: var(--color-white);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=checkbox]:focus {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=checkbox] {\n    border-color: var(--color-grey-75);\n  }\n  input[type=checkbox]:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  input[type=checkbox]:hover {\n    border-color: var(--color-blue);\n  }\n  input[type=checkbox]:checked:hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .error input[type=checkbox] {\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:hover {\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:checked:hover {\n    background-color: var(--color-red-1xx);\n    border-color: var(--color-red-1xx);\n  }\n  .error.required label > span::after {\n    color: var(--color-red);\n  }\n  .default .icon {\n    margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .default.checked .icon {\n    color: var(--color-white);\n  }\n  .switch input[type=checkbox] {\n    display: block;\n  }\n  .switch input[type=checkbox]::before,\n  .switch input[type=checkbox]:indeterminate::before {\n    background-color: var(--color-grey-75);\n  }\n  .switch input[type=checkbox]:hover::before,\n  .switch input[type=checkbox]:indeterminate:hover::before {\n    background-color: var(--color-blue);\n  }\n  .switch input[type=checkbox]:checked::before,\n  .switch input[type=checkbox]:checked:hover::before {\n    background-color: var(--color-white);\n  }\n  .switch.error input[type=checkbox]::before {\n    background-color: var(--color-red);\n  }\n  .switch.error input[type=checkbox]:checked::before {\n    background-color: var(--color-white);\n  }\n  .switch.error input[type=checkbox]:indeterminate:hover::before {\n    background-color: var(--color-red-1xx);\n  }\n  .button {\n    gap: var(--spacing-xs) 0;\n    grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n  }\n  .button[data-label-align=left]:not(.hide-label) {\n    grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n  }\n  .kol-input .kol-alert.error {\n    order: 3;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert {\n    grid-column: span 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .button:focus-within {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\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$1O = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$1N = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$1M = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$1L = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$1K = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$1J = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$1I = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  fieldset {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n  }\n  .input-slot {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  fieldset .kol-alert {\n    order: 1;\n  }\n  fieldset .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  fieldset .kol-alert {\n    order: 3;\n  }\n  fieldset .kol-input {\n    display: grid;\n    order: 2;\n  }\n  fieldset .kol-input .hint {\n    order: 3;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .radio-input-wrapper {\n    display: flex;\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    position: relative;\n  }\n  .radio-label {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=radio] {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n  }\n  input[type=radio]:before {\n    display: none;\n  }\n  input[type=radio]:checked {\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=radio]:focus {\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=radio]:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  label,\n  legend {\n    color: var(--color-grey);\n  }\n  legend {\n    font-weight: var(--font-weight-bold);\n  }\n  .error input[type=radio] {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n  }\n  .error input[type=radio]:before {\n    display: none;\n  }\n  .error input[type=radio]:checked {\n    border-color: var(--color-red);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .error input[type=radio]:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 1;\n    width: 100%;\n  }\n  .hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    order: 4;\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$1H = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$11 = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$10 = "@layer kol-theme-component {\n  .kol-link {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    appearance: none;\n    color: var(--color-blue);\n    text-decoration: underline;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$1F = "@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  a,\n  button {\n    appearance: none;\n    color: var(--color-blue);\n    text-decoration: underline;\n  }\n  a:hover,\n  button:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var css_248z$$ = "@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}";
 
-var css_248z$1E = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$_ = "@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$1D = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  a,\n  button {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  a:hover,\n  button:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var css_248z$Z = "@layer kol-theme-component {\n  .kol-nav {\n    font-family: var(--font-family);\n  }\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-nav__toggle-button .kol-button {\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-nav__toggle-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-nav__toggle-button .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-nav__toggle-button .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-nav__toggle-button .kol-button--ghost:hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color) !important;\n    text-decoration: none !important;\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: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:focus .kol-nav__toggle-button .kol-button__text {\n    outline-offset: -2px;\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    border-color: transparent;\n    border-style: solid;\n    border-width: 2px;\n    color: var(--color-white);\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    justify-items: start;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
 
-var css_248z$1C = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry .kol-button-wc:first-child,\n  .entry .kol-link-wc,\n  .entry .kol-span-wc {\n    flex-grow: 1;\n  }\n  /* custom. */\n  nav {\n    background-color: var(--color-blue);\n  }\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .expand-button button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-span-wc {\n    border-color: transparent;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-white);\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    justify-items: start;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n  }\n  li > ul,\n  li + li {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  a {\n    text-decoration: none;\n  }\n  :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n  :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n    text-decoration: underline;\n  }\n  div > .expand-button kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .expanded > div > .expand-button kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n}";
+var css_248z$Y = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .kol-button {\n    appearance: none;\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n  }\n  .kol-button__text {\n    background-color: var(--color-yellow);\n    border: 2px solid var(--color-yellow);\n    color: var(--color-black);\n    font-weight: var(--font-weight-bold);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n  }\n  .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-button:focus .kol-button__text {\n    outline-offset: -4px;\n    outline: 2px solid var(--color-black);\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    opacity: 1;\n    text-decoration: underline;\n  }\n  .kol-button:disabled .kol-button__text {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}";
 
-var css_248z$1B = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .button {\n    appearance: none;\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n  }\n  .button-inner {\n    background-color: var(--color-yellow);\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n    color: var(--color-black);\n    font-weight: var(--font-weight-bold);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n  }\n  .button:not(:disabled):hover .button-inner {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .button:focus .button-inner {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n  }\n  .button:disabled .button-inner {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .selected .button-inner {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    opacity: 1;\n    text-decoration: underline;\n  }\n}";
+var css_248z$X = "@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}";
 
-var css_248z$1A = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  svg line:first-child,\n  svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-grey-25);\n  }\n  svg line:last-child,\n  svg circle:last-child {\n    stroke: var(--color-blue-130);\n    fill: transparent;\n  }\n  progress {\n    display: none;\n  }\n}";
+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$1z = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$1y = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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: calc(44rem / var(--kolibri-root-font-size, 16));\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    cursor: pointer;\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: calc(1rem / var(--kolibri-root-font-size, 16));\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: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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: calc(1rem / var(--kolibri-root-font-size, 16)) 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$1x = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: 0;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\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}";
+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}";
 
-var css_248z$1w = "@layer kol-theme-component {\n  .cycle {\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .cycle span {\n    background-color: var(--color-blue-75);\n  }\n}";
+var css_248z$S = "@layer kol-theme-component {\n  .cycle {\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .cycle span {\n    background-color: var(--color-blue-75);\n  }\n}";
 
-var css_248z$1v = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-radius: 0;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--color-blue);\n  }\n  .popover {\n    background-color: #fff;\n  }\n  .horizontal-line {\n    border: 0;\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  a .kol-span-wc,\n  button .kol-span-wc {\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    padding: 0.25em 0.75em;\n  }\n  a,\n  button {\n    appearance: none;\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n  }\n  a:focus .kol-span-wc,\n  button:focus .kol-span-wc {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n  }\n  button.ghost:focus .kol-span-wc {\n    outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n  }\n  .primary a .kol-span-wc,\n  .primary button .kol-span-wc {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n  }\n  .primary a:focus .kol-span-wc,\n  .primary button:focus .kol-span-wc {\n    outline-color: var(--color-white);\n  }\n  .primary a:hover .kol-span-wc,\n  .primary button:hover .kol-span-wc {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .secondary a .kol-span-wc,\n  .secondary button .kol-span-wc {\n    background-color: var(--color-white);\n    border-color: var(--color-blue);\n    color: var(--color-blue);\n  }\n  .secondary a:focus .kol-span-wc,\n  .secondary button:focus .kol-span-wc {\n    outline-color: var(--color-blue);\n    outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n  }\n  .secondary a:hover .kol-span-wc,\n  .secondary button:hover .kol-span-wc {\n    border-color: var(--color-blue-130);\n    color: var(--color-blue-130);\n  }\n  .normal a .kol-span-wc,\n  .normal button .kol-span-wc {\n    background-color: var(--color-yellow);\n    border-color: var(--color-yellow);\n    color: var(--color-black);\n  }\n  .normal a:hover .kol-span-wc,\n  .normal button:hover .kol-span-wc {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a .kol-span-wc,\n  .ghost button .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-blue);\n  }\n  .ghost a:focus .kol-span-wc,\n  .ghost button:focus .kol-span-wc {\n    outline-color: var(--color-blue);\n  }\n  .ghost a:hover .kol-span-wc,\n  .ghost button:hover .kol-span-wc {\n    color: var(--color-blue-130);\n  }\n}";
+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$1u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  @media (min-width: 1024px) {\n    :host > div:last-child,\n    :host > div:last-child > div:last-child {\n      grid-auto-flow: column;\n    }\n    :host > div:last-child .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}\n@layer kol-theme-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-family: var(--font-family);\n  }\n  :host > div,\n  .kol-table-stateless-wc > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: 0.5em;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  table thead tr:first-child th,\n  table thead tr:first-child td {\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  .table {\n    padding: 0.5em;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  table thead tr:last-child th,\n  table thead tr:last-child td {\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  th {\n    background-color: var(--color-white);\n  }\n  th[aria-sort=ascending] .button,\n  th[aria-sort=descending] .button {\n    font-weight: 700;\n  }\n  th div {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tbody tr:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  th,\n  td {\n    padding: 0.5em;\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n  .input input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=checkbox] {\n    border-color: var(--color-grey-75);\n  }\n  .input input[type=checkbox]:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .input .icon {\n    color: var(--color-white);\n  }\n  .input.indeterminate input {\n    background-color: var(--color-white);\n  }\n  .input.indeterminate .icon {\n    color: var(--color-blue);\n  }\n  .input kol-icon:hover ~ input[type=checkbox],\n  .input input[type=checkbox]:hover {\n    border-color: var(--color-blue);\n  }\n  .input input[type=radio] {\n    display: block;\n    border-color: var(--color-grey-75);\n  }\n  .input input[type=radio]:hover {\n    border-color: var(--color-blue);\n  }\n  .input input[type=radio]:checked {\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=radio]:checked:before {\n    background-color: var(--color-white);\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$1t = "@layer kol-theme-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-family: var(--font-family);\n  }\n  :host > div,\n  .kol-table-stateless-wc > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: 0.5em;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  table thead tr:first-child th,\n  table thead tr:first-child td {\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  .table {\n    padding: 0.5em;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  table thead tr:last-child th,\n  table thead tr:last-child td {\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  th {\n    background-color: var(--color-white);\n  }\n  th[aria-sort=ascending] .button,\n  th[aria-sort=descending] .button {\n    font-weight: 700;\n  }\n  th div {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tbody tr:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  th,\n  td {\n    padding: 0.5em;\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n  .input input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=checkbox] {\n    border-color: var(--color-grey-75);\n  }\n  .input input[type=checkbox]:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .input .icon {\n    color: var(--color-white);\n  }\n  .input.indeterminate input {\n    background-color: var(--color-white);\n  }\n  .input.indeterminate .icon {\n    color: var(--color-blue);\n  }\n  .input kol-icon:hover ~ input[type=checkbox],\n  .input input[type=checkbox]:hover {\n    border-color: var(--color-blue);\n  }\n  .input input[type=radio] {\n    display: block;\n    border-color: var(--color-grey-75);\n  }\n  .input input[type=radio]:hover {\n    border-color: var(--color-blue);\n  }\n  .input input[type=radio]:checked {\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=radio]:checked:before {\n    background-color: var(--color-white);\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$1s = "@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  .tabs-button-group {\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-25);\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .tabs-button-group button {\n    border: none;\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .tabs-button-group button .kol-span-wc {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .tabs-button-group button.selected .kol-span-wc {\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 calc(-3rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n    color: var(--color-blue-130);\n  }\n  .tabs-button-group button:focus .kol-span-wc {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\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$1r = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$1q = "@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  .toast {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert {\n    font-family: var(--font-family);\n  }\n  .toast .kol-alert--msg {\n    border: none;\n  }\n  .toast .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: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .toast .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .toast .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .toast .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .toast .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .toast .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .toast .kol-alert--card .toast .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert--msg .toast .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .toast .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .toast .kol-alert--card .toast .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .toast .kol-alert--msg .toast .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .toast .kol-alert--card .toast .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert--card .toast .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .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$1p = "@layer kol-theme-component {\n  .toolbar {\n    padding: var(--spacing-s);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--color-grey-5);\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}";
 
-var css_248z$1o = "@layer kol-theme-component {\n  .tree ul {\n    display: flex;\n    flex-direction: column;\n  }\n}";
+var css_248z$K = "@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    display: flex;\n    flex-direction: column;\n  }\n}";
 
-var css_248z$1n = "@layer kol-theme-component {\n  .tree-item ul {\n    display: flex;\n    flex-direction: column;\n  }\n  .tree-link {\n    display: block;\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n  }\n  .tree-link:hover, .tree-link:focus-within {\n    background-color: var(--color-sky);\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow-120);\n  }\n  .tree-link:hover > a, .tree-link:focus-within > a {\n    color: var(--color-black);\n  }\n  .tree-link.active {\n    font-weight: 700;\n    background-color: var(--color-yellow);\n  }\n  .tree-link.active a {\n    color: var(--color-black);\n  }\n  .tree-link a {\n    display: block;\n    color: var(--color-black);\n    text-decoration: none;\n    text-align: left;\n  }\n  .tree-link a .toggle-button {\n    display: inline-block;\n  }\n  .tree-link a .toggle-button:hover {\n    transform: scale(1.3);\n  }\n  .tree-link a:focus {\n    color: var(--color-black);\n  }\n}";
+var css_248z$J = "@layer kol-theme-component {\n  .kol-tree-item__children {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-tree-item__link {\n    display: block;\n    border: 2px solid transparent;\n  }\n  .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n    background-color: var(--color-sky);\n    border: 2px solid var(--color-yellow-120);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    color: var(--color-black);\n  }\n  .kol-tree-item__link--active {\n    font-weight: 700;\n    background-color: var(--color-yellow);\n  }\n  .kol-tree-item__link--active .kol-link {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n  }\n  .kol-tree-item__link .kol-link {\n    color: var(--color-black);\n    text-align: left;\n  }\n  .kol-tree-item__link .kol-link:focus {\n    color: var(--color-black);\n  }\n  .kol-tree-item__toggle-button:hover .kol-tree-item__toggle-button-icon::part(icon) {\n    transform: scale(1.3);\n  }\n  .kol-tree-item__text {\n    text-decoration: none;\n  }\n}";
 
 const ECL_EC = KoliBri.createTheme('ecl-ec', {
-    GLOBAL: css_248z$23,
-    'KOL-HEADING': css_248z$1R,
-    'KOL-ACCORDION': css_248z$22,
-    'KOL-INDENTED-TEXT': css_248z$1Q,
-    'KOL-BUTTON': css_248z$1Z,
-    'KOL-LINK-BUTTON': css_248z$1F,
-    'KOL-BADGE': css_248z$1$,
-    'KOL-ALERT': css_248z$21,
-    'KOL-AVATAR': css_248z$20,
-    'KOL-TABS': css_248z$1s,
-    'KOL-LINK': css_248z$1D,
-    'KOL-BUTTON-LINK': css_248z$1X,
-    'KOL-BREADCRUMB': css_248z$1_,
-    'KOL-DETAILS': css_248z$1U,
-    'KOL-DRAWER': css_248z$1T,
-    'KOL-PROGRESS': css_248z$1A,
-    'KOL-SPIN': css_248z$1w,
-    'KOL-SINGLE-SELECT': css_248z$1y,
-    'KOL-PAGINATION': css_248z$1B,
-    'KOL-INPUT-CHECKBOX': css_248z$1P,
-    'KOL-INPUT-COLOR': css_248z$1O,
-    'KOL-CARD': css_248z$1W,
-    'KOL-COMBOBOX': css_248z$1V,
-    'KOL-BUTTON-GROUP': css_248z$1Y,
-    'KOL-INPUT-RADIO': css_248z$1I,
-    'KOL-INPUT-RANGE': css_248z$1H,
-    'KOL-INPUT-TEXT': css_248z$1G,
-    'KOL-KOLIBRI': css_248z$1E,
-    'KOL-INPUT-PASSWORD': css_248z$1J,
-    'KOL-INPUT-NUMBER': css_248z$1K,
-    'KOL-INPUT-DATE': css_248z$1N,
-    'KOL-INPUT-EMAIL': css_248z$1M,
-    'KOL-INPUT-FILE': css_248z$1L,
-    'KOL-SELECT': css_248z$1z,
-    'KOL-TEXTAREA': css_248z$1r,
-    'KOL-TABLE-STATEFUL': css_248z$1u,
-    'KOL-TABLE-STATELESS': css_248z$1t,
-    'KOL-NAV': css_248z$1C,
-    'KOL-SKIP-NAV': css_248z$1x,
-    'KOL-SPLIT-BUTTON': css_248z$1v,
-    'KOL-TOAST-CONTAINER': css_248z$1q,
-    'KOL-TOOLBAR': css_248z$1p,
-    'KOL-TREE': css_248z$1o,
-    'KOL-TREE-ITEM': css_248z$1n,
-    'KOL-FORM': css_248z$1S,
+    GLOBAL: css_248z$1p,
+    'KOL-ACCORDION': css_248z$1o,
+    'KOL-ALERT': css_248z$1n,
+    'KOL-AVATAR': css_248z$1m,
+    'KOL-BADGE': css_248z$1l,
+    'KOL-BREADCRUMB': css_248z$1k,
+    'KOL-BUTTON': css_248z$1j,
+    'KOL-BUTTON-LINK': css_248z$1i,
+    'KOL-CARD': css_248z$1h,
+    'KOL-COMBOBOX': css_248z$1g,
+    'KOL-DETAILS': css_248z$1f,
+    'KOL-DRAWER': css_248z$1e,
+    'KOL-FORM': css_248z$1d,
+    'KOL-HEADING': css_248z$1c,
+    'KOL-INPUT-CHECKBOX': css_248z$1b,
+    'KOL-INPUT-COLOR': css_248z$1a,
+    'KOL-INPUT-DATE': css_248z$19,
+    'KOL-INPUT-EMAIL': css_248z$18,
+    'KOL-INPUT-FILE': css_248z$17,
+    'KOL-INPUT-NUMBER': css_248z$16,
+    'KOL-INPUT-PASSWORD': css_248z$15,
+    'KOL-INPUT-RADIO': css_248z$14,
+    'KOL-INPUT-RANGE': css_248z$13,
+    'KOL-INPUT-TEXT': css_248z$12,
+    'KOL-KOLIBRI': css_248z$11,
+    'KOL-LINK': css_248z$$,
+    'KOL-LINK-BUTTON': css_248z$10,
+    'KOL-MODAL': css_248z$_,
+    'KOL-NAV': css_248z$Z,
+    'KOL-PAGINATION': css_248z$Y,
+    'KOL-POPOVER-BUTTON': css_248z$X,
+    'KOL-PROGRESS': css_248z$W,
+    'KOL-SELECT': css_248z$V,
+    'KOL-SINGLE-SELECT': css_248z$U,
+    'KOL-SKIP-NAV': css_248z$T,
+    'KOL-SPIN': css_248z$S,
+    'KOL-SPLIT-BUTTON': css_248z$R,
+    'KOL-TABLE-STATEFUL': css_248z$Q,
+    'KOL-TABLE-STATELESS': css_248z$P,
+    'KOL-TABS': css_248z$O,
+    'KOL-TEXTAREA': css_248z$N,
+    'KOL-TOAST-CONTAINER': css_248z$M,
+    'KOL-TOOLBAR': css_248z$L,
+    'KOL-TREE': css_248z$K,
+    'KOL-TREE-ITEM': css_248z$J,
 });
 
-var css_248z$1m = "@layer kol-theme-global {\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #f2f2f2;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #626262;\n  }\n  :host {\n    --color-blue: #0e47cb;\n    --color-blue-140: #082b7a;\n    --color-blue-130: #082b7a;\n    --color-blue-120: #0b39a2;\n    --color-blue-110: #0d40b7;\n    --color-blue-100: #0e47cb;\n    --color-blue-80: #3e6cd5;\n    --color-blue-60: #6e91e0;\n    --color-blue-40: #9fb5ea;\n    --color-blue-20: #cfdaf5;\n    --color-blue-10: #e7edfa;\n    --color-blue-5: #f3f6fc;\n    --color-yellow: #ffcc00;\n    --color-yellow-140: #997a00;\n    --color-yellow-130: #b38f00;\n    --color-yellow-120: #cca300;\n    --color-yellow-110: #e6b800;\n    --color-yellow-100: #ffcc00;\n    --color-yellow-80: #ffd633;\n    --color-yellow-60: #ffe066;\n    --color-yellow-40: #ffeb99;\n    --color-yellow-20: #fff5cc;\n    --color-yellow-10: #fffae6;\n    --color-yellow-5: #fffcf2;\n    --color-grey: #262b38;\n    --color-grey-140: #171a22;\n    --color-grey-130: #1b1e27;\n    --color-grey-120: #1e222d;\n    --color-grey-110: #222732;\n    --color-grey-100: #262b38;\n    --color-grey-80: #515560;\n    --color-grey-75: #515560;\n    --color-grey-60: #7d8088;\n    --color-grey-40: #a8aaaf;\n    --color-grey-20: #d4d5d7;\n    --color-grey-10: #e9eaeb;\n    --color-grey-5: #f4f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-orange: #ff6200;\n    --color-orange-140: #993b00;\n    --color-orange-130: #b34500;\n    --color-orange-120: #cc4e00;\n    --color-orange-110: #e65800;\n    --color-orange-100: #e65800;\n    --color-orange-80: #ff8133;\n    --color-orange-60: #ff914d;\n    --color-orange-40: #ffb180;\n    --color-orange-20: #ffd0b3;\n    --color-orange-10: #ffefe6;\n    --color-orange-5: #fff7f2;\n    --color-green: #00c991;\n    --color-green-140: #007957;\n    --color-green-130: #008d66;\n    --color-green-120: #008d66;\n    --color-green-110: #00b583;\n    --color-green-100: #00c991;\n    --color-green-80: #00c991;\n    --color-green-60: #66dfbd;\n    --color-green-40: #99e9d3;\n    --color-green-20: #ccf4e9;\n    --color-green-10: #e6faf4;\n    --color-green-5: #f2fcf9;\n    --color-red: #ef0044;\n    --color-red-140: #8f0029;\n    --color-red-130: #a70030;\n    --color-red-120: #bf0036;\n    --color-red-110: #d7003d;\n    --color-red-100: #ef0044;\n    --color-red-80: #f23369;\n    --color-red-60: #f5668f;\n    --color-red-40: #f999b4;\n    --color-red-20: #fcccda;\n    --color-red-10: #fde6ec;\n    --color-red-5: #fef2f5;\n    --color-accent-blue-100: #00e9ff;\n    --color-accent-blue-30: #b3f8ff;\n    --color-purple: #510dcd;\n    --color-purple-140: #31087b;\n    --color-purple-130: #390990;\n    --color-purple-120: #410aa4;\n    --color-purple-110: #490cb9;\n    --color-purple-100: #510dcd;\n    --color-purple-80: #743dd7;\n    --color-purple-60: #976ee1;\n    --color-purple-40: #bf9af1;\n    --color-purple-20: #dccff5;\n    --color-purple-10: #eee7fa;\n    --color-purple-5: #eee7fa;\n    --color-white: #fff;\n    --color-black: #000;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight-regular: 400;\n    --font-weight-bold: 700;\n    --line-height-regular: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  a,\n  button {\n    font-size: var(--font-size);\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n    margin: 0;\n    padding: 0;\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  p.l,\n  p.lead {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  p,\n  p.m,\n  p.medium {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  p.s,\n  p.small {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  p.xs,\n  p.extra-small {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$I = "@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border-radius: 2px;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #0e47cb;\n    --color-blue-140: #082b7a;\n    --color-blue-130: #082b7a;\n    --color-blue-120: #0b39a2;\n    --color-blue-110: #0d40b7;\n    --color-blue-100: #0e47cb;\n    --color-blue-80: #3e6cd5;\n    --color-blue-60: #6e91e0;\n    --color-blue-40: #9fb5ea;\n    --color-blue-20: #cfdaf5;\n    --color-blue-10: #e7edfa;\n    --color-blue-5: #f3f6fc;\n    --color-yellow: #ffcc00;\n    --color-yellow-140: #997a00;\n    --color-yellow-130: #b38f00;\n    --color-yellow-120: #cca300;\n    --color-yellow-110: #e6b800;\n    --color-yellow-100: #ffcc00;\n    --color-yellow-80: #ffd633;\n    --color-yellow-60: #ffe066;\n    --color-yellow-40: #ffeb99;\n    --color-yellow-20: #fff5cc;\n    --color-yellow-10: #fffae6;\n    --color-yellow-5: #fffcf2;\n    --color-grey: #262b38;\n    --color-grey-140: #171a22;\n    --color-grey-130: #1b1e27;\n    --color-grey-120: #1e222d;\n    --color-grey-110: #222732;\n    --color-grey-100: #262b38;\n    --color-grey-80: #515560;\n    --color-grey-75: #515560;\n    --color-grey-60: #7d8088;\n    --color-grey-40: #a8aaaf;\n    --color-grey-20: #d4d5d7;\n    --color-grey-10: #e9eaeb;\n    --color-grey-5: #f4f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-orange: #ff6200;\n    --color-orange-140: #993b00;\n    --color-orange-130: #b34500;\n    --color-orange-120: #cc4e00;\n    --color-orange-110: #e65800;\n    --color-orange-100: #e65800;\n    --color-orange-80: #ff8133;\n    --color-orange-60: #ff914d;\n    --color-orange-40: #ffb180;\n    --color-orange-20: #ffd0b3;\n    --color-orange-10: #ffefe6;\n    --color-orange-5: #fff7f2;\n    --color-green: #00c991;\n    --color-green-140: #007957;\n    --color-green-130: #008d66;\n    --color-green-120: #008d66;\n    --color-green-110: #00b583;\n    --color-green-100: #00c991;\n    --color-green-80: #00c991;\n    --color-green-60: #66dfbd;\n    --color-green-40: #99e9d3;\n    --color-green-20: #ccf4e9;\n    --color-green-10: #e6faf4;\n    --color-green-5: #f2fcf9;\n    --color-red: #ef0044;\n    --color-red-140: #8f0029;\n    --color-red-130: #a70030;\n    --color-red-120: #bf0036;\n    --color-red-110: #d7003d;\n    --color-red-100: #ef0044;\n    --color-red-80: #f23369;\n    --color-red-60: #f5668f;\n    --color-red-40: #f999b4;\n    --color-red-20: #fcccda;\n    --color-red-10: #fde6ec;\n    --color-red-5: #fef2f5;\n    --color-accent-blue-100: #00e9ff;\n    --color-accent-blue-30: #b3f8ff;\n    --color-purple: #510dcd;\n    --color-purple-140: #31087b;\n    --color-purple-130: #390990;\n    --color-purple-120: #410aa4;\n    --color-purple-110: #490cb9;\n    --color-purple-100: #510dcd;\n    --color-purple-80: #743dd7;\n    --color-purple-60: #976ee1;\n    --color-purple-40: #bf9af1;\n    --color-purple-20: #dccff5;\n    --color-purple-10: #eee7fa;\n    --color-purple-5: #eee7fa;\n    --color-white: #fff;\n    --color-black: #000;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight-regular: 400;\n    --font-weight-bold: 700;\n    --line-height-regular: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  a,\n  button {\n    font-size: var(--font-size);\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n    margin: 0;\n    padding: 0;\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  p.l,\n  p.lead {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  p,\n  p.m,\n  p.medium {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  p.s,\n  p.small {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  p.xs,\n  p.extra-small {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$1l = "@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 button {\n    border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    outline-offset: calc(-1rem / var(--kolibri-root-font-size, 16));\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 button .button-inner > span {\n    align-items: baseline;\n  }\n  .kol-accordion__heading-button 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: calc(2rem / var(--kolibri-root-font-size, 16)) 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  .open .kol-accordion__heading-button 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  .open .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    content: \"\\f077\";\n  }\n  :not(.open) .kol-accordion__heading-button button .kol-icon::part(icon)::before {\n    content: \"\\f078\";\n  }\n}";
+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$1k = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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$1j = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$F = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$1i = "@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$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$1h = "@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$1g = "@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family);\n  }\n  a,\n  button {\n    appearance: none;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  a:focus,\n  button:focus {\n    outline: none;\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n  }\n  a:focus-visible > .kol-span-wc,\n  button:focus-visible > .kol-span-wc {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  a:active > .kol-span-wc,\n  button:active > .kol-span-wc,\n  a:hover > .kol-span-wc,\n  button:hover > .kol-span-wc {\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  .primary a > .kol-span-wc,\n  .primary button > .kol-span-wc {\n    background-color: #0e47cb;\n    color: #fff;\n  }\n  .primary a:focus-visible > .kol-span-wc,\n  .primary button:focus-visible > .kol-span-wc {\n    outline-color: #fff;\n  }\n  .primary a:hover > .kol-span-wc,\n  .primary button:hover > .kol-span-wc {\n    background-color: #3e6cd5;\n  }\n  .secondary a > .kol-span-wc,\n  .secondary button > .kol-span-wc {\n    background-color: #fff;\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    color: #0e47cb;\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  }\n  .secondary a:focus-visible > .kol-span-wc,\n  .secondary button:focus-visible > .kol-span-wc {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n    outline-color: #fff;\n  }\n  .secondary a:hover > .kol-span-wc,\n  .secondary button:hover > .kol-span-wc {\n    border-color: #0e47cb;\n    color: #0e47cb;\n  }\n  .normal a > .kol-span-wc,\n  .normal button > .kol-span-wc {\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .normal a:focus-visible > .kol-span-wc,\n  .normal button:focus-visible > .kol-span-wc {\n    outline-color: #000;\n  }\n  .normal a:hover > .kol-span-wc,\n  .normal button:hover > .kol-span-wc {\n    background-color: #fc0;\n    border-color: #fc0;\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a > .kol-span-wc,\n  .ghost button > .kol-span-wc {\n    color: #0e47cb;\n  }\n  .ghost a:focus-visible > .kol-span-wc,\n  .ghost button:focus-visible > .kol-span-wc {\n    outline-color: #0e47cb;\n  }\n  .ghost a:hover > .kol-span-wc,\n  .ghost button:hover > .kol-span-wc {\n    color: #0e47cb;\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}";
 
-var css_248z$1f = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    gap: var(--spacing-2xs);\n  }\n}";
+var css_248z$B = "@layer kol-theme-component {\n  .kol-button {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$1e = "@layer kol-theme-component {\n  a,\n  button {\n    appearance: none;\n    color: var(--color-blue);\n    text-decoration: underline;\n  }\n  a:hover,\n  button:hover {\n    color: var(--color-blue-130);\n  }\n}";
+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$1d = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\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  :host .kol-heading-wc {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75;\n  }\n  :host div.header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  :host div.content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: var(--spacing-xs) var(--spacing-m);\n  }\n  :host > div > div.content + div.footer {\n    border-top: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\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$1c = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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: calc(44rem / var(--kolibri-root-font-size, 16));\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: calc(1rem / var(--kolibri-root-font-size, 16));\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: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\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: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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$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$1b = "@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  .details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .details__heading-button button .kol-span-wc .span-label {\n    border-bottom-color: #000;\n  }\n  .details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading-button .kol-span-wc > span {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .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$1a = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    width: 100%;\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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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-link-wc {\n    display: inline-block;\n  }\n  .kol-link-wc a,\n  .kol-link-wc button {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link-wc a:hover,\n  .kol-link-wc button:hover {\n    color: var(--color-blue-130);\n  }\n  .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-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$19 = "@layer kol-theme-component {\n  :host .drawer__wrapper {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\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$18 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    font-weight: var(--font-weight-bold);\n  }\n  .headline-h1 {\n    font-size: calc(42rem / var(--kolibri-root-font-size, 16));\n    line-height: 3.25;\n  }\n  .headline-h2 {\n    font-size: calc(36rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.755;\n  }\n  .headline-h3 {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.5;\n  }\n  .headline-h4 {\n    font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n    line-height: 2;\n  }\n  .headline-h5 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .headline-h6 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\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$17 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-indented-text-wc > div {\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}";
+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$16 = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  .checkbox-container {\n    justify-content: flex-start;\n  }\n  .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n    justify-content: flex-end;\n  }\n  input[type=checkbox] {\n    background-color: var(--color-white);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=checkbox]:focus {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=checkbox] {\n    border-color: var(--color-grey-75);\n  }\n  input[type=checkbox]:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  input[type=checkbox]:hover {\n    border-color: var(--color-blue);\n  }\n  input[type=checkbox]:checked:hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .error input[type=checkbox] {\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:hover {\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:checked:hover {\n    background-color: var(--color-red-1xx);\n    border-color: var(--color-red-1xx);\n  }\n  .error.required label > span::after {\n    color: var(--color-red);\n  }\n  .default .icon {\n    margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .default.checked .icon {\n    color: var(--color-white);\n  }\n  .switch input[type=checkbox] {\n    display: block;\n  }\n  .switch input[type=checkbox]::before,\n  .switch input[type=checkbox]:indeterminate::before {\n    background-color: var(--color-grey-75);\n  }\n  .switch input[type=checkbox]:hover::before,\n  .switch input[type=checkbox]:indeterminate:hover::before {\n    background-color: var(--color-blue);\n  }\n  .switch input[type=checkbox]:checked::before,\n  .switch input[type=checkbox]:checked:hover::before {\n    background-color: var(--color-white);\n  }\n  .switch.error input[type=checkbox]::before {\n    background-color: var(--color-red);\n  }\n  .switch.error input[type=checkbox]:checked::before {\n    background-color: var(--color-white);\n  }\n  .switch.error input[type=checkbox]:indeterminate:hover::before {\n    background-color: var(--color-red-1xx);\n  }\n  .button {\n    gap: var(--spacing-xs) 0;\n    grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n  }\n  .button[data-label-align=left]:not(.hide-label) {\n    grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n  }\n  .kol-input .kol-alert.error {\n    order: 3;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert {\n    grid-column: span 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\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$15 = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$14 = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$13 = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$12 = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$11 = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$10 = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$$ = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  fieldset {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n  }\n  fieldset .kol-alert {\n    order: 1;\n  }\n  fieldset .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  fieldset .kol-alert {\n    order: 3;\n  }\n  fieldset .kol-input {\n    display: grid;\n    order: 2;\n  }\n  fieldset .kol-input .hint {\n    order: 3;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .radio-input-wrapper {\n    display: flex;\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    position: relative;\n  }\n  .radio-label {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=radio] {\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=radio]:before {\n    display: none;\n  }\n  input[type=radio]:checked {\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  input[type=radio]:focus {\n    outline-color: var(--color-blue);\n  }\n  input[type=radio]:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  label,\n  legend {\n    color: var(--color-grey);\n  }\n  legend {\n    font-weight: var(--font-weight-bold);\n  }\n  .error input[type=radio] {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n  }\n  .error input[type=radio]:before {\n    display: none;\n  }\n  .error input[type=radio]:checked {\n    border-color: var(--color-red);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .error input[type=radio]:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 1;\n    width: 100%;\n  }\n  .hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    order: 4;\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$_ = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  .inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$k = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$j = "@layer kol-theme-component {\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}";
 
-var css_248z$Y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$i = "@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  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$X = "@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family);\n  }\n  a,\n  button {\n    appearance: none;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  a:focus,\n  button:focus {\n    outline: none;\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  a:focus-visible > .kol-span-wc,\n  button:focus-visible > .kol-span-wc {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  a:active > .kol-span-wc,\n  button:active > .kol-span-wc,\n  a:hover > .kol-span-wc,\n  button:hover > .kol-span-wc {\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  .primary a > .kol-span-wc,\n  .primary button > .kol-span-wc {\n    background-color: #0e47cb;\n    color: #fff;\n  }\n  .primary a:focus-visible > .kol-span-wc,\n  .primary button:focus-visible > .kol-span-wc {\n    outline-color: #fff;\n  }\n  .primary a:hover > .kol-span-wc,\n  .primary button:hover > .kol-span-wc {\n    background-color: #3e6cd5;\n  }\n  .secondary a > .kol-span-wc,\n  .secondary button > .kol-span-wc {\n    background-color: #fff;\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    color: #0e47cb;\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  }\n  .secondary a:focus-visible > .kol-span-wc,\n  .secondary button:focus-visible > .kol-span-wc {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n    outline-color: #fff;\n  }\n  .secondary a:hover > .kol-span-wc,\n  .secondary button:hover > .kol-span-wc {\n    border-color: #0e47cb;\n    color: #0e47cb;\n  }\n  .normal a > .kol-span-wc,\n  .normal button > .kol-span-wc {\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .normal a:focus-visible > .kol-span-wc,\n  .normal button:focus-visible > .kol-span-wc {\n    outline-color: #000;\n  }\n  .normal a:hover > .kol-span-wc,\n  .normal button:hover > .kol-span-wc {\n    background-color: #fc0;\n    border-color: #fc0;\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a > .kol-span-wc,\n  .ghost button > .kol-span-wc {\n    color: #0e47cb;\n  }\n  .ghost a:focus-visible > .kol-span-wc,\n  .ghost button:focus-visible > .kol-span-wc {\n    outline-color: #0e47cb;\n  }\n  .ghost a:hover > .kol-span-wc,\n  .ghost button:hover > .kol-span-wc {\n    color: #0e47cb;\n  }\n}";
+var css_248z$h = "@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$W = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  a,\n  button {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  a:hover,\n  button:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var css_248z$g = "@layer kol-theme-component {\n  .kol-nav {\n    font-family: var(--font-family);\n  }\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-nav__toggle-button .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    text-decoration: none !important;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\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    color: var(--text-color);\n  }\n  .kol-nav__toggle-button .kol-button__text:active, .kol-nav__toggle-button .kol-button__text:hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-nav__toggle-button .kol-button:focus-visible .kol-nav__toggle-button .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    border-color: transparent;\n    border-style: solid;\n    border-width: 2px;\n    color: var(--color-white);\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    justify-items: start;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
 
-var css_248z$V = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry .kol-button-wc:first-child,\n  .entry .kol-link-wc,\n  .entry .kol-span-wc {\n    flex-grow: 1;\n  }\n  /* custom. */\n  nav {\n    background-color: var(--color-blue);\n  }\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .expand-button button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-span-wc {\n    border-color: transparent;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-white);\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    justify-items: start;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n  }\n  li > ul,\n  li + li {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  a {\n    text-decoration: none;\n  }\n  :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n  :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n    text-decoration: underline;\n  }\n  div > .expand-button kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .expanded > div > .expand-button kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n}";
+var css_248z$f = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\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    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: 2px solid var(--color-black);\n  }\n  .kol-button:not(:disabled):active .kol-button__text, .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    border-color: #fc0;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    font-weight: bold;\n    text-decoration: underline;\n    opacity: 1;\n  }\n  .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}";
 
-var css_248z$U = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .button:focus {\n    outline: none;\n  }\n  .button-inner {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .button:focus-visible .button-inner {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n  }\n  button:not(:disabled):active .button-inner,\n  button:not(:disabled):hover .button-inner {\n    background-color: #fc0;\n    border-color: #fc0;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .button:disabled .button-inner {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .selected .button-inner {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    font-weight: bold;\n    text-decoration: underline;\n    opacity: 1;\n  }\n}";
+var css_248z$e = "@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}";
 
-var css_248z$T = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$d = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$S = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$R = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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: calc(44rem / var(--kolibri-root-font-size, 16));\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    cursor: pointer;\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: calc(1rem / var(--kolibri-root-font-size, 16));\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: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\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: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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$Q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\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}";
+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}";
 
-var css_248z$P = "@layer kol-theme-component {\n  .cycle {\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .cycle span {\n    background-color: var(--color-blue-80);\n  }\n}";
+var css_248z$9 = "@layer kol-theme-component {\n  .cycle {\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .cycle span {\n    background-color: var(--color-blue-80);\n  }\n}";
 
-var css_248z$O = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--color-blue);\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .horizontal-line {\n    border: 0;\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .popover {\n    background-color: #fff;\n  }\n  a,\n  button {\n    appearance: none;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  a:focus,\n  button:focus {\n    outline: none;\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n  }\n  a:focus-visible > .kol-span-wc,\n  button:focus-visible > .kol-span-wc {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  a:active > .kol-span-wc,\n  button:active > .kol-span-wc,\n  a:hover > .kol-span-wc,\n  button:hover > .kol-span-wc {\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  .primary a > .kol-span-wc,\n  .primary button > .kol-span-wc {\n    background-color: #0e47cb;\n    color: #fff;\n  }\n  .primary a:focus-visible > .kol-span-wc,\n  .primary button:focus-visible > .kol-span-wc {\n    outline-color: #fff;\n  }\n  .primary a:hover > .kol-span-wc,\n  .primary button:hover > .kol-span-wc {\n    background-color: #3e6cd5;\n  }\n  .secondary a > .kol-span-wc,\n  .secondary button > .kol-span-wc {\n    background-color: #fff;\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    color: #0e47cb;\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  }\n  .secondary a:focus-visible > .kol-span-wc,\n  .secondary button:focus-visible > .kol-span-wc {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n    outline-color: #fff;\n  }\n  .secondary a:hover > .kol-span-wc,\n  .secondary button:hover > .kol-span-wc {\n    border-color: #0e47cb;\n    color: #0e47cb;\n  }\n  .normal a > .kol-span-wc,\n  .normal button > .kol-span-wc {\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .normal a:focus-visible > .kol-span-wc,\n  .normal button:focus-visible > .kol-span-wc {\n    outline-color: #000;\n  }\n  .normal a:hover > .kol-span-wc,\n  .normal button:hover > .kol-span-wc {\n    background-color: #fc0;\n    border-color: #fc0;\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a > .kol-span-wc,\n  .ghost button > .kol-span-wc {\n    color: #0e47cb;\n  }\n  .ghost a:focus-visible > .kol-span-wc,\n  .ghost button:focus-visible > .kol-span-wc {\n    outline-color: #0e47cb;\n  }\n  .ghost a:hover > .kol-span-wc,\n  .ghost button:hover > .kol-span-wc {\n    color: #0e47cb;\n  }\n}";
+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$N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .pagination {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    :host > div:last-child,\n    :host > div:last-child > div:last-child {\n      grid-auto-flow: column;\n    }\n    :host > div:last-child .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}\n@layer kol-theme-component {\n  :host,\n  .kol-table-stateless-wc {\n    font-family: var(--font-family);\n    display: block;\n  }\n  caption {\n    padding: 0.5em;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  table thead tr:first-child th,\n  table thead tr:first-child td {\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  .table {\n    padding: 0.5em;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  table thead tr:last-child th,\n  table thead tr:last-child td {\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  th {\n    background-color: var(--color-white);\n  }\n  th[aria-sort=ascending] .button,\n  th[aria-sort=descending] .button {\n    font-weight: 700;\n  }\n  th div {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tbody tr:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  th,\n  td {\n    padding: 0.5em;\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n  .input input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=checkbox] {\n    border-color: var(--color-grey-75);\n  }\n  .input input[type=checkbox]:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .input .icon {\n    color: var(--color-white);\n  }\n  .input.indeterminate input {\n    background-color: var(--color-white);\n  }\n  .input.indeterminate .icon {\n    color: var(--color-blue);\n  }\n  .input kol-icon:hover ~ input[type=checkbox],\n  .input input[type=checkbox]:hover {\n    border-color: var(--color-blue);\n  }\n  .input input[type=radio] {\n    display: block;\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=radio]:hover {\n    border-color: var(--color-blue);\n  }\n  .input input[type=radio]:checked {\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=radio]:checked:before {\n    background-color: var(--color-white);\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$M = "@layer kol-theme-component {\n  :host,\n  .kol-table-stateless-wc {\n    font-family: var(--font-family);\n    display: block;\n  }\n  caption {\n    padding: 0.5em;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  table thead tr:first-child th,\n  table thead tr:first-child td {\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  .table {\n    padding: 0.5em;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  table thead tr:last-child th,\n  table thead tr:last-child td {\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  th {\n    background-color: var(--color-white);\n  }\n  th[aria-sort=ascending] .button,\n  th[aria-sort=descending] .button {\n    font-weight: 700;\n  }\n  th div {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tbody tr:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  th,\n  td {\n    padding: 0.5em;\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n  .input input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=checkbox] {\n    border-color: var(--color-grey-75);\n  }\n  .input input[type=checkbox]:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .input .icon {\n    color: var(--color-white);\n  }\n  .input.indeterminate input {\n    background-color: var(--color-white);\n  }\n  .input.indeterminate .icon {\n    color: var(--color-blue);\n  }\n  .input kol-icon:hover ~ input[type=checkbox],\n  .input input[type=checkbox]:hover {\n    border-color: var(--color-blue);\n  }\n  .input input[type=radio] {\n    display: block;\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=radio]:hover {\n    border-color: var(--color-blue);\n  }\n  .input input[type=radio]:checked {\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .input input[type=radio]:checked:before {\n    background-color: var(--color-white);\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$L = "@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  .tabs-button-group {\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-25);\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .tabs-button-group button {\n    border: none;\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .tabs-button-group button .kol-span-wc {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .tabs-button-group button.selected .kol-span-wc {\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 calc(-3rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n    color: var(--color-blue-130);\n  }\n  .tabs-button-group button:focus .kol-span-wc {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\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$K = "@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: calc(2rem / var(--kolibri-root-font-size, 16));\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 .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  input,\n  select,\n  textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) 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    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) 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  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$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$J = "@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  .toast {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert {\n    font-family: var(--font-family);\n  }\n  .toast .kol-alert--msg {\n    border: none;\n  }\n  .toast .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: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .toast .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .toast .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .toast .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .toast .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .toast .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .toast .kol-alert--card .toast .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert--msg .toast .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .toast .kol-alert__close-button .button {\n    color: var(--alert-accent-color);\n  }\n  .toast .kol-alert--card .toast .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .toast .kol-alert--msg .toast .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .toast .kol-alert--card .toast .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .kol-alert--card .toast .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .heading {\n    width: 100%;\n  }\n  .toast .heading .heading-content {\n    flex: 1;\n  }\n  .alert {\n    display: block;\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$I = "@layer kol-theme-component {\n  .toolbar {\n    padding: var(--spacing-s);\n    border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\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}";
+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}";
 
-var css_248z$H = "@layer kol-theme-component {\n  .tree ul {\n    display: flex;\n    flex-direction: column;\n  }\n}";
+var css_248z$1 = "@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    display: flex;\n    flex-direction: column;\n  }\n}";
 
-var css_248z$G = "@layer kol-theme-component {\n  .tree-item ul {\n    display: flex;\n    flex-direction: column;\n  }\n  .tree-link {\n    display: block;\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link:hover, .tree-link:focus-within {\n    background-color: var(--color-sky);\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .tree-link:hover > a, .tree-link:focus-within > a {\n    color: var(--color-black);\n  }\n  .tree-link.active {\n    background-color: var(--color-yellow);\n  }\n  .tree-link.active a {\n    color: var(--color-black);\n  }\n  .tree-link a {\n    display: block;\n    color: var(--color-black);\n    text-decoration: none;\n    text-align: left;\n  }\n  .tree-link a .toggle-button {\n    display: inline-block;\n    color: var(--color-blue);\n  }\n  .tree-link a .toggle-button:hover {\n    transform: scale(1.3);\n  }\n  .tree-link a:focus {\n    color: var(--color-black);\n  }\n}";
+var css_248z = "@layer kol-theme-component {\n  .kol-tree-item__children {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-tree-item__link {\n    display: block;\n    border: 2px solid transparent;\n    border-radius: 4px;\n  }\n  .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n    background-color: var(--color-sky);\n    border: 2px solid var(--color-blue);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    color: var(--color-black);\n  }\n  .kol-tree-item__link--active {\n    background-color: var(--color-yellow);\n  }\n  .kol-tree-item__link--active .kol-link {\n    background-color: var(--color-yellow);\n    color: var(--color-black);\n  }\n  .kol-tree-item__link .kol-link {\n    color: var(--color-black);\n    text-align: left;\n  }\n  .kol-tree-item__link .kol-link:focus {\n    color: var(--color-black);\n  }\n  .kol-tree-item__toggle-button {\n    color: var(--color-blue);\n  }\n  .kol-tree-item__toggle-button:hover .kol-tree-item__toggle-button-icon::part(icon) {\n    transform: scale(1.3);\n  }\n  .kol-tree-item__text {\n    text-decoration: none;\n  }\n}";
 
 const ECL_EU = KoliBri.createTheme('ecl-eu', {
-    GLOBAL: css_248z$1m,
-    'KOL-HEADING': css_248z$18,
-    'KOL-ACCORDION': css_248z$1l,
-    'KOL-INDENTED-TEXT': css_248z$17,
-    'KOL-BUTTON': css_248z$1g,
-    'KOL-LINK-BUTTON': css_248z$X,
-    'KOL-BUTTON-GROUP': css_248z$1f,
-    'KOL-PAGINATION': css_248z$U,
-    'KOL-PROGRESS': css_248z$T,
-    'KOL-NAV': css_248z$V,
-    'KOL-BADGE': css_248z$1i,
-    'KOL-ALERT': css_248z$1k,
-    'KOL-CARD': css_248z$1d,
-    'KOL-COMBOBOX': css_248z$1c,
-    'KOL-INPUT-CHECKBOX': css_248z$16,
-    'KOL-INPUT-COLOR': css_248z$15,
-    'KOL-INPUT-FILE': css_248z$12,
-    'KOL-INPUT-EMAIL': css_248z$13,
-    'KOL-INPUT-NUMBER': css_248z$11,
-    'KOL-INPUT-DATE': css_248z$14,
-    'KOL-INPUT-PASSWORD': css_248z$10,
-    'KOL-INPUT-TEXT': css_248z$Z,
-    'KOL-KOLIBRI': css_248z$Y,
-    'KOL-SELECT': css_248z$S,
-    'KOL-SINGLE-SELECT': css_248z$R,
-    'KOL-TEXTAREA': css_248z$K,
-    'KOL-TABLE-STATEFUL': css_248z$N,
-    'KOL-TABLE-STATELESS': css_248z$M,
-    'KOL-AVATAR': css_248z$1j,
-    'KOL-TABS': css_248z$L,
-    'KOL-LINK': css_248z$W,
-    'KOL-BUTTON-LINK': css_248z$1e,
-    'KOL-BREADCRUMB': css_248z$1h,
-    'KOL-DETAILS': css_248z$1b,
-    'KOL-DRAWER': css_248z$19,
-    'KOL-SPIN': css_248z$P,
-    'KOL-INPUT-RADIO': css_248z$$,
-    'KOL-INPUT-RANGE': css_248z$_,
-    'KOL-SKIP-NAV': css_248z$Q,
-    'KOL-SPLIT-BUTTON': css_248z$O,
-    'KOL-TOAST-CONTAINER': css_248z$J,
-    'KOL-TOOLBAR': css_248z$I,
-    'KOL-TREE': css_248z$H,
-    'KOL-TREE-ITEM': css_248z$G,
-    'KOL-FORM': css_248z$1a,
-});
-
-var css_248z$F = "@layer kol-theme-global {\n  :host {\n    --border-color: var(--color-anthrazit);\n    --border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    --color-anthrazit: #333;\n    --color-jade: #f3f7fb;\n    --color-weiss: #fff;\n    --color-petrol: #007a89;\n    --color-achat: #0b4d59;\n    --color-teal: #056773;\n    --color-fluorit: #66ddec;\n    --color-rotton: rgba(188, 0, 0, 1);\n    --color-rotton-20: rgba(188, 0, 0, 0.2);\n    --color-gras: #138510;\n    --color-warn: #f0541e;\n    --color-blut: var(--color-rotton);\n    --color-input-bg-default: #e8edf2;\n    --gradient-petrol-achat: linear-gradient(67deg, var(--color-petrol), var(--color-achat));\n    --color-citrin: #d4c912;\n    --color-umber: #494500;\n    --color-gelb: #fff443;\n    --color-lichtgelb: #eeff6c;\n    --gradient-gelb-citrin: linear-gradient(67deg, var(--color-gelb), var(--color-citrin));\n    --font-family-sans: Verdana;\n    --font-family-serif: \"Times New Roman\";\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing: 0.125em;\n    --kolibri-spacing: calc(2 * var(--spacing));\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  a:focus,\n  button:focus,\n  input:focus,\n  select:focus,\n  summary:focus,\n  textarea:focus {\n    cursor: pointer;\n    outline-color: var(--color-petrol);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: 0.25em;\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #f2f2f2;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #626262;\n  }\n}";
-
-var css_248z$E = "@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    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    display: grid;\n    border-color: var(--kolibri-border-color);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n    font-weight: 700;\n  }\n  .kol-accordion__heading-button button {\n    font-size: inherit;\n    line-height: 1.75;\n  }\n  .kol-accordion__heading-button button {\n    font-weight: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    cursor: pointer;\n    width: 100%;\n    margin: 0;\n    display: flex;\n    gap: 0.5em;\n    border: 0;\n    align-items: center;\n    overflow: hidden;\n    background-color: transparent;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-icon::part(icon) {\n    color: var(--color-midnight);\n  }\n  .kol-accordion__heading-button .kol-icon::part(close)::before {\n    font-family: \"Font Awesome 6 Free\";\n    content: \"\\f077\";\n  }\n  .kol-accordion__heading-button .kol-icon::part(open)::before {\n    font-family: \"Font Awesome 6 Free\";\n    content: \"\\f078\";\n  }\n  .kol-accordion__heading {\n    margin: 0;\n  }\n  .kol-accordion__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .open .kol-accordion__heading-button button {\n    padding-bottom: 0;\n  }\n  .open .kol-accordion__heading-button .kol-icon {\n    width: 1em;\n  }\n  .open .kol-accordion__content {\n    margin: 0;\n  }\n}";
-
-var css_248z$D = "@layer kol-theme-component {\n  .kol-alert--default {\n    --alert-border-color: var(--color-anthrazit);\n  }\n  .kol-alert--error {\n    --alert-border-color: var(--color-rotton);\n  }\n  .kol-alert--info {\n    --alert-border-color: var(--color-petrol);\n  }\n  .kol-alert--success {\n    --alert-border-color: var(--color-gras);\n  }\n  .kol-alert--warning {\n    --alert-border-color: var(--color-warn);\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    background-color: var(--alert-border-color);\n  }\n}";
-
-var css_248z$C = "@layer kol-theme-component {\n  .kol-badge {\n    display: inline-flex;\n    font-family: inherit;\n    border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__smart-button {\n    border-left: calc(1rem / var(--kolibri-root-font-size, 16)) solid rgba(0, 0, 0, 0.25);\n  }\n  .kol-badge__smart-button .button {\n    border-radius: 0 var(--spacing) var(--spacing) 0;\n  }\n  .kol-badge__label {\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__label .kol-span__container {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-
-var css_248z$B = "@layer kol-theme-component {\n  .kol-breadcrumb__list-element-span {\n    font-weight: bold;\n    /* text-transform: uppercase; */\n  }\n}";
-
-var css_248z$A = "@layer kol-theme-component {\n  a,\n  button {\n    border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family-sans);\n    /* text-transform: uppercase; */\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-width: var(--spacing);\n    font-size: inherit;\n    /*line-height: 1.25em;*/\n    /*padding: calc(4 * var(--spacing));*/\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  button {\n    background-color: transparent;\n  }\n  .button a.hide-label > .kol-span-wc,\n  .button button.hide-label > .kol-span-wc {\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  .kol-link-wc.primary > a > .kol-span-wc,\n  .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n  button.primary > .kol-span-wc,\n  button.primary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.primary > a:hover > .kol-span-wc,\n  .kol-link-wc.primary > a:focus > .kol-span-wc,\n  button.primary:hover > .kol-span-wc,\n  button.primary:focus > .kol-span-wc {\n    background-color: var(--color-achat);\n    border-color: var(--color-achat);\n  }\n  .kol-link-wc.secondary > a > .kol-span-wc,\n  .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n  button.secondary > .kol-span-wc,\n  button.secondary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-petrol);\n    color: var(--color-petrol);\n  }\n  .kol-link-wc.secondary > a:hover > .kol-span-wc,\n  .kol-link-wc.secondary > a:focus > .kol-span-wc,\n  button.secondary:hover > .kol-span-wc,\n  button.secondary:focus > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.normal > a > .kol-span-wc,\n  .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n  button.normal > .kol-span-wc,\n  button.normal:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-anthrazit);\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.normal > a:hover > .kol-span-wc,\n  .kol-link-wc.normal > a:focus > .kol-span-wc,\n  button.normal:hover > .kol-span-wc,\n  button.normal:focus > .kol-span-wc {\n    background-color: var(--color-anthrazit);\n    border-color: var(--color-anthrazit);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.danger > a > .kol-span-wc,\n  .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n  button.danger > .kol-span-wc,\n  button.danger:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-blut);\n    color: var(--color-blut);\n  }\n  .kol-link-wc.danger > a:hover > .kol-span-wc,\n  .kol-link-wc.danger > a:focus > .kol-span-wc,\n  button.danger:hover > .kol-span-wc,\n  button.danger:focus > .kol-span-wc {\n    background-color: var(--color-blut);\n    border-color: var(--color-blut);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.ghost > a > .kol-span-wc,\n  .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n  button.ghost > .kol-span-wc,\n  button.ghost:disabled:hover > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: transparent;\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.ghost > a:hover > .kol-span-wc,\n  .kol-link-wc.ghost > a:focus > .kol-span-wc,\n  button.ghost:hover > .kol-span-wc,\n  button.ghost:focus > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: var(--color-ghost);\n    color: var(--color-anthrazit);\n  }\n}";
-
-var css_248z$z = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-
-var css_248z$y = "@layer kol-theme-component {\n  a,\n  button {\n    border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family-sans);\n    /* text-transform: uppercase; */\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-width: var(--spacing);\n    font-size: inherit;\n    /*line-height: 1.25em;*/\n    /*padding: calc(4 * var(--spacing));*/\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .button a.hide-label > .kol-span-wc,\n  .button button.hide-label > .kol-span-wc {\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  .kol-link-wc.primary > a > .kol-span-wc,\n  .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n  button.primary > .kol-span-wc,\n  button.primary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.primary > a:hover > .kol-span-wc,\n  .kol-link-wc.primary > a:focus > .kol-span-wc,\n  button.primary:hover > .kol-span-wc,\n  button.primary:focus > .kol-span-wc {\n    background-color: var(--color-achat);\n    border-color: var(--color-achat);\n  }\n  .kol-link-wc.secondary > a > .kol-span-wc,\n  .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n  button.secondary > .kol-span-wc,\n  button.secondary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-petrol);\n    color: var(--color-petrol);\n  }\n  .kol-link-wc.secondary > a:hover > .kol-span-wc,\n  .kol-link-wc.secondary > a:focus > .kol-span-wc,\n  button.secondary:hover > .kol-span-wc,\n  button.secondary:focus > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.normal > a > .kol-span-wc,\n  .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n  button.normal > .kol-span-wc,\n  button.normal:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-anthrazit);\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.normal > a:hover > .kol-span-wc,\n  .kol-link-wc.normal > a:focus > .kol-span-wc,\n  button.normal:hover > .kol-span-wc,\n  button.normal:focus > .kol-span-wc {\n    background-color: var(--color-anthrazit);\n    border-color: var(--color-anthrazit);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.danger > a > .kol-span-wc,\n  .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n  button.danger > .kol-span-wc,\n  button.danger:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-blut);\n    color: var(--color-blut);\n  }\n  .kol-link-wc.danger > a:hover > .kol-span-wc,\n  .kol-link-wc.danger > a:focus > .kol-span-wc,\n  button.danger:hover > .kol-span-wc,\n  button.danger:focus > .kol-span-wc {\n    background-color: var(--color-blut);\n    border-color: var(--color-blut);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.ghost > a > .kol-span-wc,\n  .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n  button.ghost > .kol-span-wc,\n  button.ghost:disabled:hover > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: transparent;\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.ghost > a:hover > .kol-span-wc,\n  .kol-link-wc.ghost > a:focus > .kol-span-wc,\n  button.ghost:hover > .kol-span-wc,\n  button.ghost:focus > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: var(--color-ghost);\n    color: var(--color-anthrazit);\n  }\n}";
-
-var css_248z$x = "@layer kol-theme-component {\n  :host > div {\n    background-color: white;\n    border-color: var(--border-color);\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(2 * var(--border-radius));\n    width: 100%;\n    height: 100%;\n  }\n  .kol-heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    display: block;\n    border-bottom-style: solid;\n    border-bottom-color: var(--border-color);\n    border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div > div {\n    display: block;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div > div:last-child {\n    display: block;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    border-top-style: solid;\n    border-top-color: var(--color-achat);\n    border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-
-var css_248z$w = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  .combobox {\n    display: block;\n    position: relative;\n  }\n  .combobox__group {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__group:not(.disabled) .combobox__group:hover, .combobox__group:focus-within {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox:not(.combobox--disabled) .combobox__group:hover {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__input {\n    flex-grow: 1;\n    border: none;\n    background-color: transparent;\n    border: none;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input:focus {\n    outline-offset: 0;\n    outline-width: 0;\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: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\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    height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item:focus {\n    background-color: var(--color-petrol);\n    color: var(--color-weiss);\n    outline: 0;\n  }\n  .error .combobox__group {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n}";
-
-var css_248z$v = "@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  .details__heading-button {\n    border-radius: var(--border-radius);\n  }\n  .details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .details__heading-button button .span-label {\n    border-bottom-color: #000;\n  }\n  .details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading-button .kol-span-wc > span {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .details__content.indented-text {\n    font-family: var(--font-family);\n    border-left: calc(4rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n    padding: 0.25em 0.5em;\n    margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-
-var css_248z$u = "@layer kol-theme-component {\n  :host .drawer__wrapper {\n    box-shadow: 0 0 0.25em gray;\n  }\n}";
-
-var css_248z$t = "@layer kol-theme-component {\n  .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  .kol-link-wc {\n    display: inline-block;\n  }\n  .kol-link-wc .kol-link-wc a,\n  .kol-link-wc .kol-button-wc button {\n    text-decoration-line: none;\n  }\n  .kol-link-wc a,\n  .kol-link-wc button {\n    background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n    background-repeat: no-repeat;\n    background-position: left 0 bottom 0;\n    background-size: 25% 0.25ex;\n    border-radius: var(--spacing);\n    color: var(--color-petrol);\n    font-family: var(--font-family-sans);\n    font-size: inherit;\n    /* text-transform: uppercase; */\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  .kol-link-wc a:focus,\n  .kol-link-wc a:hover,\n  .kol-link-wc button:focus,\n  .kol-link-wc button:hover {\n    background-size: 100% 0.25ex;\n    color: var(--color-achat);\n  }\n  .kol-link-wc a > .kol-span-wc,\n  .kol-link-wc button > .kol-span-wc {\n    gap: 0.25em;\n  }\n  .kol-link-wc a.skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .kol-link-wc a.skip:focus {\n    background-color: white;\n    box-shadow: 0 0 calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) white;\n    left: unset;\n    position: unset;\n  }\n  .mandatory-fields-hint {\n    font-family: var(--font-family);\n    border-left: calc(4rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n    padding: 0.25em 0.5em;\n    margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  .kol-alert .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}";
-
-var css_248z$s = "@layer kol-theme-component {\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    margin: 0;\n    padding: 0;\n  }\n  .headline-h1 {\n    font-family: var(--font-family-serif);\n    font-size: calc(54rem / var(--kolibri-root-font-size, 16));\n    font-weight: bold;\n    line-height: 1;\n  }\n  .headline-h2 {\n    font-family: var(--font-family-serif);\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n    font-weight: bold;\n    line-height: 1;\n  }\n  .headline-h3 {\n    font-family: var(--font-family-serif);\n    font-size: calc(26rem / var(--kolibri-root-font-size, 16));\n    font-weight: bold;\n    line-height: 1;\n  }\n  .headline-h4 {\n    font-family: var(--font-family-serif);\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    font-weight: normal;\n    line-height: 1;\n  }\n  .headline-h5 {\n    font-family: var(--font-family-serif);\n    font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n    font-weight: bold;\n    line-height: 1;\n  }\n  .headline-h6 {\n    font-family: var(--font-family-sans);\n    font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n    font-weight: normal;\n    line-height: 1;\n  }\n}";
-
-var css_248z$r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-indented-text-wc > div {\n    font-family: var(--font-family);\n    border-left: calc(4rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n    padding: 0.25em 0.5em;\n    margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n}";
-
-var css_248z$q = "@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-color: var(--default-border);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  input:hover {\n    border-color: var(--color-petrol);\n  }\n  /* NEU */\n  .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n  }\n  .kol-input.default {\n    grid-template-columns: calc(12 * var(--spacing)) auto;\n  }\n  .default[data-label-align=left]:not(.hide-label) {\n    grid-template-columns: auto calc(12 * var(--spacing));\n  }\n  .switch {\n    grid-template-columns: calc(26 * var(--spacing)) auto;\n  }\n  .switch[data-label-align=left]:not(.hide-label) {\n    grid-template-columns: auto calc(26 * var(--spacing));\n  }\n  .button {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16)) 0;\n    grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n  }\n  .button[data-label-align=left]:not(.hide-label) {\n    grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n  }\n  .kol-input > div.input {\n    display: inline-flex;\n    order: 1;\n  }\n  .kol-input > div.input input {\n    margin: 0;\n  }\n  .kol-input > label {\n    order: 2;\n    padding-left: calc(4 * var(--spacing));\n  }\n  .kol-input > .kol-alert.error {\n    order: 3;\n    padding-top: 0.25em;\n    grid-column: span 2/auto;\n  }\n  /* CHECKBOX */\n  input[type=checkbox] {\n    appearance: none;\n    background-color: white;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  input[type=checkbox]:checked {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n  }\n  .default input[type=checkbox] {\n    height: calc(12 * var(--spacing));\n    min-width: calc(12 * var(--spacing));\n    width: calc(12 * var(--spacing));\n  }\n  .default .icon {\n    margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .default.checked .icon {\n    color: var(--color-weiss);\n  }\n  .switch input[type=checkbox] {\n    display: block;\n    min-width: 3.2em;\n    width: 3.2em;\n    height: 1.7em;\n    position: relative;\n  }\n  .switch input[type=checkbox]:before {\n    /* border-radius: 0.25em; */\n    -webkit-transition: 0.5s;\n    -moz-transition: 0.5s;\n    -ms-transition: 0.5s;\n    transition: 0.5;\n    width: 1.2em;\n    height: 1.2em;\n    left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    background-color: black;\n    position: absolute;\n  }\n  .switch input[type=checkbox]:checked:before {\n    transform: translateX(1.5em);\n    background-color: white;\n  }\n  .switch input[type=checkbox]:indeterminate:before {\n    transform: translateX(0.75em);\n    background-color: var(--color-petrol);\n  }\n  .switch:is(:not(.checked), .indeterminate) .icon {\n    color: #fff;\n  }\n  .disabled {\n    opacity: 0.33;\n  }\n  .kol-input span.hint {\n    grid-column: span 2;\n    font-style: italic;\n    color: gray;\n    display: block;\n    order: 3;\n    padding: 0 var(--spacing);\n  }\n  .button:focus-within {\n    border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    outline-color: var(--color-achat);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-
-var css_248z$p = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    cursor: pointer;\n    width: 100%;\n    overflow: hidden;\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  input:not(.disabled, input:disabled):hover, input:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .error input {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n}";
-
-var css_248z$o = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    cursor: pointer;\n    width: 100%;\n    overflow: hidden;\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  input:not(.disabled, input:disabled):hover, input:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .error input {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n}";
-
-var css_248z$n = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    cursor: pointer;\n    width: 100%;\n    overflow: hidden;\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  input:not(.disabled, input:disabled):hover, input:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .error input {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n}";
-
-var css_248z$m = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    cursor: pointer;\n    width: 100%;\n    overflow: hidden;\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  input:not(.disabled, input:disabled):hover, input:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .error input {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n}";
-
-var css_248z$l = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    cursor: pointer;\n    width: 100%;\n    overflow: hidden;\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  input:not(.disabled, input:disabled):hover, input:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .error input {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n}";
-
-var css_248z$k = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    cursor: pointer;\n    width: 100%;\n    overflow: hidden;\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  input:not(.disabled, input:disabled):hover, input:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .error input {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n}";
-
-var css_248z$j = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  label {\n    font-weight: normal;\n  }\n  :host input:focus {\n    outline-color: var(--color-achat);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n  }\n  input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    width: 100%;\n    color: var(--color-anthrazit);\n    border-color: var(--default-border);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n    /* padding: rem(10) rem(14); */\n  }\n  input:hover {\n    border-color: var(--color-achat);\n  }\n  .kol-alert {\n    display: block;\n    width: 100%;\n    order: 3;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  /* RADIO */\n  fieldset {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n  }\n  fieldset .hint,\n  fieldset .kol-input .hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  fieldset .hint {\n    order: 4;\n  }\n  fieldset .kol-input {\n    display: grid;\n    order: 2;\n  }\n  fieldset .kol-input .hint {\n    order: 3;\n  }\n  fieldset.horizontal {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: flex-start;\n  }\n  fieldset legend {\n    display: block;\n    width: 100%;\n    line-height: 1.5;\n  }\n  .radio-input-wrapper,\n  .input {\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    gap: 0.5em;\n    margin-top: 0.25em;\n    margin-bottom: 0.25em;\n    align-items: center;\n    position: relative;\n  }\n  .radio-label {\n    cursor: pointer;\n    display: flex;\n    width: 100%;\n  }\n  .radio-label span {\n    margin-top: 0.125em;\n  }\n  .radio-input-wrapper input[type=radio] {\n    appearance: none;\n    transition: 0.5s;\n    border-radius: 100%;\n    height: calc(12 * var(--spacing));\n    min-width: calc(12 * var(--spacing));\n    width: calc(12 * var(--spacing));\n  }\n  .radio-input-wrapper input[type=radio]:checked:before {\n    box-shadow: 0 0 calc(1.6rem / var(--kolibri-root-font-size, 16)) black;\n    background-color: var(--color-petrol);\n  }\n  .radio-input-wrapper input[type=radio]:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: #999;\n    cursor: not-allowed;\n  }\n  .kol-alert {\n    width: 100%;\n  }\n}";
-
-var css_248z$i = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    cursor: pointer;\n    width: 100%;\n    overflow: hidden;\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  input:not(.disabled, input:disabled):hover, input:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .error input {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n}";
-
-var css_248z$h = "@layer kol-theme-component {\n  .kol-link-wc a,\n  .kol-button-wc button {\n    text-decoration-line: none;\n  }\n  a,\n  button {\n    background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n    background-repeat: no-repeat;\n    background-position: left 0 bottom 0;\n    background-size: 25% 0.25ex;\n    border-radius: var(--spacing);\n    color: var(--color-petrol);\n    font-family: var(--font-family-sans);\n    font-size: inherit;\n    /* text-transform: uppercase; */\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  a:focus,\n  a:hover,\n  button:focus,\n  button:hover {\n    background-size: 100% 0.25ex;\n    color: var(--color-achat);\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n  }\n  a.skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  a.skip:focus {\n    background-color: white;\n    box-shadow: 0 0 calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) white;\n    left: unset;\n    position: unset;\n  }\n}";
-
-var css_248z$g = "@layer kol-theme-component {\n  .kol-link-wc a,\n  .kol-button-wc button {\n    text-decoration-line: none;\n  }\n  a,\n  button {\n    background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n    background-repeat: no-repeat;\n    background-position: left 0 bottom 0;\n    background-size: 25% 0.25ex;\n    border-radius: var(--spacing);\n    color: var(--color-petrol);\n    font-family: var(--font-family-sans);\n    font-size: inherit;\n    /* text-transform: uppercase; */\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  a:focus,\n  a:hover,\n  button:focus,\n  button:hover {\n    background-size: 100% 0.25ex;\n    color: var(--color-achat);\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n  }\n  a.skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  a.skip:focus {\n    background-color: white;\n    box-shadow: 0 0 calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) white;\n    left: unset;\n    position: unset;\n  }\n}";
-
-var css_248z$f = "@layer kol-theme-component {\n  :host > div > nav ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    border-radius: var(--border-radius);\n    background-color: var(--color-petrol);\n  }\n  :host > div > nav ul > li {\n    border-radius: var(--border-radius);\n    overflow: hidden;\n    padding: 0.125em;\n  }\n  :host > div > nav ul > li[part*=vertical] + li {\n    border-radius: 0;\n    border-top: 0.1em dotted white;\n  }\n  :host > div > nav ul > li[part*=\"vertical selected\"] {\n    border-right: 0.375em solid var(--color-citrin);\n  }\n  :host > div > nav ul > li[part*=horizontal] + li {\n    border-radius: 0;\n    border-left: 0.1em dotted white;\n  }\n  :host > div > nav ul > li[part*=\"horizontal selected\"] {\n    border-bottom: 0.375em solid var(--color-citrin);\n  }\n  :host > div > nav ul > li > div {\n    height: 100%;\n  }\n  :host > div > nav .kol-link-wc {\n    width: 100%;\n    /*height: 100%;font-weight: 600;*/\n    display: block;\n  }\n  :host > div > nav .kol-link-wc a {\n    border-radius: var(--border-radius);\n    background-color: var(--color-petrol);\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    grid: flex;\n    line-height: 2;\n    padding: 0.5em;\n    color: white;\n    height: 100%;\n    -webkit-box-align: center;\n    align-items: center;\n    display: flex;\n    cursor: pointer;\n    text-decoration: inherit;\n  }\n  :host > div > nav .kol-link-wc[exportparts*=selected] a {\n    background-color: var(--color-achat);\n    font-weight: 700;\n  }\n  :host > div > nav .kol-link-wc a .kol-icon.mr-2 {\n    margin-right: calc(4 * var(--spacing));\n  }\n  :host > div > nav .kol-link-wc a .kol-icon.ml-2 {\n    margin-left: calc(4 * var(--spacing));\n  }\n  :host > div > nav .kol-link-wc a:focus,\n  :host > div > nav .kol-link-wc a:hover {\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid white;\n    background-color: var(--color-fluorit);\n    color: var(--color-anthrazit);\n  }\n  /* compact button */\n  :host > div > div:last-child {\n    margin-top: 0.5em;\n    width: 100%;\n    text-align: center;\n  }\n  :host > div > nav .kol-link-wc a.text-center {\n    display: grid;\n    align-items: center;\n    justify-items: center;\n  }\n  /* horizontal */\n  ul.flex {\n    display: flex;\n  }\n  li > div > div.absolute {\n    position: absolute;\n  }\n  .kol-span-wc {\n    justify-items: baseline;\n  }\n}";
-
-var css_248z$e = "@layer kol-theme-component {\n  .button {\n    border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family-sans);\n  }\n  .button-inner {\n    background-color: var(--color-weiss);\n    border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border: var(--spacing) solid var(--color-anthrazit);\n    color: var(--color-anthrazit);\n    font-size: inherit;\n    gap: 0.25em;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n    transition-timing-function: ease-in-out;\n  }\n  .hide-label .button-inner {\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .button:not(:disabled):hover .button-inner,\n  .button:focus .button-inner {\n    background-color: var(--color-anthrazit);\n    border-color: var(--color-anthrazit);\n    color: var(--color-weiss);\n  }\n  .button:disabled .button-inner {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .selected .button-inner {\n    background-color: var(--color-achat);\n    border-color: var(--color-achat);\n    color: var(--color-weiss);\n    font-weight: bold;\n    opacity: 1;\n    text-decoration: underline;\n  }\n}";
-
-var css_248z$d = "@layer kol-theme-component {\n  :host {\n    --kolibri-text-label-padding: calc(60rem / var(--kolibri-root-font-size, 16));\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  svg line:first-child,\n  svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-fluorit);\n  }\n  svg line:last-child,\n  svg circle:last-child {\n    stroke: var(--color-achat);\n    fill: transparent;\n  }\n  progress {\n    display: none;\n  }\n}";
-
-var css_248z$c = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  .error select {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n  select {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    width: 100%;\n  }\n  select:not(.disabled) select:hover, select:focus-within {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  option {\n    min-height: 2em;\n  }\n  select:not([multiple]) option {\n    padding: 0.5em;\n  }\n}";
-
-var css_248z$b = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  .single-select {\n    display: block;\n    position: relative;\n  }\n  .single-select__group {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__group:not(.disabled) .single-select__group:hover, .single-select__group:focus-within {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select:not(.disabled) .single-select__group:hover {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__input {\n    flex-grow: 1;\n    background-color: transparent;\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .single-select__input:focus {\n    outline-offset: 0;\n    outline-width: 0;\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    cursor: pointer;\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: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    border-color: var(--kolibri-color-normal);\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    background-color: #e8edf2;\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n  }\n  .single-select__item {\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\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-petrol);\n    outline: 0;\n  }\n  .single-select__item:focus .radio-label, .single-select__item.highlighted .radio-label {\n    color: var(--color-weiss);\n  }\n  .error .single-select__group {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n}";
-
-var css_248z$a = "@layer kol-theme-component {\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n    cursor: pointer;\n  }\n}";
-
-var css_248z$9 = "@layer kol-theme-component {\n  .cycle {\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .cycle span {\n    background-color: #fc0;\n  }\n}";
-
-var css_248z$8 = "@layer kol-theme-component {\n  :host {\n    border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: var(--spacing);\n  }\n  .popover {\n    background-color: #fff;\n  }\n  .horizontal-line {\n    background-color: var(--border-color);\n    border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .secondary-button > button > .kol-span-wc {\n    border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .secondary-button > button > :active > .kol-span-wc {\n    border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .secondary-button > button > :focus > .kol-span-wc {\n    border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .secondary-button > a,\n  .secondary-button > button {\n    border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    font-family: var(--font-family-sans);\n    /* text-transform: uppercase; */\n  }\n  a,\n  button {\n    border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    font-family: var(--font-family-sans);\n    /* text-transform: uppercase; */\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n    font-size: inherit;\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  button {\n    background-color: transparent;\n  }\n  .button a.hide-label > .kol-span-wc,\n  .button button.hide-label > .kol-span-wc {\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  .kol-link-wc.primary > a > .kol-span-wc,\n  .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n  button.primary > .kol-span-wc,\n  button.primary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.primary > a:hover > .kol-span-wc,\n  .kol-link-wc.primary > a:focus > .kol-span-wc,\n  button.primary:hover > .kol-span-wc,\n  button.primary:focus > .kol-span-wc {\n    background-color: var(--color-achat);\n    border-color: var(--color-achat);\n  }\n  .kol-link-wc.secondary > a > .kol-span-wc,\n  .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n  button.secondary > .kol-span-wc,\n  button.secondary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-petrol);\n    color: var(--color-petrol);\n  }\n  .kol-link-wc.secondary > a:hover > .kol-span-wc,\n  .kol-link-wc.secondary > a:focus > .kol-span-wc,\n  button.secondary:hover > .kol-span-wc,\n  button.secondary:focus > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.normal > a > .kol-span-wc,\n  .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n  button.normal > .kol-span-wc,\n  button.normal:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-anthrazit);\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.normal > a:hover > .kol-span-wc,\n  .kol-link-wc.normal > a:focus > .kol-span-wc,\n  button.normal:hover > .kol-span-wc,\n  button.normal:focus > .kol-span-wc {\n    background-color: var(--color-anthrazit);\n    border-color: var(--color-anthrazit);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.danger > a > .kol-span-wc,\n  .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n  button.danger > .kol-span-wc,\n  button.danger:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-blut);\n    color: var(--color-blut);\n  }\n  .kol-link-wc.danger > a:hover > .kol-span-wc,\n  .kol-link-wc.danger > a:focus > .kol-span-wc,\n  button.danger:hover > .kol-span-wc,\n  button.danger:focus > .kol-span-wc {\n    background-color: var(--color-blut);\n    border-color: var(--color-blut);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.ghost > a > .kol-span-wc,\n  .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n  button.ghost > .kol-span-wc,\n  button.ghost:disabled:hover > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: transparent;\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.ghost > a:hover > .kol-span-wc,\n  .kol-link-wc.ghost > a:focus > .kol-span-wc,\n  button.ghost:hover > .kol-span-wc,\n  button.ghost:focus > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: var(--color-ghost);\n    color: var(--color-anthrazit);\n  }\n}";
-
-var css_248z$7 = "@layer kol-theme-component {\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  :host > div:last-child {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--border-color);\n  }\n  @media (min-width: 1024px) {\n    :host > div.pagination,\n    :host > div.pagination > div:last-child {\n      grid-auto-flow: column;\n    }\n    :host > div.pagination .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}\n@layer kol-theme-component {\n  .table {\n    padding: 0.5em;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-petrol);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n    border-width: 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  tr {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n  }\n  th,\n  td {\n    border-right: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n  }\n  th:last-child,\n  td:last-child {\n    border-right-width: 0;\n  }\n  tr:nth-child(even) {\n    background-color: #f2f2f2;\n  }\n  th,\n  td {\n    padding: 0.25em 0.5em;\n  }\n  th {\n    background-color: #eee;\n  }\n  .table-sort-button .button {\n    font-weight: bold;\n  }\n  .input input[type=checkbox]:checked {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n  }\n  .input input[type=checkbox]:focus {\n    border-color: var(--color-petrol);\n    outline-color: var(--color-petrol);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n  }\n  .input .icon {\n    color: var(--color-weiss);\n  }\n  .input.indeterminate input {\n    background-color: var(--color-weiss);\n  }\n  .input.indeterminate .icon {\n    color: var(--color-petrol);\n  }\n  .input input[type=radio] {\n    display: flex;\n  }\n  .input input[type=radio]:hover {\n    border-color: var(--color-achat);\n  }\n  .input input[type=radio]:checked {\n    border-color: var(--color-anthrazit);\n  }\n  .input input[type=radio]:checked:before {\n    background-color: var(--color-petrol);\n  }\n  .input input[type=radio]:focus {\n    border-color: var(--color-petrol);\n    border-color: var(--color-anthrazit);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-
-var css_248z$6 = "@layer kol-theme-component {\n  .table {\n    padding: 0.5em;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-petrol);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n    border-width: 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  tr {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n  }\n  th,\n  td {\n    border-right: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n  }\n  th:last-child,\n  td:last-child {\n    border-right-width: 0;\n  }\n  tr:nth-child(even) {\n    background-color: #f2f2f2;\n  }\n  th,\n  td {\n    padding: 0.25em 0.5em;\n  }\n  th {\n    background-color: #eee;\n  }\n  .table-sort-button .button {\n    font-weight: bold;\n  }\n  .input input[type=checkbox]:checked {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n  }\n  .input input[type=checkbox]:focus {\n    border-color: var(--color-petrol);\n    outline-color: var(--color-petrol);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n  }\n  .input .icon {\n    color: var(--color-weiss);\n  }\n  .input.indeterminate input {\n    background-color: var(--color-weiss);\n  }\n  .input.indeterminate .icon {\n    color: var(--color-petrol);\n  }\n  .input input[type=radio] {\n    display: flex;\n  }\n  .input input[type=radio]:hover {\n    border-color: var(--color-achat);\n  }\n  .input input[type=radio]:checked {\n    border-color: var(--color-anthrazit);\n  }\n  .input input[type=radio]:checked:before {\n    background-color: var(--color-petrol);\n  }\n  .input input[type=radio]:focus {\n    border-color: var(--color-petrol);\n    border-color: var(--color-anthrazit);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-
-var css_248z$5 = "@layer kol-theme-component {\n  :host > div {\n    display: block;\n    width: 100%;\n  }\n  :host .tabs-button-group {\n    display: flex;\n    background-color: var(--color-petrol);\n  }\n  :host .tabs-button-group > div {\n    display: inline-flex;\n  }\n  :host .tabs-button-group > div + div {\n    margin-left: 0.25em;\n  }\n  .tabs-content {\n    padding: 0.25em;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--border-color);\n  }\n  button {\n    box-sizing: border-box;\n    font-size: inherit;\n    line-height: 1.25;\n    cursor: pointer;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    box-shadow: 0 0 0.25em gray;\n    width: inherit;\n    overflow: hidden;\n    border-style: solid;\n    padding: calc(4 * var(--spacing));\n    display: grid;\n    gap: 0.25em;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button-wc button.selected,\n  .kol-button-wc[aria-selected=true] button {\n    background-color: white;\n    border-bottom-width: 0.25em;\n    border-bottom-style: solid;\n    border-bottom-color: var(--color-citrin);\n  }\n  button > .kol-span-wc span {\n    display: flex;\n    gap: 0.25em;\n    align-items: center;\n    justify-content: center;\n  }\n  button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  button.primary,\n  button.primary:disabled:hover {\n    background-color: var(--kolibri-color-primary);\n    border-color: var(--kolibri-color-primary);\n    color: white;\n  }\n  button.primary:hover,\n  button.primary:focus {\n    color: var(--kolibri-color-primary);\n  }\n  button.secondary,\n  button.secondary:disabled:hover {\n    background-color: var(--kolibri-color-secondary);\n    border-color: var(--kolibri-color-secondary);\n    color: white;\n  }\n  button.secondary:hover,\n  button.secondary:focus {\n    color: var(--kolibri-color-secondary);\n  }\n  button.normal,\n  button.normal:disabled:hover {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: white;\n  }\n  button.normal:hover,\n  button.normal:focus {\n    color: var(--color-petrol);\n  }\n  button.danger,\n  button.danger:disabled:hover {\n    background-color: var(--kolibri-color-danger);\n    border-color: var(--kolibri-color-danger);\n    color: white;\n  }\n  button.danger:hover,\n  button.danger:focus {\n    color: var(--kolibri-color-danger);\n  }\n  button.ghost,\n  button.ghost:disabled:hover {\n    background-color: white;\n    border-color: var(--kolibri-color-ghost);\n    color: var(--kolibri-color-ghost);\n  }\n  button.ghost:hover,\n  button.ghost:focus {\n    background-color: var(--kolibri-color-ghost);\n    color: white;\n  }\n  button:hover,\n  button:focus {\n    background-color: white;\n    box-shadow: 0 0 0.25em black;\n  }\n  button:active {\n    outline: 0;\n    box-shadow: none;\n  }\n  .close-button {\n    font-size: 25%;\n    height: fit-content;\n    width: 0;\n  }\n  .close-button button {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    left: -4.25em;\n    top: 0.25em;\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left {\n    grid-template-columns: auto 1fr;\n  }\n  :host > div.tabs-align-right {\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-left .tabs-button-group,\n  :host > .tabs-align-top .tabs-button-group {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .tabs-button-group,\n  :host > .tabs-align-right .tabs-button-group {\n    order: 1;\n  }\n  :host > div.tabs-align-left .tabs-button-group > div,\n  :host > div.tabs-align-left .tabs-button-group > div > div,\n  :host > div.tabs-align-right .tabs-button-group > div,\n  :host > div.tabs-align-right .tabs-button-group > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n  :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .tabs-button-group div,\n  :host > div.tabs-align-top .tabs-button-group div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}";
-
-var css_248z$4 = "@layer kol-theme-component {\n  label {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n    font-weight: 700;\n    color: var(--color-anthrazit);\n    width: 100%;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host .kol-alert {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert .default {\n    --alert-background-color: var(--color-anthrazit);\n    --alert-border-color: var(--color-anthrazit);\n  }\n  :host .kol-alert .error {\n    --alert-background-color: var(--color-rotton);\n    --alert-border-color: var(--color-rotton);\n  }\n  :host .kol-alert .info {\n    --alert-background-color: var(--color-petrol);\n    --alert-border-color: var(--color-petrol);\n  }\n  :host .kol-alert .success {\n    --alert-background-color: var(--color-gras);\n    --alert-border-color: var(--color-gras);\n  }\n  :host .kol-alert .warning {\n    --alert-background-color: var(--color-warn);\n    --alert-border-color: var(--color-warn);\n  }\n  :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    background-color: var(--alert-background-color);\n    border-color: var(--alert-border-color);\n  }\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    color: var(--default-letter);\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 0;\n    border-color: var(--kolibri-color-normal);\n    background-color: #e8edf2;\n    width: 100%;\n  }\n  textarea::placeholder {\n    font-style: italic;\n  }\n  textarea:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  textarea:not(.disabled, textarea:disabled):hover, textarea:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary);\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .error textarea {\n    background-color: var(--color-rotton-20);\n    border-color: var(--color-rotton);\n  }\n  textarea:read-only {\n    border-color: var(--border-default);\n    background-color: var(--background-light-grey);\n  }\n}";
-
-var css_248z$3 = "@layer kol-theme-component {\n  .kol-alert--default {\n    --alert-border-color: var(--color-anthrazit);\n  }\n  .kol-alert--error {\n    --alert-border-color: var(--color-rotton);\n  }\n  .kol-alert--info {\n    --alert-border-color: var(--color-petrol);\n  }\n  .kol-alert--success {\n    --alert-border-color: var(--color-gras);\n  }\n  .kol-alert--warning {\n    --alert-border-color: var(--color-warn);\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    background-color: var(--alert-border-color);\n  }\n}\n@layer kol-theme-component {\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(750rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  .toast {\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .heading {\n    width: 100%;\n  }\n  .toast .heading .heading-content {\n    flex: 1;\n  }\n}";
-
-var css_248z$2 = "@layer kol-theme-component {\n  .toolbar {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--kolibri-border-color);\n    background-color: var(--color-white);\n  }\n}";
-
-var css_248z$1 = "@layer kol-theme-component {\n  .tree-item ul {\n    display: flex;\n    flex-direction: column;\n  }\n  .tree-link {\n    display: block;\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n  }\n  .tree-link:hover, .tree-link:focus-within {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--border-color);\n  }\n  .tree-link:hover > a, .tree-link:focus-within > a {\n    outline-offset: 0;\n    color: var(--color-petrol);\n  }\n  .tree-link.active {\n    background-color: var(--color-anthrazit);\n  }\n  .tree-link.active a {\n    color: var(--color-weiss);\n  }\n  .tree-link a {\n    display: block;\n    color: var(--color-black);\n    text-decoration: none;\n    text-align: left;\n  }\n  .tree-link a .toggle-button {\n    display: inline-block;\n    color: var(--color-blue);\n  }\n  .tree-link a .toggle-button:hover {\n    transform: scale(1.3);\n  }\n  .tree-link a:focus {\n    color: var(--color-petrol);\n  }\n}";
-
-var css_248z = "@layer kol-theme-component {\n  .tree ul {\n    display: flex;\n    flex-direction: column;\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree:focus-within {\n    outline: 0;\n  }\n  .tree:focus-within ul {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n  }\n}";
-
-const ITZBund = KoliBri.createTheme('itzbund', {
-    GLOBAL: css_248z$F,
-    'KOL-BUTTON': css_248z$A,
-    'KOL-BUTTON-GROUP': css_248z$z,
-    'KOL-LINK-BUTTON': css_248z$h,
-    'KOL-PAGINATION': css_248z$e,
-    'KOL-BUTTON-LINK': css_248z$y,
-    'KOL-FORM': css_248z$t,
-    'KOL-INPUT-TEXT': css_248z$i,
-    'KOL-INPUT-PASSWORD': css_248z$k,
-    'KOL-INPUT-NUMBER': css_248z$l,
-    'KOL-INPUT-DATE': css_248z$o,
-    'KOL-INPUT-EMAIL': css_248z$n,
-    'KOL-INPUT-FILE': css_248z$m,
-    'KOL-TEXTAREA': css_248z$4,
-    'KOL-ALERT': css_248z$D,
-    'KOL-HEADING': css_248z$s,
-    'KOL-BADGE': css_248z$C,
-    'KOL-INDENTED-TEXT': css_248z$r,
-    'KOL-LINK': css_248z$g,
-    'KOL-BREADCRUMB': css_248z$B,
-    'KOL-SPIN': css_248z$9,
-    'KOL-SINGLE-SELECT': css_248z$b,
+    GLOBAL: css_248z$I,
+    'KOL-ACCORDION': css_248z$H,
+    'KOL-ALERT': css_248z$G,
+    'KOL-AVATAR': css_248z$F,
+    'KOL-BADGE': css_248z$E,
+    'KOL-BREADCRUMB': css_248z$D,
+    'KOL-BUTTON': css_248z$C,
+    'KOL-BUTTON-LINK': css_248z$B,
+    'KOL-CARD': css_248z$A,
+    'KOL-COMBOBOX': css_248z$z,
+    'KOL-DETAILS': css_248z$y,
+    'KOL-DRAWER': css_248z$x,
+    'KOL-FORM': css_248z$w,
+    'KOL-HEADING': css_248z$v,
+    'KOL-INPUT-CHECKBOX': css_248z$u,
+    'KOL-INPUT-COLOR': css_248z$t,
+    'KOL-INPUT-DATE': css_248z$s,
+    'KOL-INPUT-EMAIL': css_248z$r,
+    'KOL-INPUT-FILE': css_248z$q,
+    'KOL-INPUT-NUMBER': css_248z$p,
+    'KOL-INPUT-PASSWORD': css_248z$o,
+    'KOL-INPUT-RADIO': css_248z$n,
+    'KOL-INPUT-RANGE': css_248z$m,
+    'KOL-INPUT-TEXT': css_248z$l,
+    'KOL-KOLIBRI': css_248z$k,
+    'KOL-LINK': css_248z$i,
+    'KOL-LINK-BUTTON': css_248z$j,
+    'KOL-MODAL': css_248z$h,
+    'KOL-NAV': css_248z$g,
+    'KOL-PAGINATION': css_248z$f,
+    'KOL-POPOVER-BUTTON': css_248z$e,
     'KOL-PROGRESS': css_248z$d,
     'KOL-SELECT': css_248z$c,
-    'KOL-INPUT-COLOR': css_248z$p,
-    'KOL-ACCORDION': css_248z$E,
+    'KOL-SINGLE-SELECT': css_248z$b,
+    'KOL-SKIP-NAV': css_248z$a,
+    'KOL-SPIN': css_248z$9,
+    'KOL-SPLIT-BUTTON': css_248z$8,
     'KOL-TABLE-STATEFUL': css_248z$7,
     'KOL-TABLE-STATELESS': css_248z$6,
-    'KOL-NAV': css_248z$f,
-    'KOL-CARD': css_248z$x,
-    'KOL-COMBOBOX': css_248z$w,
-    'KOL-DETAILS': css_248z$v,
-    'KOL-DRAWER': css_248z$u,
-    'KOL-INPUT-CHECKBOX': css_248z$q,
-    'KOL-INPUT-RADIO': css_248z$j,
-    'KOL-TOAST-CONTAINER': css_248z$3,
     'KOL-TABS': css_248z$5,
-    'KOL-SKIP-NAV': css_248z$a,
-    'KOL-SPLIT-BUTTON': css_248z$8,
+    'KOL-TEXTAREA': css_248z$4,
+    'KOL-TOAST-CONTAINER': css_248z$3,
     'KOL-TOOLBAR': css_248z$2,
-    'KOL-TREE': css_248z,
-    'KOL-TREE-ITEM': css_248z$1,
+    'KOL-TREE': css_248z$1,
+    'KOL-TREE-ITEM': css_248z,
 });
 
 exports.DEFAULT = DEFAULT;
 exports.ECL_EC = ECL_EC;
 exports.ECL_EU = ECL_EU;
-exports.ITZBund = ITZBund;
 //# sourceMappingURL=index.cjs.map