@public-ui/themes 4.0.0-alpha.0 → 4.0.0-alpha.2

package/dist/index.mjs

@@ -1,552 +1,1564 @@
 /*!
  * 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);}}
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var loglevel$1 = {exports: {}};
+
+/*
+* loglevel - https://github.com/pimterry/loglevel
+*
+* Copyright (c) 2013 Tim Perry
+* Licensed under the MIT license.
+*/
+var loglevel = loglevel$1.exports;
+
+var hasRequiredLoglevel;
+
+function requireLoglevel () {
+	if (hasRequiredLoglevel) return loglevel$1.exports;
+	hasRequiredLoglevel = 1;
+	(function (module) {
+		(function (root, definition) {
+		    if (module.exports) {
+		        module.exports = definition();
+		    } else {
+		        root.log = definition();
+		    }
+		}(loglevel, 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$1));
+	return loglevel$1.exports;
+}
+
+requireLoglevel();
+
+const I=(t,e)=>s=>s(t,e),P=(t,e)=>s=>s(t,e,{append:false}),$=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV==="test",s="VITEST"in t,a="JEST_WORKER_ID"in t,o="PLAYWRIGHT_TEST_BASE_URL"in t,r=t.CI==="true",i=t.TEST==="true"||t.IS_TEST==="true",c=typeof navigator<"u"&&navigator.webdriver===true,m=typeof navigator<"u"&&/playwright|puppeteer|webdriver|selenium|testcafe/i.test(navigator.userAgent);return e||s||a||o||r||i||c||m},n$1={A11yUi:{CSS_STYLE_CACHE:new Map,IS_TEST_ENVIRONMENT:$(),PERFORMANCE_MEASURES:new Map,STYLING_TASK_QUEUE:new Map,THEMES:new Map,showAverageTimes:()=>{const t={};for(const[s,a]of n$1.A11yUi.PERFORMANCE_MEASURES.entries())t[s]=[a.totalTime/a.count,a.count];const e=Object.entries(t).sort((s,a)=>a[1][0]-s[1][0]);return console.table(Object.fromEntries(e.map(([s,[a,o]])=>[s,{"avg (ms)":parseFloat(a.toFixed(2)),count:o}]))),t}}};const w=new Set,W=/--[^;]+/g,q=/:/,J=typeof MutationObserver<"u";let N=()=>{Math.min(25+Math.log2(n$1.A11yUi.STYLING_TASK_QUEUE.size+1)*20,250);};const X=(t,e)=>{let s=e.match(W);if(Array.isArray(s)){s=s.filter(o=>q.test(o));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}w.add(t);},y=(t,e)=>{const s=n$1.A11yUi.THEMES.get(t);return s instanceof Map&&s.has(e)?s.get(e):""},Z=t=>{for(const e of Array.from(t.childNodes))if(e instanceof HTMLStyleElement&&e.tagName==="STYLE"&&e.dataset.themingFallback===void 0)t.removeChild(e);else break},ee=(t,e)=>{try{if(n$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];e.forEach(a=>{const o=new CSSStyleSheet;o.replaceSync(a),s.push(o);}),t.adoptedStyleSheets=s;}catch{[...e].reverse().forEach((a,o)=>{if(typeof a!="string"||a.length===0)return;const r=document.createElement("style");switch(r.dataset.themingFallback="",o){case 4:r.dataset.themingBaseA11y="";break;case 3:r.dataset.themingBaseGlobal="";break;case 2:r.dataset.themingBaseComponent="";break;case 1:r.dataset.themingCustomGlobal="";break;case 0:r.dataset.themingCustomComponent="";break;default:r.dataset.themingUnknown="";break}r.innerHTML=a,t.insertBefore(r,t.firstChild);});}},te=(t,e,s)=>{if(s!==false){const a=[...Array.from(t.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE")];let o;try{o=[...Array.from(t.adoptedStyleSheets)];}catch{o=[];}s?.mode==="before"?(a.reverse().forEach(r=>e.unshift(r.innerHTML)),o.reverse().forEach(r=>e.unshift(Array.from(r.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(r=>e.push(r.innerHTML)),o.forEach(r=>e.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},se=(t,e,s)=>{const a=e.name||"default";let o;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");o=t.shadowRoot;}catch{o=t;}if(n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.has(t.tagName))v(t,o,n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.get(t.tagName),s);else {const r=y(a,"PROPERTIES"),i=y(a,"GLOBAL"),c=y(a,t.tagName);w.has(a)===false&&X(a,i);const m=[r,i,c];te(o,m,e.encroachCss),e.cache===true&&(n$1.A11yUi.CSS_STYLE_CACHE.has(a)===false&&n$1.A11yUi.CSS_STYLE_CACHE.set(a,new Map),n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.set(t.tagName,m)),v(t,o,m,s);}},v=(t,e,s,a)=>{const o=performance.now();if(Z(e),ee(e,s),H(t),a(),n$1.A11yUi.PERFORMANCE_MEASURES.has(t.tagName)){const r=n$1.A11yUi.PERFORMANCE_MEASURES.get(t.tagName);r.count+=1,r.totalTime+=performance.now()-o;}else n$1.A11yUi.PERFORMANCE_MEASURES.set(t.tagName,{count:1,totalTime:performance.now()-o});},L=t=>{const e=n$1.A11yUi.STYLING_TASK_QUEUE.get(t);if(e){const{resetCss:s,themeDetails:a}=e;se(t,a,s),H(t);}};const oe={attributes:true,attributeFilter:[],childList:false,subtree:false},R=J?new MutationObserver((t,e)=>{for(const s of t){const a=s.target;a.classList.contains("hydrated")&&(L(a),e.observe(a,oe));}}):null;R&&(N=()=>{});const H=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),N();};class ie{Prefix;Key;Tag;createTheme=(e,s)=>P(e,s);createTranslation=(e,s)=>I(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
+
+var KeyEnum;
+(function (KeyEnum) {
+    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["alert"] = 2] = "alert";
+    TagEnum[TagEnum["avatar"] = 3] = "avatar";
+    TagEnum[TagEnum["badge"] = 4] = "badge";
+    TagEnum[TagEnum["breadcrumb"] = 5] = "breadcrumb";
+    TagEnum[TagEnum["button"] = 6] = "button";
+    TagEnum[TagEnum["button-link"] = 7] = "button-link";
+    TagEnum[TagEnum["card"] = 8] = "card";
+    TagEnum[TagEnum["combobox"] = 9] = "combobox";
+    TagEnum[TagEnum["details"] = 10] = "details";
+    TagEnum[TagEnum["drawer"] = 11] = "drawer";
+    TagEnum[TagEnum["form"] = 12] = "form";
+    TagEnum[TagEnum["heading"] = 13] = "heading";
+    TagEnum[TagEnum["icon"] = 14] = "icon";
+    TagEnum[TagEnum["image"] = 15] = "image";
+    TagEnum[TagEnum["input-checkbox"] = 16] = "input-checkbox";
+    TagEnum[TagEnum["input-color"] = 17] = "input-color";
+    TagEnum[TagEnum["input-date"] = 18] = "input-date";
+    TagEnum[TagEnum["input-email"] = 19] = "input-email";
+    TagEnum[TagEnum["input-file"] = 20] = "input-file";
+    TagEnum[TagEnum["input-number"] = 21] = "input-number";
+    TagEnum[TagEnum["input-password"] = 22] = "input-password";
+    TagEnum[TagEnum["input-radio"] = 23] = "input-radio";
+    TagEnum[TagEnum["input-range"] = 24] = "input-range";
+    TagEnum[TagEnum["input-text"] = 25] = "input-text";
+    TagEnum[TagEnum["kolibri"] = 26] = "kolibri";
+    TagEnum[TagEnum["link"] = 27] = "link";
+    TagEnum[TagEnum["link-button"] = 28] = "link-button";
+    TagEnum[TagEnum["logo"] = 29] = "logo";
+    TagEnum[TagEnum["modal"] = 30] = "modal";
+    TagEnum[TagEnum["nav"] = 31] = "nav";
+    TagEnum[TagEnum["pagination"] = 32] = "pagination";
+    TagEnum[TagEnum["popover-button"] = 33] = "popover-button";
+    TagEnum[TagEnum["progress"] = 34] = "progress";
+    TagEnum[TagEnum["quote"] = 35] = "quote";
+    TagEnum[TagEnum["select"] = 36] = "select";
+    TagEnum[TagEnum["single-select"] = 37] = "single-select";
+    TagEnum[TagEnum["skip-nav"] = 38] = "skip-nav";
+    TagEnum[TagEnum["spin"] = 39] = "spin";
+    TagEnum[TagEnum["split-button"] = 40] = "split-button";
+    TagEnum[TagEnum["symbol"] = 41] = "symbol";
+    TagEnum[TagEnum["table"] = 42] = "table";
+    TagEnum[TagEnum["table-stateful"] = 43] = "table-stateful";
+    TagEnum[TagEnum["table-stateless"] = 44] = "table-stateless";
+    TagEnum[TagEnum["tabs"] = 45] = "tabs";
+    TagEnum[TagEnum["textarea"] = 46] = "textarea";
+    TagEnum[TagEnum["toast-container"] = 47] = "toast-container";
+    TagEnum[TagEnum["toolbar"] = 48] = "toolbar";
+    TagEnum[TagEnum["tooltip"] = 49] = "tooltip";
+    TagEnum[TagEnum["tree"] = 50] = "tree";
+    TagEnum[TagEnum["tree-item"] = 51] = "tree-item";
+})(TagEnum || (TagEnum = {}));
+const MODES = ['development', 'production', 'test'];
+let runtimeMode = 'production';
+const setRuntimeMode = (mode) => {
+    try {
+        if (MODES.includes(mode)) {
+            runtimeMode = mode;
+        }
+        else {
+            throw new Error(`Invalid NODE_ENV value: ${mode}. Expected one of ${MODES.join(', ')}.`);
+        }
+    }
+    catch (e) {
+        runtimeMode = 'production';
+    }
+};
+const getInitialMode = () => {
+    try {
+        const nodeEnv = typeof process !== 'undefined' && process.env ? process.env['NODE_ENV'] : undefined;
+        if (nodeEnv && MODES.includes(nodeEnv)) {
+            return nodeEnv;
+        }
+    }
+    catch (e) {
+    }
+    return 'production';
+};
+setRuntimeMode(getInitialMode());
+const isDevMode = () => runtimeMode === 'development';
+const LOG_STYLE = 'color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000';
+const mapToArray = (msg) => {
+    return Array.isArray(msg) ? msg : [msg];
+};
+const getLogLabel = (label) => {
+    return `%c${label}`;
+};
+const handleClassifier = (label, classifier) => {
+    if (typeof classifier === 'string' && classifier.length > 0) {
+        return `${getLogLabel(label)} | ${classifier}`;
+    }
+    else {
+        return getLogLabel(label);
+    }
+};
+const getShield = (label, options) => {
+    return [handleClassifier(label, options === null || options === void 0 ? void 0 : options.classifier), `${LOG_STYLE};${(options === null || options === void 0 ? void 0 : options.overwriteStyle) || ''}`];
+};
+const isDevModeOrForceLog = (forceLog) => isDevMode() || forceLog === true;
+class Logger {
+    constructor(label) {
+        this.label = label;
+    }
+    debug(msg, options) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.debug(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    info(msg, options) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.info(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    trace(msg, options) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.trace(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    warn(msg, options) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.warn(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    error(msg, options) {
+        console.error(...getShield(this.label, options), ...mapToArray(msg));
+    }
+    throw(msg, options) {
+        if (isDevModeOrForceLog(options === null || options === void 0 ? void 0 : options.forceLog)) {
+            throw new Error(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+}
+const Log = new Logger('KoliBri');
+const devCache = new Set();
+const devHint = (msg, options) => {
+    if (devCache.has(msg) === false || false) {
+        devCache.add(msg);
+        Log.debug([msg].concat([]), {
+            classifier: `💻 dev`,
+            forceLog: false,
+            overwriteStyle: '; background-color: #f09',
+        });
+    }
+};
+devHint(`We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!`);
+
+var rgbaConvert = {exports: {}};
+
+var hasRequiredRgbaConvert;
+
+function requireRgbaConvert () {
+	if (hasRequiredRgbaConvert) return rgbaConvert.exports;
+	hasRequiredRgbaConvert = 1;
+	rgbaConvert.exports     = arr;
+	rgbaConvert.exports.arr = arr;
+	rgbaConvert.exports.obj = obj;
+	rgbaConvert.exports.css = css;
+	rgbaConvert.exports.hex = hex;
+	rgbaConvert.exports.num = num;
+
+	function arr(data) {
+	  var a = parse(data);
+	  if (a.length == 3) {
+	    return a.concat(255)
+	  } else {
+	    a[3] = Math.round(a[3]);
+	    return a
+	  }
+	}
+
+	function obj(data) {
+	  var a = parse(data);
+	  return {
+	    r: a[0],
+	    g: a[1],
+	    b: a[2],
+	    a: a.length == 3
+	      ? 255
+	      : Math.round(a[3])
+	  }
+	}
+
+	function css(data) {
+	  var a = parse(data);
+	  if (a.length == 3) a.push(255);
+
+	  return a[3] == 255
+	    ? 'rgb(' + a[0] + ', ' + a[1] + ', ' + a[2] + ')'
+	    : a[3] == 0
+	      ? 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', 0)'
+	      : 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', ' + String(a[3] / 255).substr(1) + ')'
+	}
+
+	function hex(data) {
+	  var a = parse(data);
+	  if (a.length == 3) a.push(255);
+	  var opaque = a[3] == 255;
+	  var r = num2hex(a[0]);
+	  var g = num2hex(a[1]);
+	  var b = num2hex(a[2]);
+	  var a = num2hex(Math.round(a[3]));
+	  var is = isshort(r, g, b, a);
+	  if (opaque) {
+	    return is
+	      ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0)
+	      : '#' + r + g + b
+	  }
+	  return is
+	    ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0) + a.charAt(0)
+	    : '#' + r + g + b + a
+	}
+
+	function num(data) {
+	  var a = parse(data);
+	  if (a.length == 3) a.push(255);
+	  else a[3] = Math.round(a[3]);
+	  return ((a[3] << 24) >>> 0 | a[0] << 16 | a[1] << 8 | a[2]) >>> 0
+	}
+
+	function parse(data) {
+	  if (typeof data == 'string') {
+	    data = data.toLowerCase();
+	    return name(data)
+	      || hex3(data)
+	      || hex6(data)
+	      || rgb(data)
+	      || rgba(data)
+	      || [0, 0, 0, 255]
+	  }
+	  return object(data)
+	    || array(data)
+	    || number(data)
+	    || [0, 0, 0, 255]
+	}
+
+	function num2hex(num) {
+	  var s = num.toString(16);
+	  return s.length == 1
+	    ? '0' + s
+	    : s
+	}
+
+	function isshort(r, g, b, a) {
+	  var h = ['ff', '00', '11', '22', '33', '44', '55', '66',
+	           '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee'];
+	  return h.indexOf(r) != -1
+	    && h.indexOf(g) != -1
+	    && h.indexOf(b) != -1
+	    && h.indexOf(a) != -1
+	}
+
+	function name(str) {
+	  if (str == 'red')     return [255, 0, 0]
+	  if (str == 'green')   return [0, 255, 0]
+	  if (str == 'blue')    return [0, 0, 255]
+	  if (str == 'black')   return [0, 0, 0]
+	  if (str == 'white')   return [255, 255, 255]
+	  if (str == 'cyan')    return [0, 255, 255]
+	  if (str == 'gray')    return [128, 128, 128]
+	  if (str == 'grey')    return [128, 128, 128]
+	  if (str == 'magenta') return [255, 0, 255]
+	  // ok, not the real css `pink` but my personal `magenta` alias
+	  // `pink` is simpler than `fuchsia`, whatever...
+	  if (str == 'pink')    return [255, 0, 255]
+	  if (str == 'yellow')  return [255, 255, 0]
+	}
+
+	function hex2num(str) {
+	  return str.length == 1
+	    ? parseInt(str + str, 16)
+	    : parseInt(str, 16)
+	}
+
+	function hex3(str) {
+	  var s = str.replace(/^#/,'');
+	  var l = s.length;
+	  if (l == 3 || l == 4) {
+	    var r = hex2num(s[0]);
+	    var g = hex2num(s[1]);
+	    var b = hex2num(s[2]);
+	    var a = l == 3
+	      ? 255
+	      : hex2num(s[3]);
+
+	    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
+
+	    return [r, g, b, a]
+	  }
+	}
+
+	function hex6(str) {
+	  var s = str.replace(/^#/,'');
+	  var l = s.length;
+	  if (l == 6 || l == 8) {
+	    var r = hex2num(s.slice(0, 2));
+	    var g = hex2num(s.slice(2, 4));
+	    var b = hex2num(s.slice(4, 6));
+	    var a = l == 6
+	      ? 255
+	      : hex2num(s.slice(6, 8));
+
+	    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
+
+	    return [r, g, b, a]
+	  }
+	}
+
+	function getnum(val, integer) {
+	  if (typeof val != 'number') return -1
+	  if (integer === true && Math.floor(val) !== val) return -1
+	  return val >= 0 && val <= 255
+	    ? val
+	    : -1
+	}
+
+	function object(obj) {
+	  if (Object.prototype.toString.call(obj) === '[object Object]'
+	    && Object.getPrototypeOf(obj) === Object.getPrototypeOf({})) {
+	    var r = getnum(obj.r != undefined ? obj.r : obj.red   != undefined ? obj.red   : 0,   true);
+	    var g = getnum(obj.g != undefined ? obj.g : obj.green != undefined ? obj.green : 0,   true);
+	    var b = getnum(obj.b != undefined ? obj.b : obj.blue  != undefined ? obj.blue  : 0,   true);
+	    var a = getnum(obj.a != undefined ? obj.a : obj.alpha != undefined ? obj.alpha : 255, true);
+	    if (r != -1 && g != -1 && b != -1 && a != -1) {
+	      return [r, g, b, a]
+	    }
+	  }
+	}
+
+	function array(arr) {
+	  if (Array.isArray(arr) && (arr.length == 3 || arr.length == 4)) {
+	    var r = getnum(arr[0],   true);
+	    var g = getnum(arr[1],   true);
+	    var b = getnum(arr[2],   true);
+	    var a = getnum(arr[3] != undefined ? arr[3] : 255, true);
+	    if (r != -1 && g != -1 && b != -1 && a != -1) {
+	      return [r, g, b, a]
+	    }
+	  }
+	}
+
+	function number(num) {
+	  if (typeof num == 'number' && Math.floor(num) == num && num <= 4294967295 && num >= 0) {
+	    var a = num >> 24 & 255;
+	    var r = num >> 16 & 255;
+	    var g = num >> 8  & 255;
+	    var b = num & 255;
+	    return [r, g, b, a]
+	  }
+	}
+
+	function rgb(str) {
+	  if (str.substr(0, 4) == 'rgb(') {
+	    str = str.match(/^rgb\(([^)]+)\)/)[1];
+	    var t = str.split(/ *, */).map(Number);
+	    var r = getnum(t[0], true);
+	    var g = getnum(t[1], true);
+	    var b = getnum(t[2], true);
+	    if (r != -1 && g != -1 && b != -1) {
+	      return [r, g, b, 255]
+	    }
+	  }
+	}
+
+	function rgba(str) {
+	  if (str.substr(0, 5) == 'rgba(') {
+	    str = str.match(/^rgba\(([^)]+)\)/)[1];
+	    var t = str.split(/ *, */).map(Number);
+	    var r = getnum(t[0], true);
+	    var g = getnum(t[1], true);
+	    var b = getnum(t[2], true);
+	    var a = getnum(t[3] * 255);
+	    if (r != -1 && g != -1 && b != -1 && a != -1) {
+	      return [r, g, b, a]
+	    }
+	  }
+	}
+	return rgbaConvert.exports;
+}
+
+requireRgbaConvert();
+
+var cjs$1 = {};
+
+var hasRequiredCjs$1;
+
+function requireCjs$1 () {
+	if (hasRequiredCjs$1) return cjs$1;
+	hasRequiredCjs$1 = 1;
+	(function (exports) {
+		Object.defineProperty(exports, "__esModule", { value: true });
+		exports.querySelectorAll = void 0;
+		const pushNodes = (set, domNodes) => {
+		    domNodes.forEach((domNode) => {
+		        if (set.has(domNode) === false) {
+		            set.add(domNode);
+		        }
+		    });
+		};
+		const querySelectorAll = (selector, node = document) => {
+		    if (node instanceof Document ||
+		        node instanceof HTMLElement ||
+		        node instanceof ShadowRoot) {
+		        const domNodes = new Set();
+		        pushNodes(domNodes, node.querySelectorAll(selector));
+		        const nodeList = node.querySelectorAll('[class*="hydrated"]');
+		        for (let i = 0; i < nodeList.length; i++) {
+		            const shadowRoot = nodeList[i].shadowRoot;
+		            if (typeof shadowRoot === "object" && shadowRoot !== null) {
+		                pushNodes(domNodes, (0, exports.querySelectorAll)(selector, shadowRoot));
+		            }
+		            else {
+		                pushNodes(domNodes, (0, exports.querySelectorAll)(selector, nodeList[i]));
+		            }
+		        }
+		        return Array.from(domNodes);
+		    }
+		    else {
+		        throw new Error(`The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.`);
+		    }
+		};
+		exports.querySelectorAll = querySelectorAll;
+		
+	} (cjs$1));
+	return cjs$1;
+}
+
+requireCjs$1();
+
+var cjs = {};
+
+var hasRequiredCjs;
+
+function requireCjs () {
+	if (hasRequiredCjs) return cjs;
+	hasRequiredCjs = 1;
+	(function (exports) {
+		Object.defineProperty(exports, "__esModule", { value: true });
+		exports.querySelector = void 0;
+		const querySelector = (selector, node = document) => {
+		    if (node instanceof Document ||
+		        node instanceof HTMLElement ||
+		        node instanceof ShadowRoot) {
+		        let domNode = node.querySelector(selector);
+		        if (domNode === null) {
+		            const nodeList = node.querySelectorAll('[class*="hydrated"]');
+		            for (let i = 0; i < nodeList.length; i++) {
+		                const shadowRoot = nodeList[i].shadowRoot;
+		                if (typeof shadowRoot === "object" && shadowRoot !== null) {
+		                    domNode = (0, exports.querySelector)(selector, shadowRoot);
+		                }
+		                else {
+		                    domNode = (0, exports.querySelector)(selector, nodeList[i]);
+		                }
+		                if (domNode !== null) {
+		                    break;
+		                }
+		            }
+		        }
+		        return domNode;
+		    }
+		    else {
+		        throw new Error(`The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.`);
+		    }
+		};
+		exports.querySelector = querySelector;
+		
+	} (cjs));
+	return cjs;
+}
+
+requireCjs();
+new Event('StateChange');
 
 /*!
  * 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 KolEvent;
+(function (KolEvent) {
+    KolEvent["blur"] = "kolBlur";
+    KolEvent["change"] = "kolChange";
+    KolEvent["changePage"] = "kolChangePage";
+    KolEvent["changePageSize"] = "kolChangePageSize";
+    KolEvent["click"] = "kolClick";
+    KolEvent["close"] = "kolClose";
+    KolEvent["create"] = "kolCreate";
+    KolEvent["focus"] = "kolFocus";
+    KolEvent["input"] = "kolInput";
+    KolEvent["mousedown"] = "kolMousedown";
+    KolEvent["reset"] = "kolReset";
+    KolEvent["select"] = "kolSelect";
+    KolEvent["selectionChange"] = "kolSelectionChange";
+    KolEvent["settingsChange"] = "settingsChange";
+    KolEvent["sort"] = "kolSort";
+    KolEvent["submit"] = "kolSubmit";
+    KolEvent["toggle"] = "kolToggle";
+})(KolEvent || (KolEvent = {}));
 
-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 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  .accordion {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  .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  .accordion__heading {\n    margin: 0;\n  }\n  .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  .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  .accordion__heading-button:focus-within button {\n    outline: 0;\n  }\n  .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  .accordion__heading-button button {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .accordion__heading-button button :focus {\n    outline: none;\n  }\n  .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$2J = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
-
-var css_248z$2I = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
-
-var css_248z$2H = "@layer kol-theme-component {\n  :host {\n    display: inline-block;\n    font-family: var(--font-family);\n  }\n  :host > span {\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  :host > span.smart-button {\n    align-items: center;\n  }\n  :host > span .kol-button-wc:hover > button {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  :host > span .kol-button-wc > 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  :host > span .kol-span-wc {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc > span {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-
-var css_248z$2G = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-subtle);\n  }\n  .kol-link::part(icon) {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  ul li:last-child > span {\n    color: var(--color-subtle);\n  }\n  .kol-link {\n    font-family: var(--font-family);\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$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$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$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$2B = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.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}";
-
-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$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$2y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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}";
-
-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$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$2v = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.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-wc.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-wc {\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}";
-
-var css_248z$2u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert-wc {\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}\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$2t = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert-wc {\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}";
-
-var css_248z$2s = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert-wc {\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}";
-
-var css_248z$2r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert-wc {\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}\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$2q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert-wc {\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}";
-
-var css_248z$2p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert-wc {\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}";
-
-var css_248z$2o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc {\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-wc.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-wc.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-wc.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}";
-
-var css_248z$2n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.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}";
-
-var css_248z$2m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert-wc {\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}";
-
-var css_248z$2l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\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$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$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$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$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$2f = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input .kol-alert-wc {\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}\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$2e = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.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}";
-
-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$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$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  table thead tr:first-child th,\n  table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\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    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  table thead tr:nth-last-child(2) th,\n  table thead tr:nth-last-child(2) td {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\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  tr.foot-spacer,\n  tr.head-spacer {\n    display: inherit;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  tr.foot-spacer td,\n  tr.head-spacer td {\n    border: none;\n    padding: 0;\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$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  table thead tr:first-child th,\n  table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\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    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  table thead tr:nth-last-child(2) th,\n  table thead tr:nth-last-child(2) td {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\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  tr.foot-spacer,\n  tr.head-spacer {\n    display: inherit;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  tr.foot-spacer td,\n  tr.head-spacer td {\n    border: none;\n    padding: 0;\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$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$28 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\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  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .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  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\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-wc.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}";
-
-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  .toast .msg {\n    border-width: 0;\n  }\n  .toast .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  .toast .kol-alert-wc.msg {\n    border-width: 0;\n  }\n  .toast .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .toast .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .toast .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .toast .msg {\n    align-items: start;\n  }\n  .toast .default {\n    border-color: var(--color-subtle);\n  }\n  .toast .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  .toast .error {\n    border-color: var(--color-danger);\n  }\n  .toast .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  .toast .info {\n    border-color: var(--color-primary);\n  }\n  .toast .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  .toast .success {\n    border-color: var(--color-success);\n  }\n  .toast .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  .toast .warning {\n    border-color: var(--color-warning);\n  }\n  .toast .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  .toast .heading-icon {\n    color: var(--color-light);\n  }\n  .toast .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .toast .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .toast .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  .toast .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  .toast .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  .toast .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  .toast .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  .toast .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  .toast .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  .toast .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  .toast .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  .toast .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  .toast .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  .toast .card {\n    border-width: var(--border-width);\n    border-style: solid;\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  .toast .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .toast .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .card > .heading .kol-heading-wc {\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  .toast .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .toast .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  .toast .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  .toast .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  .toast .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  .toast .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  .toast :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .toast .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  .toast .card.error .close {\n    background-color: var(--color-danger);\n  }\n  .toast .card.info .close {\n    background-color: var(--color-primary);\n  }\n  .toast .card.success .close {\n    background-color: var(--color-success);\n  }\n  .toast .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  .toast .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .toast .close > button.hide-label .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  .toast .close > button:active {\n    box-shadow: none;\n    outline: 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}";
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
 
-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,
-});
+var easyBem;
+var hasRequiredEasyBem;
+
+function requireEasyBem () {
+	if (hasRequiredEasyBem) return easyBem;
+	hasRequiredEasyBem = 1;
+
+	/**
+	 * BEM class name factory.
+	 *
+	 * @typedef {Function} Bem
+	 * @param {String|Object} [elementOrMods] Element name or hash object with mods
+	 * @param {Object} [mods] Hash object with mods
+	 * @returns {String}
+	 */
+
+	/**
+	 * Returns BEM class name factory.
+	 *
+	 * @param {String} componentName Block name
+	 * @returns {Bem}
+	 */
+	easyBem = function bem(componentName) {
+	    return function (elementOrMods, mods) {
+	        if (!elementOrMods) {
+	            return componentName;
+	        }
+
+	        var element;
+
+	        if (typeof elementOrMods === 'string') {
+	            element = elementOrMods;
+	        } else {
+	            mods = elementOrMods;
+	        }
+
+	        var base = componentName;
+	        if (element) {
+	            base += '__' + element;
+	        }
+
+	        return base + (
+	            mods
+	                ? Object.keys(mods).reduce(function (result, name) {
+	                    var value = mods[name];
+
+	                    if (value) {
+	                        result += ' ' + (
+	                            typeof value === 'boolean'
+	                                ? (base + '--' + name)
+	                                : (base + '--' + name + '_' + value)
+	                        );
+	                    }
+
+	                    return result;
+	                }, '')
+	                : ''
+	        );
+	    };
+	};
+	return easyBem;
+}
+
+var easyBemExports = requireEasyBem();
+var a = /*@__PURE__*/getDefaultExportFromCjs(easyBemExports);
+
+function c(){const e=new Map,n=(t,o,r)=>{try{return e.get(t)(o,r)}catch{return e.set(t,a(t)).get(t)(o,r)}};return n.forBlock=t=>{const o=(r,s)=>n(t,r,s);return o.forElement=r=>s=>n(t,r,s),o},n}
 
-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}";
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
 
-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  .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  .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  .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  .accordion__heading-button button:focus, .accordion__heading-button button:hover {\n    background-color: var(--color-grey-25);\n  }\n  .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  .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  .accordion__content {\n    padding: var(--spacing-s) var(--spacing-m);\n  }\n}";
+const bem$1 = c();
+bem$1('kol-alert', 'closer');
+bem$1('kol-alert', 'content');
+bem$1('kol-alert', 'icon');
 
-var css_248z$21 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n}";
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
 
-var css_248z$20 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+const bem = c();
+bem('kol-icon');
+bem('kol-icon', 'icon');
 
-var css_248z$1$ = "@layer kol-theme-component {\n  :host > span {\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}";
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
 
-var css_248z$1_ = "@layer kol-theme-component {\n  :host {\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-icon::part(icon separator)::before {\n    color: var(--color-blue);\n  }\n  li:last-child {\n    color: var(--color-grey-75);\n  }\n  .kol-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-link {\n    font-family: var(--font-family);\n  }\n}";
+const KoliBri = new ie('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$1$ = "/* forward the rem function */\n@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, 5px);\n    --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, calc(16 * 1rem / var(--kolibri-root-font-size, 16)));\n    --spacing: var(--kolibri-spacing, calc(4 * 1rem / var(--kolibri-root-font-size, 16)));\n    --border-width: var(--kolibri-border-width, 1px);\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n    --color-danger: var(--kolibri-color-danger, #b4003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  :host {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    cursor: pointer;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-headline {\n    font-weight: 700;\n  }\n  .kol-tooltip__floating {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip__arrow {\n    background-color: var(--color-light);\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip__content {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    color: var(--color-text);\n    background-color: var(--color-mute-variant);\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
+
+var css_248z$1_ = "/* forward the rem function */\n@layer kol-theme-component {\n  abbr {\n    text-decoration: none;\n    border-bottom: dashed var(--color-text) calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+var css_248z$1Z = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-accordion {\n    display: grid;\n    width: 100%;\n    height: 100%;\n  }\n  .kol-accordion:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-accordion__content {\n    margin: 0;\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: 2.25em;\n  }\n  .kol-accordion__heading {\n    margin: 0;\n  }\n  .kol-accordion__heading-button {\n    border-radius: var(--border-radius);\n    display: flex;\n    min-height: calc(35.2 * 1rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n  }\n  .kol-accordion__heading-button:focus-within .kol-button {\n    outline: 0;\n  }\n  .kol-accordion__heading-button .kol-span__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: baseline center;\n    text-align: left;\n    font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    line-height: 1.1;\n  }\n  .kol-accordion__heading-button .kol-button {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-button :focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    color: var(--color-primary);\n  }\n}";
+
+var css_248z$1Y = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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$1X = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-badge {\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    padding: calc(3.2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-right-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n  .kol-badge__smart-button .kol-button:hover {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n  }\n  .kol-badge__smart-button .kol-button__text {\n    padding: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    font-style: normal;\n  }\n  .kol-badge__label {\n    padding: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    font-style: normal;\n  }\n  .kol-badge__label .kol-span__container {\n    display: flex;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\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$1W = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    outline: var(--border-width) solid;\n    border-radius: var(--border-radius);\n    position: relative;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-breadcrumb__list-element-span {\n    color: var(--color-subtle);\n  }\n  .kol-breadcrumb__link::part(icon) {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__icon {\n    color: var(--color-subtle);\n    font-size: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link {\n    line-height: 1;\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$1V = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-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], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    width: unset;\n    padding: calc(12 * 1rem / 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:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n}";
 
-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$1U = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    outline: var(--border-width) solid;\n    border-radius: var(--border-radius);\n    position: relative;\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-button {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-button:focus {\n    outline: none;\n    --text-border-radius: var(--border-radius);\n    --text-outline: calc(var(--border-width) * 2) solid;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    outline: var(--text-outline);\n    border-radius: var(--text-border-radius);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n}";
 
-var css_248z$1V = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1T = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__close-button {\n    color: var(--color-primary);\n    background: transparent;\n    cursor: pointer;\n  }\n  .kol-card__close-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-top-right-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-card__close-button .kol-button:focus, .kol-card__close-button .kol-button:hover {\n    color: var(--color-light);\n    background-color: var(--color-danger);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-top-right-radius: var(--border-radius);\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$1S = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-combobox__input {\n    position: relative;\n    width: calc(100% - 40 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-combobox__input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-subtle);\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$1R = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-details {\n    display: grid;\n    width: 100%;\n    height: 100%;\n  }\n  .kol-details__content.indented-text {\n    width: 100%;\n    margin-left: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(18 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 2px solid var(--color-primary-variant);\n    margin: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4 * 1rem / 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.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    gap: 0;\n    text-align: left;\n  }\n  .kol-details__heading-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-button:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
 
-var css_248z$1S = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    width: 100%;\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}";
+var css_248z$1Q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 4px var(--color-subtle);\n  }\n  .kol-drawer__wrapper--left {\n    animation: slideInLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--left.kol-drawer__wrapper--is-closing {\n    animation: slideOutLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right {\n    animation: slideInRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right.kol-drawer__wrapper--is-closing {\n    animation: slideOutRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top {\n    animation: slideInTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top.kol-drawer__wrapper--is-closing {\n    animation: slideOutTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom {\n    animation: slideInBottom 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom.kol-drawer__wrapper--is-closing {\n    animation: slideOutBottom 0.4s forwards;\n  }\n  .kol-card {\n    border-radius: 0;\n  }\n}\n@keyframes slideInLeft {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInTop {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideInBottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideOutLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n@keyframes slideOutRight {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideOutTop {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n@keyframes slideOutBottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}";
 
-var css_248z$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$1P = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    outline: var(--border-width) solid;\n    border-radius: var(--border-radius);\n    position: relative;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    width: 100%;\n    margin-left: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(18 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 2px solid var(--color-primary-variant);\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$1O = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-headline--h1 {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.667;\n  }\n  .kol-headline--h2 {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .kol-headline--h3 {\n    font-size: calc(18 * 1rem / 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  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3 {\n    font-weight: 700;\n  }\n}";
 
-var css_248z$1P = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc.error {\n    order: 3;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert-wc {\n    grid-column: span 2;\n  }\n  .kol-alert-wc {\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$1N = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --theme-visibility-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.4 * 1rem / 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.4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input {\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    background-color: white;\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    width: 100%;\n    margin: 0;\n    border-width: 2px;\n    order: 1;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    transition: 0.5s;\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    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-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    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary);\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    width: calc(6 * 4 * 1rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(6 * 4 * 1rem / 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    left: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    width: 1.25em;\n    height: 1.25em;\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    background-color: var(--color-subtle);\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: 1.25em;\n    display: block;\n    position: relative;\n    width: 3.5em;\n    min-width: 3.5em;\n    height: 1.5em;\n    border-width: 0;\n  }\n  .kol-checkbox--variant-switch .kol-input:focus {\n    outline-color: var(--color-primary);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n    border-radius: 1.25em;\n  }\n  .kol-checkbox--variant-switch .kol-input:before {\n    background-color: white;\n    border-radius: 1.25em;\n    position: absolute;\n    top: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n    width: 1.25em;\n    height: 1.25em;\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    color: var(--color-primary);\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__input {\n    border-style: solid none solid solid;\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n    height: 100%;\n    border-width: 1px 0 1px 1px;\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n    border-style: solid solid solid none;\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n    display: flex;\n    padding-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px 1px 1px 0;\n    align-self: stretch;\n    justify-self: stretch;\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    color: var(--color-primary);\n    background-color: var(--color-mute);\n    border-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    color: var(--color-light);\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\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    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary-variant);\n  }\n  .kol-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(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / 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(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-input-checkbox__field-control--variant-button:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__input {\n    border-style: solid solid solid none;\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n    border-width: 1px 1px 1px 0;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__label {\n    border-style: solid none solid solid;\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n    border-width: 1px 0 1px 1px;\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(-10 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / 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(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / var(--kolibri-root-font-size, 16)) calc(-10 * 1rem / 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-style: solid;\n    border-radius: var(--border-radius);\n    border-width: 1px;\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$1O = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1M = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}\n.kol-input-color__inputs-wrapper {\n  gap: calc(16 * 1rem / 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  min-height: calc(var(--a11y-min-size) - 8 * 1rem / var(--kolibri-root-font-size, 16));\n  border: 1px solid var(--color-subtle);\n}";
 
-var css_248z$1N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1L = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1M = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1K = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1L = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1J = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}\n.kol-input-container {\n  padding: 0 0 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-theme-component {\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-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], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    width: unset;\n    padding: calc(12 * 1rem / 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:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-input-container {\n    padding: 0 0 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: initial;\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    white-space: nowrap;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: calc(var(--border-radius) - 2px);\n    border-top-left-radius: 0;\n    border-top-right-radius: calc(var(--border-radius) - 2px);\n  }\n  .kol-input {\n    background-color: transparent;\n    padding-top: calc(0.5em + 2 * 1rem / 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    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1I = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1J = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1H = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1I = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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-wc {\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-wc {\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$1G = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-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    display: grid;\n    margin: 0;\n    padding: 0;\n    border: 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(4 * 1rem / 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  }\n  .kol-input-radio__input {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: 50%;\n    border-width: 2px;\n    line-height: 1.5;\n  }\n  .kol-input-radio__input:not(:disabled):hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary);\n  }\n  .kol-input-radio__input:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-radio__input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-input-radio__input:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-input-radio__input: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.4 * 1rem / 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$1H = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1F = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input-range__inputs-wrapper {\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-range__input--number {\n    text-align: right;\n  }\n}";
 
-var css_248z$1G = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1E = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\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$1D = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-link__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-link--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-link--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-link--primary:not([disabled], [aria-disabled=true]):hover, .kol-link--secondary:not([disabled], [aria-disabled=true]):hover, .kol-link--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-link--normal:not([disabled], [aria-disabled=true]):hover, .kol-link--danger:not([disabled], [aria-disabled=true]):hover, .kol-link--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-link--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-link__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-link__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-link--hide-label .kol-link__text {\n    width: unset;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-link:is(:disabled, [aria-disabled=true]):hover .kol-link__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n}";
 
-var css_248z$1E = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$1C = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-modal__card {\n    box-shadow: 0 0 4px var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n}";
 
-var css_248z$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$1B = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    outline: var(--border-width) solid;\n    border-radius: var(--border-radius);\n    position: relative;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-link {\n    line-height: 1;\n  }\n}";
 
-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$1A = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    background-color: var(--color-mute);\n  }\n  .kol-nav {\n    --kol-nav-item-padding-left: 0;\n    --kol-nav-item-padding-right: 16;\n  }\n  .kol-nav__list {\n    list-style: none;\n    --kol-nav-nested-padding-left: calc(var(--kol-nav-item-padding-left) + 8);\n  }\n  .kol-nav__list-item {\n    --kol-nav-item-padding-left: calc(var(--kol-nav-nested-padding-left) + 8);\n  }\n  .kol-nav__list--horizontal {\n    --kol-nav-item-padding-right: 8;\n    gap: 0 calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry--link {\n    display: flex;\n  }\n  .kol-nav__entry .kol-link,\n  .kol-nav__entry .kol-button {\n    color: var(--color-primary);\n    display: flex;\n    min-height: var(--a11y-min-size);\n    padding-right: calc(var(--kol-nav-item-padding-right) * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    text-decoration: none;\n  }\n  .kol-nav__entry .kol-link:focus-visible,\n  .kol-nav__entry .kol-button:focus-visible {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__list--vertical .kol-nav__entry .kol-link,\n  .kol-nav__list--vertical .kol-nav__entry .kol-button {\n    padding-left: calc(var(--kol-nav-item-padding-left) * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 2px solid transparent;\n  }\n  .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n  .kol-nav--vertical .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n    border-left-color: var(--color-primary);\n  }\n  .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n  .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n    font-weight: bold;\n  }\n  .kol-nav__entry .kol-link:hover .kol-span__label,\n  .kol-nav__entry .kol-button:hover .kol-span__label {\n    text-decoration: underline;\n  }\n  .kol-nav__toggle-button .kol-button {\n    margin-bottom: calc(5 * 1rem / var(--kolibri-root-font-size, 16));\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:focus {\n    outline: none;\n  }\n  .kol-nav__toggle-button .kol-button: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__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: var(--border-width);\n    font-weight: 700;\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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text {\n    width: unset;\n    padding: calc(12.8 * 1rem / 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-nav__toggle-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__toggle-button .kol-button:disabled:hover .kol-nav__toggle-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n}";
 
-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$1z = "/* forward the rem function */\n@layer kol-theme-component {\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary-variant);\n  }\n  .kol-pagination .kol-button:active .kol-button__text {\n    color: var(--color-light);\n    outline: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-primary);\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    border: 1px solid var(--color-primary);\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-pagination__button--selected .kol-button {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    color: var(--color-light);\n    background-color: var(--color-primary);\n    border: 0;\n  }\n}";
 
-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$1y = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-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], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    width: unset;\n    padding: calc(12 * 1rem / 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:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n}";
 
-var css_248z$1z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1x = "/* forward the rem function */\n@layer kol-theme-component {\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$1y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1w = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-select {\n    border: none;\n  }\n  .kol-select[multiple] {\n    overflow: auto;\n  }\n  .kol-select__option {\n    border-radius: var(--border-radius);\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n  }\n  .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n  }\n  .kol-select:not([multiple]) .kol-select__option {\n    padding: 0.5em;\n  }\n}";
 
-var css_248z$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$1v = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-single-select__input {\n    position: relative;\n    width: calc(100% - 40 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-single-select__input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-subtle);\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$1u = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-skip-nav .kol-link__text {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-radius: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: 1;\n    cursor: pointer;\n  }\n}";
 
-var css_248z$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$1t = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-split-button {\n    border-color: var(--color-primary);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    border-width: var(--border-width);\n  }\n  .kol-split-button__button .kol-button .kol-span {\n    border-bottom-left-radius: var(--border-radius);\n    border-top-left-radius: var(--border-radius);\n  }\n  .kol-split-button__horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: 2px;\n    width: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button__secondary-button {\n    height: 100%;\n  }\n  .kol-split-button__secondary-button .kol-span {\n    border-bottom-right-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n  .kol-split-button .kol-span {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-split-button .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-split-button .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-split-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text {\n    width: unset;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-split-button .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-split-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-split-button__button .kol-button__text {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n  .kol-split-button__secondary-button .kol-button__text {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n  .kol-split-button .kol-button {\n    height: 100%;\n  }\n  .kol-split-button .kol-button__text {\n    height: 100%;\n    border: none;\n  }\n}";
 
-var css_248z$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$1s = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-table-settings {\n    top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    width: unset;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    display: flex;\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    border-top: var(--border-width) solid var(--color-mute-variant);\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary-variant);\n  }\n  .kol-pagination .kol-button:active .kol-button__text {\n    color: var(--color-light);\n    outline: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-primary);\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    border: 1px solid var(--color-primary);\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-pagination__button--selected .kol-button {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    color: var(--color-light);\n    background-color: var(--color-primary);\n    border: 0;\n  }\n  :host {\n    display: flex;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0.075rem;\n  }\n  .kol-table__head {\n    position: sticky;\n    top: 0;\n  }\n  .kol-table__caption {\n    min-height: calc(var(--a11y-min-size) + 2px);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__scroll-container {\n    max-height: 80vh;\n    overflow: auto;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    border-color: var(--color-primary);\n    border-style: solid;\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__cell--header {\n    color: var(--color-light);\n    background-color: var(--color-primary);\n    font-weight: normal;\n  }\n  .kol-table__cell--header .kol-button:focus {\n    outline-color: var(--color-mute-variant);\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(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    --kol-selection-input-main-color: var(--color-primary);\n    --kol-selection-input-off-color: var(--color-subtle);\n    --kol-selection-input-focus-color: var(--color-primary-variant);\n    --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n    --kol-selection-input-icon-color: var(--color-light);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n    border-color: var(--kol-selection-input-main-color);\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--kol-selection-input-focus-color);\n    outline-style: solid;\n    outline-width: 3px;\n    border-color: var(--kol-selection-input-main-color);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--kol-selection-input-off-color);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--kol-selection-input-main-color);\n    border-color: var(--kol-selection-input-main-color);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--kol-selection-input-off-color);\n    display: flex;\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--kol-selection-input-main-color);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--kol-selection-input-main-color);\n  }\n  .kol-table__selection-icon {\n    color: var(--kol-selection-input-icon-color);\n  }\n  .kol-table__head-row .kol-table__selection {\n    --kol-selection-input-main-color: var(--color-light);\n    --kol-selection-input-off-color: var(--color-mute);\n    --kol-selection-input-focus-color: var(--color-mute-variant);\n    --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n    --kol-selection-input-icon-color: var(--color-primary);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
 
-var css_248z$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$1r = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-table-settings {\n    top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-table-settings__content .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    width: unset;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    display: flex;\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    border-top: var(--border-width) solid var(--color-mute-variant);\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--color-primary-variant);\n  }\n  .kol-pagination .kol-button:active .kol-button__text {\n    color: var(--color-light);\n    outline: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-primary);\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    border: 1px solid var(--color-primary);\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-pagination__button--selected .kol-button {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    color: var(--color-light);\n    background-color: var(--color-primary);\n    border: 0;\n  }\n  :host {\n    display: flex;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0.075rem;\n  }\n  .kol-table__head {\n    position: sticky;\n    top: 0;\n  }\n  .kol-table__caption {\n    min-height: calc(var(--a11y-min-size) + 2px);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__scroll-container {\n    max-height: 80vh;\n    overflow: auto;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-width: 3px;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__focus-element {\n    outline: none;\n  }\n  .kol-table__cell {\n    border-color: var(--color-primary);\n    border-style: solid;\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__cell--header {\n    color: var(--color-light);\n    background-color: var(--color-primary);\n    font-weight: normal;\n  }\n  .kol-table__cell--header .kol-button:focus {\n    outline-color: var(--color-mute-variant);\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(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    --kol-selection-input-main-color: var(--color-primary);\n    --kol-selection-input-off-color: var(--color-subtle);\n    --kol-selection-input-focus-color: var(--color-primary-variant);\n    --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n    --kol-selection-input-icon-color: var(--color-light);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n    border-color: var(--kol-selection-input-main-color);\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--kol-selection-input-focus-color);\n    outline-style: solid;\n    outline-width: 3px;\n    border-color: var(--kol-selection-input-main-color);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--kol-selection-input-off-color);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--kol-selection-input-main-color);\n    border-color: var(--kol-selection-input-main-color);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--kol-selection-input-off-color);\n    display: flex;\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--kol-selection-input-main-color);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--kol-selection-input-main-color);\n  }\n  .kol-table__selection-icon {\n    color: var(--kol-selection-input-icon-color);\n  }\n  .kol-table__head-row .kol-table__selection {\n    --kol-selection-input-main-color: var(--color-light);\n    --kol-selection-input-off-color: var(--color-mute);\n    --kol-selection-input-focus-color: var(--color-mute-variant);\n    --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n    --kol-selection-input-icon-color: var(--color-primary);\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$1q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-tabs {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-display: grid;\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: flex;\n    --grid-template-rows: 1fr auto;\n    --button-group-gap: calc(32 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: var(--display);\n    gap: var(--button-group-gap);\n    order: var(--button-group-order);\n    flex-wrap: wrap;\n  }\n  .kol-tabs .kol-button {\n    color: var(--color-subtle);\n    background-color: transparent;\n    border-radius: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    line-height: 1.2;\n    border: none;\n    font-style: normal;\n  }\n  .kol-tabs .kol-button:hover {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n    padding-bottom: 0.25em;\n  }\n  .kol-tabs .kol-button.selected .kol-span__container {\n    border-bottom: 0.25em solid;\n  }\n  .kol-tabs .kol-button .kol-span__container {\n    gap: calc(8 * 1rem / 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$1r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1p = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}\n@layer kol-theme-component {\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    display: block;\n    overflow: auto;\n    border: none;\n  }\n  .kol-textarea::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-textarea::placeholder {\n    color: var(--color-subtle);\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    font-family: var(--font-family);\n  }\n  .toast div {\n    background-color: var(--color-white);\n  }\n  .toast div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast div.msg {\n    border: none;\n  }\n  .toast .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .toast .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  .toast .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  }\n  .toast .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .default {\n    border-color: var(--color-grey);\n  }\n  .toast .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  .toast .error {\n    border-color: var(--color-red);\n  }\n  .toast .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  .toast .info {\n    border-color: var(--color-blue);\n  }\n  .toast .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  .toast .success {\n    border-color: var(--color-green);\n  }\n  .toast .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  .toast .warning {\n    border-color: var(--color-orange);\n  }\n  .toast .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .alert {\n    display: block;\n  }\n}";
+var css_248z$1o = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / 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(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item {\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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$1n = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-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], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    width: unset;\n    padding: calc(12 * 1rem / 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:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-link__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-link--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-link--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-link--primary:not([disabled], [aria-disabled=true]):hover, .kol-link--secondary:not([disabled], [aria-disabled=true]):hover, .kol-link--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-link--normal:not([disabled], [aria-disabled=true]):hover, .kol-link--danger:not([disabled], [aria-disabled=true]):hover, .kol-link--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-link--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-link__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-link__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-link--hide-label .kol-link__text {\n    width: unset;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-link:is(:disabled, [aria-disabled=true]):hover .kol-link__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-toolbar {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n  }\n  .kol-link__text,\n  .kol-button__text {\n    border-radius: 0;\n  }\n  .kol-toolbar--orientation-horizontal .kol-link__text,\n  .kol-toolbar--orientation-horizontal .kol-button__text {\n    border-right: 0;\n  }\n  .kol-toolbar--orientation-vertical .kol-link__text,\n  .kol-toolbar--orientation-vertical .kol-button__text {\n    border-bottom: 0;\n  }\n  .kol-toolbar--orientation-vertical .kol-toolbar__item:first-child .kol-link__text,\n  .kol-toolbar--orientation-vertical .kol-toolbar__item:first-child .kol-button__text {\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n  }\n  .kol-toolbar--orientation-horizontal .kol-toolbar__item:first-child .kol-link__text,\n  .kol-toolbar--orientation-horizontal .kol-toolbar__item:first-child .kol-button__text {\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n  .kol-toolbar--orientation-vertical .kol-toolbar__item:last-child .kol-link__text,\n  .kol-toolbar--orientation-vertical .kol-toolbar__item:last-child .kol-button__text {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n    border-bottom: var(--border-width) solid var(--text-border-color);\n  }\n  .kol-toolbar--orientation-horizontal .kol-toolbar__item:last-child .kol-link__text,\n  .kol-toolbar--orientation-horizontal .kol-toolbar__item:last-child .kol-button__text {\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n    border-right: var(--border-width) solid var(--text-border-color);\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$1m = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-tree-item {\n    --tree-item-indentation: calc(20 * 1rem / 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    background-color: var(--color-primary-variant);\n    border: 1px solid var(--color-primary);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    color: var(--color-light);\n    outline-offset: 0;\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$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$1l = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    border-radius: var(--border-radius);\n    border: 2px solid transparent;\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 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,
+const DEFAULT = KoliBri.createTheme('default', {
+    GLOBAL: css_248z$1$,
+    'KOL-ABBR': css_248z$1_,
+    'KOL-ACCORDION': css_248z$1Z,
+    'KOL-ALERT': css_248z$1Y,
+    'KOL-BADGE': css_248z$1X,
+    'KOL-BREADCRUMB': css_248z$1W,
+    'KOL-BUTTON': css_248z$1V,
+    'KOL-BUTTON-LINK': css_248z$1U,
+    'KOL-CARD': css_248z$1T,
+    'KOL-COMBOBOX': css_248z$1S,
+    'KOL-DETAILS': css_248z$1R,
+    'KOL-DRAWER': css_248z$1Q,
+    'KOL-FORM': css_248z$1P,
+    'KOL-HEADING': css_248z$1O,
+    'KOL-INPUT-CHECKBOX': css_248z$1N,
+    'KOL-INPUT-COLOR': css_248z$1M,
+    'KOL-INPUT-DATE': css_248z$1L,
+    'KOL-INPUT-EMAIL': css_248z$1K,
+    'KOL-INPUT-FILE': css_248z$1J,
+    'KOL-INPUT-NUMBER': css_248z$1I,
+    'KOL-INPUT-PASSWORD': css_248z$1H,
+    'KOL-INPUT-RADIO': css_248z$1G,
+    'KOL-INPUT-RANGE': css_248z$1F,
+    'KOL-INPUT-TEXT': css_248z$1E,
+    'KOL-LINK': css_248z$1B,
+    'KOL-LINK-BUTTON': css_248z$1D,
+    'KOL-MODAL': css_248z$1C,
+    'KOL-NAV': css_248z$1A,
+    'KOL-PAGINATION': css_248z$1z,
+    'KOL-POPOVER-BUTTON': css_248z$1y,
+    'KOL-PROGRESS': css_248z$1x,
+    'KOL-SELECT': css_248z$1w,
+    'KOL-SINGLE-SELECT': css_248z$1v,
+    'KOL-SKIP-NAV': css_248z$1u,
+    'KOL-SPLIT-BUTTON': css_248z$1t,
+    'KOL-TABLE-STATEFUL': css_248z$1s,
+    'KOL-TABLE-STATELESS': css_248z$1r,
+    'KOL-TABS': css_248z$1q,
+    'KOL-TEXTAREA': css_248z$1p,
+    'KOL-TOAST-CONTAINER': css_248z$1o,
+    'KOL-TOOLBAR': css_248z$1n,
+    'KOL-TREE': css_248z$1l,
+    'KOL-TREE-ITEM': css_248z$1m,
 });
 
-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$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  .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  .accordion__heading {\n    font-size: 2em;\n  }\n  .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  .accordion__heading-button button .button-inner > span {\n    align-items: baseline;\n  }\n  .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  .accordion__heading-button .kol-icon {\n    margin-right: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .accordion__heading-button .kol-icon::part(icon)::before {\n    color: #0e47cb;\n    font-weight: 900;\n    font-family: \"Font Awesome 6 Free\";\n  }\n  .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 .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 .accordion__heading-button .kol-icon::part(icon)::before {\n    content: \"\\f077\";\n  }\n  :not(.open) .accordion__heading-button button .kol-icon::part(icon)::before {\n    content: \"\\f078\";\n  }\n}";
+var css_248z$1k = "/* forward the rem function */\n@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    border-radius: 2px;\n    padding: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #004494;\n    --color-yellow: #ffd617;\n    --color-grey: #404040;\n    --color-blue-130: #002f67;\n    --color-blue-120: #003776;\n    --color-blue-110: #003d84;\n    --color-blue-100: var(--color-blue);\n    --color-blue-75: #4073af;\n    --color-blue-50: #bfd0e4;\n    --color-blue-25: #bfd0e4;\n    --color-blue-5: #f2f5f9;\n    --color-yellow-120: #f8ae21;\n    --color-yellow-110: #fbc11d;\n    --color-yellow-100: var(--color-yellow);\n    --color-yellow-75: #ffde39;\n    --color-yellow-50: #ffe879;\n    --color-yellow-25: #fff4bb;\n    --color-grey-100: var(--color-grey);\n    --color-grey-75: #707070;\n    --color-grey-50: #9f9f9f;\n    --color-grey-25: #cfcfcf;\n    --color-grey-20: #d9d9d9;\n    --color-grey-15: #e3e3e3;\n    --color-grey-10: #ebebeb;\n    --color-grey-5: #f5f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-blue-n: #006fb4;\n    --color-orange: #f29527;\n    --color-green: #467a39;\n    --color-red: #da2131;\n    --color-red-1xx: #981722;\n    --color-black: #000;\n    --color-white: #fff;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    --font-weight: 400;\n    --font-weight-bold: 600;\n    --line-height-regular: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n  }\n  a,\n  button {\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$1k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n}";
+var css_248z$1j = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-accordion {\n    background-color: var(--color-grey-5);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n  }\n  .kol-accordion:focus-within {\n    outline: 2px solid var(--color-blue);\n    outline-offset: -2px;\n  }\n  .kol-accordion__heading-button .kol-button {\n    display: flex;\n    width: 100%;\n    padding: 0 var(--spacing-m);\n    place-items: center;\n    line-height: 1.2;\n    text-align: left;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    color: var(--color-grey);\n    width: 100%;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n    font-weight: var(--font-weight-bold);\n    border: none;\n  }\n  .kol-accordion__heading-button .kol-button:focus, .kol-accordion__heading-button .kol-button:hover {\n    background-color: var(--color-grey-25);\n  }\n  .kol-accordion__heading-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-top: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-bottom: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-inline-end: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: 0;\n  }\n  .kol-accordion__content {\n    padding: var(--spacing-s) var(--spacing-m);\n  }\n}";
 
-var css_248z$1j = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$1i = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$1i = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > span {\n    font: normal normal var(--font-weight) calc(14rem / var(--kolibri-root-font-size, 16))/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$1h = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-badge {\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16) - 1 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 1 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal var(--font-weight) 1em var(--font-family);\n    text-transform: uppercase;\n  }\n}";
 
-var css_248z$1h = "@layer kol-theme-component {\n  :host,\n  .kol-link {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$1g = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-blue);\n    line-height: 1.2;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-breadcrumb {\n    font: normal normal 400 calc(14 * 1rem / var(--kolibri-root-font-size, 16))/calc(16 * 1rem / 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    padding: 0;\n    margin-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list-element:last-child {\n    color: var(--color-grey-75);\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$1f = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: 0;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    line-height: 1.2;\n  }\n  .kol-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$1f = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    gap: var(--spacing-2xs);\n  }\n}";
+var css_248z$1e = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    color: var(--color-blue);\n    line-height: 1.2;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\n  }\n  .badge-text-hint {\n    color: var(--color-text);\n    background-color: var(--color-mute-variant);\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$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$1d = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75em;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  }\n}";
 
-var css_248z$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$1c = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-blue);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    align-items: center;\n    text-align: left;\n  }\n  .kol-combobox__input {\n    position: relative;\n    width: calc(100% - 24 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-combobox__input::-moz-placeholder {\n    color: var(--color-grey-50);\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    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$1b = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    gap: 0;\n    text-align: left;\n  }\n  .kol-details__content.indented-text {\n    margin: 0;\n    padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: 0;\n    border-inline-start: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n    border-start-start-radius: 0;\n    padding-inline-start: calc(24 * 1rem / 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$1a = "@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    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}";
+var css_248z$19 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-blue);\n    line-height: 1.2;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    margin: 0;\n    padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: 0;\n    border-inline-start: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n    border-start-start-radius: 0;\n    padding-inline-start: calc(24 * 1rem / 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$18 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-headline--h1 {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n  }\n  .kol-headline--h2 {\n    font-size: calc(28 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.143;\n  }\n  .kol-headline--h3 {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.1667;\n  }\n  .kol-headline--h4 {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .kol-headline--h5 {\n    font-size: calc(16 * 1rem / 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$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$17 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-field-control--label-align-left .kol-field-control__label {\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right .kol-field-control__label {\n    padding-left: calc(8 * 1rem / 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    color: var(--color-grey);\n    background-color: var(--color-white);\n    border-color: var(--color-grey-75);\n    border-style: solid;\n    border-width: 2px;\n    line-height: 1.5;\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 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    width: unset;\n    min-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    color: #000;\n    background-color: var(--color-white);\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    color: var(--color-white);\n    background-color: var(--color-red);\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    color: #000;\n    background-color: var(--color-white);\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$16 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\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(16 * 1rem / 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  min-height: calc(var(--a11y-min-size) - 8 * 1rem / var(--kolibri-root-font-size, 16));\n  border: 1px solid var(--color-blue);\n}";
 
-var css_248z$16 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc.error {\n    order: 3;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert-wc {\n    grid-column: span 2;\n  }\n  .kol-alert-wc {\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$15 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\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    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\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    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\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    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: 0;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    line-height: 1.2;\n  }\n  .kol-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(8 * 1rem / 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    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$12 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\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    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\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    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    border: 0;\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    padding: 0 calc(14 * 1rem / var(--kolibri-root-font-size, 16)) calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    border: 0;\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.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-field-control {\n    gap: calc(8 * 1rem / 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$10 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$$ = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 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$$ = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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-wc {\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-wc {\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$_ = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\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    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$Z = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-blue);\n    text-decoration: underline;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$Z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$Y = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-blue);\n    line-height: 1.2;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$Y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$X = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75em;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  }\n}\n@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$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$W = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    height: 100%;\n    margin: auto;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-nav__toggle-button .kol-button {\n    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-nav__toggle-button .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-nav__toggle-button .kol-button--ghost:hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    color: var(--text-color) !important;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: 0;\n    min-width: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    line-height: 1.2;\n    text-decoration: none !important;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:focus .kol-nav__toggle-button .kol-button__text {\n    outline-offset: -2px;\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    color: var(--color-white);\n    border-color: transparent;\n    border-style: solid;\n    height: 100%;\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    justify-items: start;\n    font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
 
-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$V = "/* forward the rem function */\n@layer kol-theme-component {\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination {\n    display: grid;\n  }\n  .kol-pagination .kol-button {\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    font-weight: var(--font-weight-bold);\n    border: 2px solid var(--color-yellow);\n  }\n  .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination__button--selected .kol-button:not(:disabled) {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    text-decoration: underline;\n  }\n}";
 
-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$U = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: 0;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    line-height: 1.2;\n  }\n  .kol-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$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$T = "/* forward the rem function */\n@layer kol-theme-component {\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$T = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$S = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$S = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-blue);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    text-align: left;\n  }\n  .kol-single-select__input {\n    position: relative;\n    width: calc(100% - 40 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-single-select__input::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-single-select__input:not(.disabled) .kol-single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-single-select__input:focus {\n    border: none;\n  }\n}";
 
-var css_248z$R = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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$Q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-skip-nav .kol-link__text {\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    border-style: solid;\n    border-radius: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    font-weight: var(--font-weight-bold);\n    line-height: 1;\n    cursor: pointer;\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$P = "/* forward the rem function */\n@layer kol-theme-component {\n  .cycle {\n    padding: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .cycle span {\n    background-color: var(--color-blue-75);\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$O = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-split-button {\n    border-color: var(--color-blue);\n    border-style: solid;\n    border-radius: 0;\n    border-width: 2px;\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button .kol-span {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: 0.25em 0.75em;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-split-button__horizontal-line {\n    border: 0;\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-split-button .kol-button {\n    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-split-button .kol-button:focus {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--primary:not(:disabled):hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-split-button .kol-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--ghost:not(:disabled):hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: 0;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    line-height: 1.2;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button--secondary:focus .kol-split-button .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-split-button .kol-button--ghost:focus .kol-split-button .kol-button__text {\n    outline-offset: -2px;\n  }\n}";
 
-var css_248z$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$N = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination {\n    display: grid;\n  }\n  .kol-pagination .kol-button {\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    font-weight: var(--font-weight-bold);\n    border: 2px solid var(--color-yellow);\n  }\n  .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination__button--selected .kol-button:not(:disabled) {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    text-decoration: underline;\n  }\n  :host {\n    display: flex;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    display: block;\n  }\n  .kol-table__scroll-container {\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    grid-auto-flow: column;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n      display: flex;\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\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$M = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination {\n    display: grid;\n  }\n  .kol-pagination .kol-button {\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-pagination .kol-button__text {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    font-weight: var(--font-weight-bold);\n    border: 2px solid var(--color-yellow);\n  }\n  .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-pagination .kol-button:focus .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination__button--selected .kol-button:not(:disabled) {\n    opacity: 1;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    text-decoration: underline;\n  }\n  :host {\n    display: flex;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    display: block;\n  }\n  .kol-table__scroll-container {\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n}";
 
-var css_248z$M = "@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$L = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    margin-bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n    border-bottom: 1px solid var(--color-grey-25);\n  }\n  .kol-tabs .kol-button {\n    margin-bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n    color: var(--color-blue-130);\n  }\n  .kol-tabs .kol-button:focus .kol-span {\n    outline: var(--color-blue-130) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button.selected .kol-span {\n    color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-top-color: var(--color-blue);\n    border-bottom-color: white;\n    border-width: 1px;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-tabs .kol-button .kol-span {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$L = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    --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$K = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$K = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host div {\n    background-color: var(--color-white);\n  }\n  :host div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .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  }\n  :host .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\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-wc {\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n  }\n  .kol-toast-item {\n    background-color: #fff;\n    display: block;\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\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(8 * 1rem / 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(32 * 1rem / 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    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__icon {\n    font-size: calc(32 * 1rem / 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(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\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    font-family: var(--font-family);\n  }\n  .toast div {\n    background-color: var(--color-white);\n  }\n  .toast div.card {\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast div.msg {\n    border: none;\n  }\n  .toast .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .toast .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  .toast .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  }\n  .toast .card .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .card .content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .card .heading .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast .default {\n    border-color: var(--color-grey);\n  }\n  .toast .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  .toast .error {\n    border-color: var(--color-red);\n  }\n  .toast .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  .toast .info {\n    border-color: var(--color-blue);\n  }\n  .toast .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  .toast .success {\n    border-color: var(--color-green);\n  }\n  .toast .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  .toast .warning {\n    border-color: var(--color-orange);\n  }\n  .toast .warning .heading .kol-icon {\n    color: var(--color-orange);\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$I = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: 0;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    line-height: 1.2;\n  }\n  .kol-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    outline: none;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-link:focus {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-style: solid;\n    border-radius: 0;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    line-height: 1.2;\n  }\n  .kol-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    background-color: var(--color-grey-5);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    padding: var(--spacing-s);\n    border-width: 1px;\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$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$H = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    display: flex;\n    flex-direction: column;\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$G = "/* forward the rem function */\n@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    background-color: var(--color-yellow);\n    font-weight: 700;\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}";
 
-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}";
-
-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,
+const ECL_EC = KoliBri.createTheme('ecl-ec', {
+    GLOBAL: css_248z$1k,
+    'KOL-ACCORDION': css_248z$1j,
+    'KOL-ALERT': css_248z$1i,
+    'KOL-BADGE': css_248z$1h,
+    'KOL-BREADCRUMB': css_248z$1g,
+    'KOL-BUTTON': css_248z$1f,
+    'KOL-BUTTON-LINK': css_248z$1e,
     '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-DETAILS': css_248z$1b,
+    'KOL-DRAWER': css_248z$1a,
+    'KOL-FORM': css_248z$19,
+    'KOL-HEADING': css_248z$18,
+    'KOL-INPUT-CHECKBOX': css_248z$17,
+    'KOL-INPUT-COLOR': css_248z$16,
+    'KOL-INPUT-DATE': css_248z$15,
+    'KOL-INPUT-EMAIL': css_248z$14,
+    'KOL-INPUT-FILE': css_248z$13,
+    'KOL-INPUT-NUMBER': css_248z$12,
+    'KOL-INPUT-PASSWORD': css_248z$11,
+    'KOL-INPUT-RADIO': css_248z$10,
+    'KOL-INPUT-RANGE': css_248z$$,
+    'KOL-INPUT-TEXT': css_248z$_,
+    'KOL-LINK': css_248z$Y,
+    'KOL-LINK-BUTTON': css_248z$Z,
+    'KOL-MODAL': css_248z$X,
+    'KOL-NAV': css_248z$W,
+    'KOL-PAGINATION': css_248z$V,
+    'KOL-POPOVER-BUTTON': css_248z$U,
+    'KOL-PROGRESS': css_248z$T,
     'KOL-SELECT': css_248z$S,
     'KOL-SINGLE-SELECT': css_248z$R,
-    'KOL-TEXTAREA': css_248z$K,
+    'KOL-SKIP-NAV': css_248z$Q,
+    'KOL-SPIN': css_248z$P,
+    'KOL-SPLIT-BUTTON': css_248z$O,
     '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-TEXTAREA': css_248z$K,
     '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$F = "/* forward the rem function */\n@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    border-radius: 2px;\n    padding: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #0e47cb;\n    --color-blue-140: #082b7a;\n    --color-blue-130: #082b7a;\n    --color-blue-120: #0b39a2;\n    --color-blue-110: #0d40b7;\n    --color-blue-100: #0e47cb;\n    --color-blue-80: #3e6cd5;\n    --color-blue-60: #6e91e0;\n    --color-blue-40: #9fb5ea;\n    --color-blue-20: #cfdaf5;\n    --color-blue-10: #e7edfa;\n    --color-blue-5: #f3f6fc;\n    --color-yellow: #ffcc00;\n    --color-yellow-140: #997a00;\n    --color-yellow-130: #b38f00;\n    --color-yellow-120: #cca300;\n    --color-yellow-110: #e6b800;\n    --color-yellow-100: #ffcc00;\n    --color-yellow-80: #ffd633;\n    --color-yellow-60: #ffe066;\n    --color-yellow-40: #ffeb99;\n    --color-yellow-20: #fff5cc;\n    --color-yellow-10: #fffae6;\n    --color-yellow-5: #fffcf2;\n    --color-grey: #262b38;\n    --color-grey-140: #171a22;\n    --color-grey-130: #1b1e27;\n    --color-grey-120: #1e222d;\n    --color-grey-110: #222732;\n    --color-grey-100: #262b38;\n    --color-grey-80: #515560;\n    --color-grey-75: #515560;\n    --color-grey-60: #7d8088;\n    --color-grey-40: #a8aaaf;\n    --color-grey-20: #d4d5d7;\n    --color-grey-10: #e9eaeb;\n    --color-grey-5: #f4f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-orange: #ff6200;\n    --color-orange-140: #993b00;\n    --color-orange-130: #b34500;\n    --color-orange-120: #cc4e00;\n    --color-orange-110: #e65800;\n    --color-orange-100: #e65800;\n    --color-orange-80: #ff8133;\n    --color-orange-60: #ff914d;\n    --color-orange-40: #ffb180;\n    --color-orange-20: #ffd0b3;\n    --color-orange-10: #ffefe6;\n    --color-orange-5: #fff7f2;\n    --color-green: #00c991;\n    --color-green-140: #007957;\n    --color-green-130: #008d66;\n    --color-green-120: #008d66;\n    --color-green-110: #00b583;\n    --color-green-100: #00c991;\n    --color-green-80: #00c991;\n    --color-green-60: #66dfbd;\n    --color-green-40: #99e9d3;\n    --color-green-20: #ccf4e9;\n    --color-green-10: #e6faf4;\n    --color-green-5: #f2fcf9;\n    --color-red: #ef0044;\n    --color-red-140: #8f0029;\n    --color-red-130: #a70030;\n    --color-red-120: #bf0036;\n    --color-red-110: #d7003d;\n    --color-red-100: #ef0044;\n    --color-red-80: #f23369;\n    --color-red-60: #f5668f;\n    --color-red-40: #f999b4;\n    --color-red-20: #fcccda;\n    --color-red-10: #fde6ec;\n    --color-red-5: #fef2f5;\n    --color-accent-blue-100: #00e9ff;\n    --color-accent-blue-30: #b3f8ff;\n    --color-purple: #510dcd;\n    --color-purple-140: #31087b;\n    --color-purple-130: #390990;\n    --color-purple-120: #410aa4;\n    --color-purple-110: #490cb9;\n    --color-purple-100: #510dcd;\n    --color-purple-80: #743dd7;\n    --color-purple-60: #976ee1;\n    --color-purple-40: #bf9af1;\n    --color-purple-20: #dccff5;\n    --color-purple-10: #eee7fa;\n    --color-purple-5: #eee7fa;\n    --color-white: #fff;\n    --color-black: #000;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16 * 1rem / 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(64 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n  }\n  a,\n  button {\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  p.l,\n  p.lead {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  p,\n  p.m,\n  p.medium {\n    line-height: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  p.s,\n  p.small {\n    font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  p.xs,\n  p.extra-small {\n    font-size: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$E = "@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  .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  .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  .accordion__heading-button button {\n    font-size: inherit;\n    line-height: 1.75;\n  }\n  .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  .accordion__heading-button .kol-icon::part(icon) {\n    color: var(--color-midnight);\n  }\n  .accordion__heading-button .kol-icon::part(close)::before {\n    font-family: \"Font Awesome 6 Free\";\n    content: \"\\f077\";\n  }\n  .accordion__heading-button .kol-icon::part(open)::before {\n    font-family: \"Font Awesome 6 Free\";\n    content: \"\\f078\";\n  }\n  .accordion__heading {\n    margin: 0;\n  }\n  .accordion__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .open .accordion__heading-button button {\n    padding-bottom: 0;\n  }\n  .open .accordion__heading-button .kol-icon {\n    width: 1em;\n  }\n  .open .accordion__content {\n    margin: 0;\n  }\n}";
+var css_248z$E = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-accordion {\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-radius: 8px;\n    margin: 0;\n  }\n  .kol-accordion:focus-within {\n    outline: 2px solid var(--color-blue);\n    outline-offset: -1px;\n  }\n  .kol-accordion__heading {\n    font-size: 2em;\n  }\n  .kol-accordion__heading-button .kol-button {\n    color: #171a22;\n    border-radius: 8px;\n    border-bottom-color: #cfdaf5;\n    display: block;\n    position: relative;\n    width: 100%;\n    padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(18 * 1rem / var(--kolibri-root-font-size, 16))/calc(28 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    line-height: 1.2;\n    border: 0;\n    border-bottom-style: solid;\n    outline-offset: -1px;\n    text-align: start;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    align-items: baseline;\n  }\n  .kol-accordion__heading-button .kol-button::before {\n    background-color: #fc0;\n    position: absolute;\n    top: 0;\n    left: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    content: \"\";\n    border-end-end-radius: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-right: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    color: #0e47cb;\n    font-family: \"Font Awesome 6 Free\";\n    font-weight: 900;\n  }\n  .kol-accordion__content {\n    color: #515560;\n    padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(24 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    border-inline-start: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-bottom: 2px solid #cfdaf5;\n    -webkit-border-start: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    margin-inline-start: 0;\n    -webkit-margin-start: 0;\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-button {\n    border-start-end-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-start-start-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    content: \"\\f077\";\n  }\n  :not(.collapsible--open) .kol-accordion__heading-button .kol-button .kol-icon::part(icon)::before {\n    content: \"\\f078\";\n  }\n}";
 
-var css_248z$D = "@layer kol-theme-component {\n  .default {\n    border-color: var(--color-anthrazit);\n  }\n  .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  .error {\n    border-color: var(--color-rotton);\n  }\n  .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  .info {\n    border-color: var(--color-petrol);\n  }\n  .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  .success {\n    border-color: var(--color-gras);\n  }\n  .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  .warning {\n    border-color: var(--color-warn);\n  }\n  .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n}";
+var css_248z$D = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$C = "@layer kol-theme-component {\n  :host {\n    display: inline-block;\n    font-family: inherit;\n  }\n  :host > span {\n    border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n  }\n  :host > span .kol-button-wc {\n    border-left: calc(1rem / var(--kolibri-root-font-size, 16)) solid rgba(0, 0, 0, 0.25);\n  }\n  :host > span .kol-span-wc {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc > span {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host button {\n    border-radius: 0 var(--spacing) var(--spacing) 0;\n  }\n}";
+var css_248z$C = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-badge {\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16) - 1 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 1 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal var(--font-weight) calc(14 * 1rem / var(--kolibri-root-font-size, 16))/1em var(--font-family);\n    text-transform: uppercase;\n  }\n}";
 
-var css_248z$B = "@layer kol-theme-component {\n  li > span {\n    font-weight: bold;\n    /* text-transform: uppercase; */\n  }\n}";
+var css_248z$B = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-blue);\n    line-height: 1.2;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\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$A = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n  }\n  .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-button--secondary .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / 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(4 * 1rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\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$z = "@layer kol-theme-component {\n  .kol-button {\n    color: var(--color-blue);\n    line-height: 1.2;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\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$y = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  }\n}";
 
-var css_248z$x = "@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$x = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    text-align: left;\n  }\n  .kol-combobox__input {\n    position: relative;\n    width: calc(100% - 24 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-combobox__input::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-combobox__input:focus {\n    border: none;\n  }\n}";
 
-var css_248z$w = "@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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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$w = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    gap: 0;\n    text-align: left;\n  }\n  .kol-details__content.indented-text {\n    display: inline-block;\n    padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    border-inline-start: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-border-start: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-start-start-radius: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    -webkit-padding-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\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$v = "@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$u = "@layer kol-theme-component {\n  :host .drawer__wrapper {\n    box-shadow: 0 0 0.25em gray;\n  }\n}";
+var css_248z$u = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-blue);\n    line-height: 1.2;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    display: inline-block;\n    padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    border-inline-start: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-border-start: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-start-start-radius: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    -webkit-padding-start: calc(24 * 1rem / 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$t = "@layer kol-theme-component {\n  --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  .default {\n    border-color: var(--color-anthrazit);\n  }\n  .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  .error {\n    border-color: var(--color-rotton);\n  }\n  .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  .info {\n    border-color: var(--color-petrol);\n  }\n  .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  .success {\n    border-color: var(--color-gras);\n  }\n  .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  .warning {\n    border-color: var(--color-warn);\n  }\n  .warning .heading-icon {\n    background-color: var(--color-warn);\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-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}";
+var css_248z$t = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-headline--h1 {\n    font-size: calc(42 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 3.25;\n  }\n  .kol-headline--h2 {\n    font-size: calc(36 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.755;\n  }\n  .kol-headline--h3 {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.5;\n  }\n  .kol-headline--h4 {\n    font-size: calc(28 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 2;\n  }\n  .kol-headline--h5 {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-headline--h6 {\n    font-size: calc(20 * 1rem / 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$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$s = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-field-control--label-align-left .kol-field-control__label {\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right .kol-field-control__label {\n    padding-left: calc(8 * 1rem / 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    color: var(--color-grey);\n    background-color: var(--color-white);\n    border-color: var(--color-grey-75);\n    border-style: solid;\n    border-width: 2px;\n    line-height: 1.5;\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 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    width: unset;\n    min-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    color: var(--color-white);\n    background-color: var(--color-red);\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    color: #000;\n    background-color: var(--color-white);\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$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$r = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\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(16 * 1rem / 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  min-height: calc(var(--a11y-min-size) - 8 * 1rem / var(--kolibri-root-font-size, 16));\n  border: 1px solid var(--color-blue);\n}";
 
-var css_248z$q = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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-wc.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$q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$p = "@layer kol-theme-component {\n  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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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$p = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$o = "@layer kol-theme-component {\n  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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\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(4 * 1rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n  }\n  .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-button--secondary .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / 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(4 * 1rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\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(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-blue);\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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$m = "@layer kol-theme-component {\n  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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$l = "@layer kol-theme-component {\n  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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    border: 0;\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    padding: 0 calc(14 * 1rem / var(--kolibri-root-font-size, 16)) calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    border: 0;\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.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-field-control {\n    gap: calc(8 * 1rem / 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$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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 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(16 * 1rem / var(--kolibri-root-font-size, 16));\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 {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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-wc {\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-wc {\n    width: 100%;\n  }\n}";
+var css_248z$j = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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$i = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n  }\n  .kol-link__text:active, .kol-link__text:not(:disabled):hover {\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-link--secondary .kol-link__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / 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(4 * 1rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-link:focus-visible .kol-link__text {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\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$h = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-blue);\n    line-height: 1.2;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\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$g = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: white;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-template-rows: min-content 2fr min-content;\n  }\n  .kol-card__header {\n    display: inline-flex;\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n    font-size: 1.25em;\n    font-weight: 700;\n    line-height: 1.75;\n    font-style: normal;\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  }\n}\n@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$f = "@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$f = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    height: 100%;\n    margin: auto;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-nav__toggle-button .kol-button {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-radius: 4px;\n    min-width: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n    text-decoration: none !important;\n  }\n  .kol-nav__toggle-button .kol-button__text:active, .kol-nav__toggle-button .kol-button__text:hover {\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-nav__toggle-button .kol-button:focus-visible .kol-nav__toggle-button .kol-button__text {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    color: var(--color-white);\n    border-color: transparent;\n    border-style: solid;\n    height: 100%;\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    justify-items: start;\n    font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
 
-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$e = "/* forward the rem function */\n@layer kol-theme-component {\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n  }\n  .kol-pagination .kol-button:focus {\n    outline: none;\n  }\n  .kol-pagination .kol-button:focus-visible .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-color: #fc0;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination .kol-button__text {\n    color: #171a22;\n    background-color: #fc0;\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    font-weight: bold;\n    text-decoration: underline;\n  }\n  .kol-button {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    color: #171a22;\n    background-color: #fc0;\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-button:not(:disabled):active .kol-button__text, .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-color: #fc0;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    font-weight: bold;\n    text-decoration: underline;\n  }\n  .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\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$d = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n  }\n  .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-button--secondary .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / 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(4 * 1rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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$c = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$b = "@layer kol-theme-component {\n  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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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$b = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-blue);\n  }\n  .kol-custom-suggestions-option:focus {\n    color: white;\n    background-color: var(--color-blue);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: calc(-8 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    color: var(--color-grey);\n    display: inline-flex;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n  }\n  .kol-single-select__input {\n    position: relative;\n    width: calc(100% - 2.5rem);\n    flex-grow: 1;\n    border: none;\n  }\n  .kol-single-select__input::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .kol-single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .kol-single-select__input:not(.disabled) .kol-single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-single-select__input:focus {\n    border: none;\n  }\n}";
 
-var css_248z$a = "@layer kol-theme-component {\n  .kol-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$a = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-skip-nav .kol-link__text {\n    color: #fff;\n    background-color: #0e47cb;\n    border-radius: 4px;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\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$9 = "/* forward the rem function */\n@layer kol-theme-component {\n  .cycle {\n    padding: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .cycle span {\n    background-color: var(--color-blue-80);\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$8 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-split-button {\n    border-color: var(--color-blue);\n    border-style: solid;\n    border-radius: 4px;\n    border-width: 2px;\n  }\n  .kol-split-button__horizontal-line {\n    border: 0;\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-split-button .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-split-button .kol-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-split-button .kol-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-split-button .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n  }\n  .kol-split-button .kol-button__text:active, .kol-split-button .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / 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(12 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / 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(4 * 1rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-split-button .kol-button:focus-visible .kol-split-button .kol-button__text {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n}";
 
-var css_248z$7 = "@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$7 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n  }\n  .kol-pagination .kol-button:focus {\n    outline: none;\n  }\n  .kol-pagination .kol-button:focus-visible .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-color: #fc0;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination .kol-button__text {\n    color: #171a22;\n    background-color: #fc0;\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    font-weight: bold;\n    text-decoration: underline;\n  }\n  :host {\n    display: flex;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    display: block;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: 2px solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    gap: calc(16 * 1rem / 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(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\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$6 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n  .kol-pagination .kol-button {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n  }\n  .kol-pagination .kol-button:focus {\n    outline: none;\n  }\n  .kol-pagination .kol-button:focus-visible .kol-button__text {\n    outline: 2px solid var(--color-black);\n    outline-offset: -4px;\n  }\n  .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-color: #fc0;\n  }\n  .kol-pagination .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-pagination .kol-button__text {\n    color: #171a22;\n    background-color: #fc0;\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    opacity: 1;\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    font-weight: bold;\n    text-decoration: underline;\n  }\n  :host {\n    display: flex;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n  }\n  .kol-table {\n    display: block;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    border-color: var(--color-ice);\n    border-style: solid;\n    width: 100%;\n    border-width: 0;\n    border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-spacing: 0;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-color: var(--color-ice);\n    border-style: solid;\n    border-width: 0;\n    border-bottom-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n    font-weight: normal;\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-table__selection-input:focus {\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-width: 2px;\n    border-color: var(--color-blue);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    border-color: var(--color-grey-75);\n    display: block;\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: 2px solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n}";
 
-var css_248z$5 = "@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$5 = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    margin-bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n    border-bottom: 1px solid var(--color-grey-25);\n  }\n  .kol-tabs .kol-button {\n    margin-bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n    color: var(--color-blue-130);\n  }\n  .kol-tabs .kol-button:focus .kol-span {\n    outline: var(--color-blue-130) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button.selected .kol-span {\n    color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-top-color: var(--color-blue);\n    border-bottom-color: white;\n    border-width: 1px;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-tabs .kol-button .kol-span {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\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-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\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$4 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    gap: calc(8 * 1rem / 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(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / 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(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-red);\n    margin-left: calc(-1 * var(--spacing-2xs));\n    font-size: 0.875em;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-red);\n  }\n  .kol-input-container {\n    color: var(--color-grey);\n    min-height: var(--a11y-min-size);\n    padding: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n    order: 4;\n    align-items: center;\n    border: 1px solid var(--color-grey-75);\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1 * 1rem / var(--kolibri-root-font-size, 16)) calc(1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) calc(-1 * 1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    outline: none;\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-bottom: 1px solid var(--color-blue);\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-input::-moz-placeholder, .kol-textarea::-moz-placeholder {\n    color: var(--color-grey-50);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$3 = "@layer kol-theme-component {\n  .default {\n    border-color: var(--color-anthrazit);\n  }\n  .heading {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  .error {\n    border-color: var(--color-rotton);\n  }\n  .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  .info {\n    border-color: var(--color-petrol);\n  }\n  .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  .success {\n    border-color: var(--color-gras);\n  }\n  .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  .warning {\n    border-color: var(--color-warn);\n  }\n  .warning .heading-icon {\n    background-color: var(--color-warn);\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$3 = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n  }\n  .kol-toast-item {\n    background-color: #fff;\n    display: block;\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--variant-msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--variant-card {\n    border-style: solid;\n    padding-top: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    padding-inline-end: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\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(8 * 1rem / 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(32 * 1rem / 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    margin: var(--spacing-2xs);\n    font-size: 1.5em;\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-toast-item .kol-alert__icon {\n    font-size: calc(32 * 1rem / 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(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n  .kol-toast-item .heading {\n    width: 100%;\n  }\n  .kol-toast-item .heading .heading-content {\n    flex: 1;\n  }\n}";
 
-var css_248z$2 = "@layer kol-theme-component {\n  .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$2 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n  }\n  .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-button--secondary .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / 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(4 * 1rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-link {\n    --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    border-radius: 4px;\n    text-decoration: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: 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    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    border-radius: 4px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    margin: 0;\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    line-height: 1.2;\n  }\n  .kol-link__text:active, .kol-link__text:not(:disabled):hover {\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-link--secondary .kol-link__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16) - 2 * 1rem / 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(4 * 1rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-link:focus-visible .kol-link__text {\n    outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: -4px;\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-toolbar {\n    background-color: var(--color-white);\n    box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    border-radius: 8px;\n    padding: var(--spacing-s);\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$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$1 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    display: flex;\n    flex-direction: column;\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}";
+var css_248z = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-tree-item__children {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-tree-item__link {\n    border-radius: 4px;\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-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    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 {\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 ITZBund = KoliBri.createTheme('itzbund', {
+const ECL_EU = KoliBri.createTheme('ecl-eu', {
     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-ACCORDION': css_248z$E,
     '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,
-    'KOL-PROGRESS': css_248z$d,
+    'KOL-BUTTON': css_248z$A,
+    'KOL-BUTTON-LINK': css_248z$z,
+    'KOL-CARD': css_248z$y,
+    'KOL-COMBOBOX': css_248z$x,
+    'KOL-DETAILS': css_248z$w,
+    'KOL-DRAWER': css_248z$v,
+    'KOL-FORM': css_248z$u,
+    'KOL-HEADING': css_248z$t,
+    'KOL-INPUT-CHECKBOX': css_248z$s,
+    'KOL-INPUT-COLOR': css_248z$r,
+    'KOL-INPUT-DATE': css_248z$q,
+    'KOL-INPUT-EMAIL': css_248z$p,
+    'KOL-INPUT-FILE': css_248z$o,
+    'KOL-INPUT-NUMBER': css_248z$n,
+    'KOL-INPUT-PASSWORD': css_248z$m,
+    'KOL-INPUT-RADIO': css_248z$l,
+    'KOL-INPUT-RANGE': css_248z$k,
+    'KOL-INPUT-TEXT': css_248z$j,
+    'KOL-LINK': css_248z$h,
+    'KOL-LINK-BUTTON': css_248z$i,
+    'KOL-MODAL': css_248z$g,
+    'KOL-NAV': css_248z$f,
+    'KOL-PAGINATION': css_248z$e,
+    'KOL-POPOVER-BUTTON': 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,
 });
 
-export { DEFAULT, ECL_EC, ECL_EU, ITZBund };
+export { DEFAULT, ECL_EC, ECL_EU };
 //# sourceMappingURL=index.mjs.map