@public-ui/themes 3.0.0-rc.0 → 3.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +8 -0
  2. package/dist/default/src/index.d.ts +0 -3
  3. package/dist/ecl/src/ecl-ec/index.d.ts +0 -3
  4. package/dist/ecl/src/ecl-eu/index.d.ts +0 -3
  5. package/dist/index.cjs +291 -315
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.mjs +291 -315
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/itzbund/src/index.d.ts +0 -3
  10. package/package.json +10 -10
package/dist/index.cjs CHANGED
@@ -3,323 +3,303 @@
3
3
  /*!
4
4
  * KoliBri - The accessible HTML-Standard
5
5
  */
6
- 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);}}
6
+ 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"],a={},s=null;function l(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 r(){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(),a=0;a<n.length;a++){var s=n[a];this[s]=a<o?e:this.methodFactory(s,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,a,s){return function(n){return "debug"===n&&(n="log"),typeof console!==t&&("trace"===n&&o?r:void 0!==console[n]?l(console,n):void 0!==console.log?l(console,"log"):e)}(n)||c.apply(this,arguments)}function f(e,o){var l,r,c,f=this,y="loglevel";function m(){var e;if(typeof window!==t&&y){try{e=window.localStorage[y];}catch(e){}if(typeof e===t)try{var o=window.document.cookie,n=encodeURIComponent(y),a=o.indexOf(n+"=");-1!==a&&(e=/^([^;]+)/.exec(o.slice(a+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?y+=":"+e:"symbol"==typeof e&&(y=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!=r?r:l},f.setLevel=function(e,o){return c=d(e),!1!==o&&function(e){var o=(n[e]||"silent").toUpperCase();if(typeof window!==t&&y){try{return void(window.localStorage[y]=o)}catch(e){}try{window.document.cookie=encodeURIComponent(y)+"="+o+";";}catch(e){}}}(c),i.call(f)},f.setDefaultLevel=function(e){r=d(e),m()||f.setLevel(e,!1);},f.resetLevel=function(){c=null,function(){if(typeof window!==t&&y){try{window.localStorage.removeItem(y);}catch(e){}try{window.document.cookie=encodeURIComponent(y)+"=; 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(s!==f&&(l=d(s.getLevel())),i.call(f),s===f)for(var e in a)a[e].rebuild();},l=d(s?s.getLevel():"WARN");var p=m();null!=p&&(c=d(p)),i.call(f);}(s=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=a[e];return t||(t=a[e]=new f(e,s.methodFactory)),t};var y=typeof window!==t?window.log:void 0;return s.noConflict=function(){return typeof window!==t&&window.log===s&&(window.log=y),s},s.getLoggers=function(){return a},s.default=s,s},e.exports?e.exports=o():t.log=o();}(loglevel);const R=(e,t)=>o=>o(e,t),H=(e,t)=>o=>o(e,t,{append:!1}),$=new Map,M=[],Y=new Map,a={A11yUi:{CSS_STYLE_CACHE:$,HYDRATED_HISTORY:M,STYLING_TASK_QUEUE:Y,Themes:{}}};const w=new Set,q=/--[^;]+/g,J=/:/,V=(e,t)=>{let o=t.match(q);if(Array.isArray(o)){o=o.filter((e=>J.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}w.add(e);},f=(e,t)=>"object"==typeof a.A11yUi&&null!==a.A11yUi&&"object"==typeof a.A11yUi.Themes&&null!==a.A11yUi.Themes&&"object"==typeof a.A11yUi.Themes[e]&&null!==a.A11yUi.Themes[e]&&"string"==typeof a.A11yUi.Themes[e][t]?a.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",W=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);}},X=(e,t)=>{try{if("ssr"===a.A11yUi.Theme?.mode)throw new Error("SSR");const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}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);}));}},Z=(e,t,o)=>{if(!1!==o){const n=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let a;try{a=[...Array.from(e.adoptedStyleSheets)];}catch{a=[];}"before"===o?.mode?(n.reverse().forEach((e=>t.unshift(e.innerHTML))),a.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(n.forEach((e=>t.push(e.innerHTML))),a.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},L=(e,t,o)=>{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(a.A11yUi.CSS_STYLE_CACHE.get(n)?.has(e.tagName))_(e,s,a.A11yUi.CSS_STYLE_CACHE.get(n)?.get(e.tagName),o);else {const l=f(n,"PROPERTIES"),r=f(n,"GLOBAL"),i=f(n,e.tagName);!1===w.has(n)&&V(n,r);const c=[l,r,i];Z(s,c,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,c),!0===t.cache&&(!1===a.A11yUi.CSS_STYLE_CACHE.has(n)&&a.A11yUi.CSS_STYLE_CACHE.set(n,new Map),a.A11yUi.CSS_STYLE_CACHE.get(n)?.set(e.tagName,c)),_(e,s,c,o);}},_=(e,t,o,n)=>{W(t),X(t,o),e.style.display=n;},N=e=>{"debug"===e.loglevel&&a.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:a.A11yUi.STYLING_TASK_QUEUE.size});},se=e=>{a.A11yUi.STYLING_TASK_QUEUE.delete(e);},j=(e,t)=>{se(e),N(t);},oe=e=>{for(const t of e)if(a.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=a.A11yUi.STYLING_TASK_QUEUE.get(t.target);L(t.target,o,e),j(t.target,o);}};let d;try{d=new MutationObserver(oe);}catch{d=null;}class re{constructor(e,t,o){this.createTheme=(e,t)=>H(e,t),this.createTranslation=(e,t)=>R(e,t),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o);}}
7
7
 
8
8
  /*!
9
9
  * KoliBri - The accessible HTML-Standard
10
10
  */
11
- 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);
11
+ var KeyEnum,TagEnum;!function(e){e[e.error=0]="error",e[e.warning=1]="warning",e[e.info=2]="info",e[e.success=3]="success",e[e.message=4]="message",e[e.close=5]="close",e[e["form-description"]=6]="form-description",e[e.of=7]="of",e[e.characters=8]="characters",e[e.new=9]="new",e[e["no-entries"]=10]="no-entries",e[e["change-order"]=11]="change-order",e[e["action-running"]=12]="action-running",e[e["action-done"]=13]="action-done",e[e["page-first"]=14]="page-first",e[e["page-back"]=15]="page-back",e[e["page-next"]=16]="page-next",e[e["page-last"]=17]="page-last",e[e["entries-per-site"]=18]="entries-per-site",e[e["page-current"]=19]="page-current",e[e["page-selected"]=20]="page-selected",e[e["page-per-site"]=21]="page-per-site",e[e["logo-description"]=22]="logo-description",e[e["open-link-in-tab"]=23]="open-link-in-tab",e[e["kolibri-logo"]=24]="kolibri-logo";}(KeyEnum||(KeyEnum={})),function(e){e[e.abbr=0]="abbr",e[e.accordion=1]="accordion",e[e["accordion-group"]=2]="accordion-group",e[e.alert=3]="alert",e[e.avatar=4]="avatar",e[e.badge=5]="badge",e[e.breadcrumb=6]="breadcrumb",e[e.button=7]="button",e[e["button-link"]=8]="button-link",e[e.card=9]="card",e[e.combobox=10]="combobox",e[e.details=11]="details",e[e.drawer=12]="drawer",e[e.form=13]="form",e[e.heading=14]="heading",e[e.icon=15]="icon",e[e.image=16]="image",e[e["input-checkbox"]=17]="input-checkbox",e[e["input-color"]=18]="input-color",e[e["input-date"]=19]="input-date",e[e["input-email"]=20]="input-email",e[e["input-file"]=21]="input-file",e[e["input-number"]=22]="input-number",e[e["input-password"]=23]="input-password",e[e["input-radio"]=24]="input-radio",e[e["input-range"]=25]="input-range",e[e["input-text"]=26]="input-text",e[e.kolibri=27]="kolibri",e[e.link=28]="link",e[e["link-button"]=29]="link-button",e[e.logo=30]="logo",e[e.modal=31]="modal",e[e.nav=32]="nav",e[e.pagination=33]="pagination",e[e.progress=34]="progress",e[e.select=35]="select",e[e.separator=36]="separator",e[e["skip-nav"]=37]="skip-nav",e[e.spin=38]="spin",e[e["single-select"]=39]="single-select",e[e["split-button"]=40]="split-button",e[e.symbol=41]="symbol",e[e.table=42]="table",e[e["table-stateless"]=43]="table-stateless",e[e["table-stateful"]=44]="table-stateful",e[e.tabs=45]="tabs",e[e.textarea=46]="textarea",e[e["toast-container"]=47]="toast-container",e[e.toolbar=48]="toolbar",e[e.tooltip=49]="tooltip",e[e.tree=50]="tree",e[e["tree-item"]=51]="tree-item";}(TagEnum||(TagEnum={}));const KoliBri=new re("kol",KeyEnum,TagEnum);var Bundesministerium;(function(e){e["Die Bundesregierung"]="BReg",e["Bundesministerium der Finanzen"]="BMF",e["Bundesministerium des Innern, für Bau und Heimat"]="BMI",e["Auswärtiges Amt"]="AA",e["Bundesministerium für Wirtschaft und Energie"]="BMWi",e["Bundesministerium der Justiz und für Verbraucherschutz"]="BMJV",e["Bundesministerium für Arbeit und Soziales"]="BMAS",e["Bundesministerium der Verteidigung"]="BMVg",e["Bundesministerium für Ernährung und Landwirtschaft"]="BMEL",e["Bundesministerium für Familie, Senioren, Frauen und Jugend"]="BMFSFJ",e["Bundesministerium für Gesundheit"]="BMG",e["Bundesministerium für Verkehr und digitale Infrastruktur"]="BMVI",e["Bundesministerium für Umwelt, Naturschutz und nukleare Sicherheit"]="BMU",e["Bundesministerium für Bildung und Forschung"]="BMBF",e["Bundesministerium für wirtschaftliche Zusammenarbeit und Entwicklung"]="BMZ";})(Bundesministerium||(Bundesministerium={}));var Bundesamt;!function(e){e["Beschaffungsamt des Bundesministeriums des Innern"]="BeschA",e["Bundesamt für Ausrüstung, Informationstechnik und Nutzung der Bundeswehr"]="BAAINBw",e["Bundesamt für äußere Restitutionen"]="BAR",e["Bundesamt für Bauwesen und Raumordnung"]="BBR",e["Bundesamt für Bevölkerungsschutz und Katastrophenhilfe"]="BBK",e["Bundesamt für Familie und zivilgesellschaftliche Aufgaben"]="BAFzA",e["Bundesamt für Güterverkehr"]="BAG",e["Bundesamt für Justiz"]="BfJ",e["Bundesamt für Kartographie und Geodäsie"]="BKG",e["Bundesamt für kerntechnische Entsorgungssicherheit"]="BASE",e["Bundesamt für Migration und Flüchtlinge"]="BAMF",e["Bundesamt für Sicherheit in der Informationstechnik"]="BSI",e["Bundesamt für Verbraucherschutz und Lebensmittelsicherheit"]="BVL",e["Bundesamt für Verfassungsschutz"]="BfV",e["Bundesamt für Wirtschaft und Ausfuhrkontrolle"]="BAFA",e["Bundesamt für zentrale Dienste und offene Vermögensfragen"]="BADV",e["Bundesanstalt für Verwaltungsdienstleistungen"]="BAV",e.Bundesarchiv="BArch",e["Bundesaufsichtsamt für Flugsicherung"]="BAF",e.Bundesausgleichsamt="BAA",e.Bundeskartellamt="BKartA",e.Bundeskriminalamt="BKA",e.Bundesnachrichtendienst="BND",e["Bundesnetzagentur für Elektrizität, Gas, Telekommunikation, Post und Eisenbahnen"]="BNetzA",e["Bundespolizeipräsidium"]="BPOLP",e["Bundesprüfstelle für jugendgefährdende Medien"]="BPjM",e.Bundessortenamt="BSA",e.Bundessprachenamt="BSprA",e["Bundesamt für Soziale Sicherung"]="BAS",e.Bundesverwaltungsamt="BVA",e["Bundeszentralamt für Steuern"]="BZSt",e["Deutsches Patent- und Markenamt"]="DPMA",e["Eisenbahn-Bundesamt"]="EBA",e.Generalzolldirektion="GZD",e["Militärischer Abschirmdienst"]="MAD",e["Zentrale Stelle für Informationstechnik im Sicherheitsbereich"]="ZITiS";}(Bundesamt||(Bundesamt={}));var Bundesanstalt;!function(e){e["Informationstechnikzentrum Bund"]="ITZBund",e["Bundesanstalt für den Digitalfunk der Behörden und Organisationen mit Sicherheitsaufgaben"]="BDBOS",e["Bundesanstalt für Landwirtschaft und Ernährung"]="BLE",e["Bundesanstalt Technisches Hilfswerk"]="THW",e["Bundesinstitut für Arzneimittel und Medizinprodukte"]="BfArM",e["Bundesinstitut für Bevölkerungsforschung"]="BiB",e["Bundesinstitut für 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"]);
12
12
 
13
- 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}";
13
+ var css_248z$2D = "@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-headline {\n font-weight: 700;\n }\n .kol-tooltip__floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip__arrow {\n background-color: var(--color-light);\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip__content {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span,\n .kol-span__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}";
14
14
 
15
- var css_248z$2K = "@layer kol-theme-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .kol-accordion {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .kol-accordion__content {\n margin: 0;\n padding-left: 2.25em;\n padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading {\n margin: 0;\n }\n .kol-accordion__heading-button {\n display: flex;\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n .kol-accordion__heading-button:focus-within button {\n outline: 0;\n }\n .kol-accordion__heading-button .kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n text-align: left;\n gap: 0.5em;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1;\n }\n .kol-accordion__heading-button button {\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button button :focus {\n outline: none;\n }\n .kol-accordion__heading-button .kol-icon {\n color: var(--color-primary);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
15
+ var css_248z$2C = "@layer kol-theme-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .kol-accordion {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .kol-accordion__content {\n margin: 0;\n padding-left: 2.25em;\n padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading {\n margin: 0;\n }\n .kol-accordion__heading-button {\n display: flex;\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n .kol-accordion__heading-button:focus-within .kol-button {\n outline: 0;\n }\n .kol-accordion__heading-button .kol-span__container {\n display: flex;\n place-items: baseline center;\n text-align: left;\n gap: 0.5em;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1;\n }\n .kol-accordion__heading-button .kol-button {\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-button :focus {\n outline: none;\n }\n .kol-accordion__heading-button .kol-icon {\n color: var(--color-primary);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
16
16
 
17
- var css_248z$2J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
17
+ var css_248z$2B = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
18
18
 
19
- var css_248z$2I = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
19
+ var css_248z$2A = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
20
20
 
21
- var css_248z$2H = "@layer kol-theme-component {\n .kol-badge {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n .kol-badge--has-smart-button {\n align-items: center;\n }\n .kol-badge__smart-button .kol-button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__smart-button .kol-button:hover {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-badge__smart-button .kol-button__text {\n align-items: center;\n font-style: normal;\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label .kol-span__container {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
21
+ var css_248z$2z = "@layer kol-theme-component {\n .kol-badge {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n .kol-badge--has-smart-button {\n align-items: center;\n }\n .kol-badge__smart-button .kol-button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__smart-button .kol-button:hover {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-badge__smart-button .kol-button__text {\n align-items: center;\n font-style: normal;\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label .kol-span__container {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
22
22
 
23
- var css_248z$2G = "@layer kol-theme-component {\n .kol-breadcrumb {\n font-family: var(--font-family);\n }\n .kol-breadcrumb__list-element-span {\n color: var(--color-subtle);\n }\n .kol-breadcrumb__link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n}";
23
+ var css_248z$2y = "@layer kol-theme-component {\n .kol-breadcrumb {\n font-family: var(--font-family);\n }\n .kol-breadcrumb__list-element-span {\n color: var(--color-subtle);\n }\n .kol-breadcrumb__link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n}";
24
24
 
25
- var css_248z$2F = "@layer kol-theme-component {\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, .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-button--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button__text:hover {\n box-shadow: 0 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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button:focus {\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 .kol-button:disabled:hover .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-button .badge-text-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 .kol-button {\n font-family: var(--font-family);\n }\n .kol-button__text {\n font-weight: 700;\n border-style: solid;\n border-width: var(--border-width);\n border-radius: var(--border-radius);\n }\n}";
25
+ var css_248z$2x = "@layer kol-theme-component {\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, .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-button--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button__text:hover {\n box-shadow: 0 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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button:focus {\n border-radius: var(--border-radius);\n outline-offset: 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 .kol-button:disabled:hover .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-button .badge-text-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 .kol-button {\n font-family: var(--font-family);\n }\n .kol-button__text {\n font-weight: 700;\n border-style: solid;\n border-width: var(--border-width);\n border-radius: var(--border-radius);\n }\n}";
26
26
 
27
- 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}";
27
+ var css_248z$2w = "@layer kol-theme-component {\n .kol-button {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button:visited {\n color: var(--visited);\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-button {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n font-size: inherit;\n }\n .kol-button:focus {\n outline: none;\n --text-border-radius: var(--border-radius);\n --text-outline: calc(var(--border-width) * 2) solid;\n }\n .kol-button:visited {\n color: var(--visited);\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--text-border-radius);\n outline: var(--text-outline);\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .badge-text-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}";
28
28
 
29
- var css_248z$2D = "@layer kol-theme-component {\n .kol-button {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button:visited {\n color: var(--visited);\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .span-label {\n text-decoration-thickness: 0.25em;\n }\n .kol-button {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n font-size: inherit;\n }\n .kol-button:focus {\n outline: none;\n --text-border-radius: var(--border-radius);\n --text-outline: calc(var(--border-width) * 2) solid;\n }\n .kol-button:visited {\n color: var(--visited);\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--text-border-radius);\n outline: var(--text-outline);\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .span-label {\n text-decoration-thickness: 0.25em;\n }\n .badge-text-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}";
29
+ var css_248z$2v = "@layer kol-theme-component {\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n .kol-card {\n font-family: var(--font-family);\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-card__header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card__content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n .kol-card__headline {\n line-height: 1.75;\n }\n}";
30
30
 
31
- 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}";
31
+ var css_248z$2u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
32
32
 
33
- var css_248z$2B = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
33
+ var css_248z$2t = "@layer kol-theme-component {\n .kol-details {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n height: 100%;\n display: grid;\n }\n .kol-details__content.indented-text {\n font-family: var(--font-family);\n border-left: 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 .kol-details__heading {\n margin: 0;\n }\n .kol-details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button .kol-span__container {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .kol-details__heading-button .kol-span__label {\n border-bottom-color: #000;\n }\n .kol-details__heading-button .kol-button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 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}";
34
34
 
35
- 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}";
35
+ var css_248z$2s = "@layer kol-theme-component {\n .kol-drawer__wrapper {\n box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n }\n .kol-drawer__wrapper--left {\n animation: slideInLeft 0.4s forwards;\n }\n .kol-drawer__wrapper--left.kol-drawer__wrapper--is-closing {\n animation: slideOutLeft 0.4s forwards;\n }\n .kol-drawer__wrapper--right {\n animation: slideInRight 0.4s forwards;\n }\n .kol-drawer__wrapper--right.kol-drawer__wrapper--is-closing {\n animation: slideOutRight 0.4s forwards;\n }\n .kol-drawer__wrapper--top {\n animation: slideInTop 0.4s forwards;\n }\n .kol-drawer__wrapper--top.kol-drawer__wrapper--is-closing {\n animation: slideOutTop 0.4s forwards;\n }\n .kol-drawer__wrapper--bottom {\n animation: slideInBottom 0.4s forwards;\n }\n .kol-drawer__wrapper--bottom.kol-drawer__wrapper--is-closing {\n animation: slideOutBottom 0.4s forwards;\n }\n}\n@keyframes slideInLeft {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInTop {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideInBottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideOutLeft {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n@keyframes slideOutRight {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideOutTop {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n@keyframes slideOutBottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}";
36
36
 
37
- 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}";
37
+ var css_248z$2r = "@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form {\n font-family: var(--font-family);\n }\n .kol-form__link {\n display: inline-block;\n }\n .kol-form__mandatory-fields-hint {\n font-family: var(--font-family);\n border-left: 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}";
38
38
 
39
- var css_248z$2y = "@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .span-label {\n text-decoration-thickness: 0.25em;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-form__link {\n display: inline-block;\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}";
39
+ var css_248z$2q = "@layer kol-theme-component {\n .kol-headline--h1 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.667;\n }\n .kol-headline--h2 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .kol-headline--h3 {\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.333;\n }\n .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n color: inherit;\n font-style: normal;\n font-family: var(--font-family);\n }\n .kol-headline--h1, .kol-headline--h2, .kol-headline--h3 {\n font-weight: 700;\n }\n}";
40
40
 
41
- 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}";
41
+ var css_248z$2p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n position: relative;\n justify-content: center;\n }\n .input,\n .checkbox-container {\n min-width: initial;\n width: initial;\n }\n .kol-input.default {\n grid-template-columns: auto 1fr;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: 1fr auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: center;\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 .kol-input > div.input {\n display: flex;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n margin: 0;\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 display: flex;\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
42
42
 
43
- 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}";
43
+ var css_248z$2o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start,\n .kol-input .input .inputAdornment-end {\n display: flex;\n align-items: center;\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start .kol-icon,\n .kol-input .input .inputAdornment-end .kol-icon {\n min-width: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n justify-content: center;\n }\n .kol-input .input .inputAdornment-start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n input[type=color] {\n background-color: transparent;\n }\n}";
44
44
 
45
- var css_248z$2v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
45
+ var css_248z$2n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start,\n .kol-input .input .inputAdornment-end {\n display: flex;\n align-items: center;\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start .kol-icon,\n .kol-input .input .inputAdornment-end .kol-icon {\n min-width: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n justify-content: center;\n }\n .kol-input .input .inputAdornment-start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
46
46
 
47
- var css_248z$2u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n input[type=color] {\n background-color: transparent;\n }\n}";
47
+ var css_248z$2m = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start,\n .kol-input .input .inputAdornment-end {\n display: flex;\n align-items: center;\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start .kol-icon,\n .kol-input .input .inputAdornment-end .kol-icon {\n min-width: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n justify-content: center;\n }\n .kol-input .input .inputAdornment-start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
48
48
 
49
- var css_248z$2t = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
49
+ var css_248z$2l = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start,\n .kol-input .input .inputAdornment-end {\n display: flex;\n align-items: center;\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start .kol-icon,\n .kol-input .input .inputAdornment-end .kol-icon {\n min-width: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n justify-content: center;\n }\n .kol-input .input .inputAdornment-start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n .kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-file .input {\n gap: initial;\n }\n input[type=file] {\n background-color: transparent;\n }\n}";
50
50
 
51
- var css_248z$2s = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
51
+ var css_248z$2k = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start,\n .kol-input .input .inputAdornment-end {\n display: flex;\n align-items: center;\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start .kol-icon,\n .kol-input .input .inputAdornment-end .kol-icon {\n min-width: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n justify-content: center;\n }\n .kol-input .input .inputAdornment-start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
52
52
 
53
- var css_248z$2r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n .kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=file] {\n background-color: transparent;\n }\n}";
53
+ var css_248z$2j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start,\n .kol-input .input .inputAdornment-end {\n display: flex;\n align-items: center;\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start .kol-icon,\n .kol-input .input .inputAdornment-end .kol-icon {\n min-width: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n justify-content: center;\n }\n .kol-input .input .inputAdornment-start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
54
54
 
55
- var css_248z$2q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
55
+ var css_248z$2i = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: 1.25;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n order: 2;\n display: contents;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) input:focus,\n fieldset.error:not(.hidden-error) select:focus,\n fieldset.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert.error {\n margin-left: -0.25em;\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n align-items: flex-start;\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
56
56
 
57
- var css_248z$2p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
57
+ var css_248z$2h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start,\n .kol-input .input .inputAdornment-end {\n display: flex;\n align-items: center;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start .kol-icon,\n .kol-input .input .inputAdornment-end .kol-icon {\n min-width: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n justify-content: center;\n }\n .kol-input .input .inputAdornment-start .kol-icon:first-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-end .kol-icon:last-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
58
58
 
59
- var css_248z$2o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: 1.25;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n order: 2;\n display: contents;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) input:focus,\n fieldset.error:not(.hidden-error) select:focus,\n fieldset.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert.error {\n margin-left: -0.25em;\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n align-items: flex-start;\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
59
+ var css_248z$2g = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start,\n .kol-input .input .inputAdornment-end {\n display: flex;\n align-items: center;\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start .kol-icon,\n .kol-input .input .inputAdornment-end .kol-icon {\n min-width: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n justify-content: center;\n }\n .kol-input .input .inputAdornment-start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
60
60
 
61
- var css_248z$2n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
61
+ var css_248z$2f = "@layer kol-theme-component {\n .kol-kolibri {\n font-family: var(--font-family);\n }\n}";
62
62
 
63
- var css_248z$2m = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
63
+ var css_248z$2e = "@layer kol-theme-component {\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, .kol-link--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-link--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-link--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-link--primary:not([disabled]):hover, .kol-link--secondary:not([disabled]):hover, .kol-link--normal:not([disabled]):hover, .kol-link--danger:not([disabled]):hover, .kol-link--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-link--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-link__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-link__text:hover {\n box-shadow: 0 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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-link--hide-label .kol-link__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-link--hide-label .kol-link__text .kol-span__label {\n display: none;\n }\n .kol-link:focus {\n border-radius: var(--border-radius);\n outline-offset: 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 .kol-link:disabled:hover .kol-link__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-link .badge-text-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 :host {\n font-family: var(--font-family);\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link__text {\n font-weight: 700;\n border-style: solid;\n border-radius: var(--a11y-min-size);\n outline-width: calc(var(--border-width) * 2);\n }\n .kol-link:focus .kol-link__text {\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 .kol-link:disabled:hover .kol-link__text {\n box-shadow: none;\n }\n .kol-link:focus:hover .kol-link__text {\n box-shadow: none;\n }\n}";
64
64
 
65
- var css_248z$2l = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
65
+ var css_248z$2d = "@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n :host {\n font-family: inherit;\n }\n .kol-link {\n line-height: 1;\n }\n}";
66
66
 
67
- var css_248z$2k = "@layer kol-theme-component {\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, .kol-link--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-link--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-link--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-link--primary:not([disabled]):hover, .kol-link--secondary:not([disabled]):hover, .kol-link--normal:not([disabled]):hover, .kol-link--danger:not([disabled]):hover, .kol-link--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-link--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-link__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-link__text:hover {\n box-shadow: 0 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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-link--hide-label .kol-link__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-link--hide-label .kol-link__text .span-label {\n display: none;\n }\n .kol-link:focus {\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 .kol-link:disabled:hover .kol-link__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-link .badge-text-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 :host {\n font-family: var(--font-family);\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link__text {\n font-weight: 700;\n border-style: solid;\n border-radius: var(--a11y-min-size);\n outline-width: calc(var(--border-width) * 2);\n }\n .kol-link:focus .kol-link__text {\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 .kol-link:disabled:hover .kol-link__text {\n box-shadow: none;\n }\n .kol-link:focus:hover .kol-link__text {\n box-shadow: none;\n }\n}";
67
+ var css_248z$2c = "@layer kol-theme-component {\n .kol-nav {\n font-family: var(--font-family);\n }\n .kol-nav__navigation {\n background-color: var(--color-mute);\n }\n .kol-nav__list {\n list-style: none;\n }\n .kol-nav__list--nested {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__list--nested .kol-link,\n .kol-nav__list--nested .kol-button {\n font-weight: normal !important;\n border-left-color: transparent !important;\n }\n .kol-nav__entry--link {\n display: flex;\n }\n .kol-nav__entry .kol-link:hover {\n text-decoration: underline;\n }\n .kol-nav__entry .kol-link,\n .kol-nav__entry .kol-button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .kol-nav__entry .kol-link:focus-visible,\n .kol-nav__entry .kol-button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 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 .kol-nav__list--vertical .kol-nav__entry .kol-link,\n .kol-nav__list--vertical .kol-nav__entry .kol-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 .kol-nav--horizontal .kol-nav__entry .kol-link,\n .kol-nav--horizontal .kol-nav__entry .kol-button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-link,\n .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-button {\n border-left-color: var(--color-primary);\n }\n .kol-nav__list-item--active .kol-nav__entry .kol-link,\n .kol-nav__list-item--active .kol-nav__entry .kol-button {\n font-weight: bold;\n }\n .kol-nav__expand-button {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__expand-button .kol-button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .kol-nav__expand-button .kol-button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 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 .kol-nav__expand-button .kol-button__text {\n justify-content: center;\n }\n}";
68
68
 
69
- var css_248z$2j = "@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .span-label {\n text-decoration-thickness: 0.25em;\n }\n :host {\n font-family: inherit;\n }\n .kol-link {\n line-height: 1;\n }\n}";
69
+ var css_248z$2b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-button__text {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 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 .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-primary);\n color: var(--color-light);\n border: 0;\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--border-radius);\n outline-offset: 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 .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 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 .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n}";
70
70
 
71
- 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-button__text {\n display: flex;\n }\n .entry-item a,\n .entry-item .kol-button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .kol-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 .kol-button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .kol-button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .kol-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 .kol-button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .kol-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 .kol-button .expand-button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-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 .kol-button__text {\n justify-content: center;\n }\n}";
71
+ var css_248z$2a = "@layer kol-theme-component {\n .kol-progress {\n font-family: var(--font-family);\n }\n .kol-progress__bar-progress {\n fill: var(--color-primary-variant);\n }\n .kol-progress__cycle-background {\n stroke: var(--color-mute-variant);\n }\n .kol-progress__cycle-progress {\n stroke: var(--color-primary-variant);\n }\n}";
72
72
 
73
- var css_248z$2h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-button__text {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 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 .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-primary);\n color: var(--color-light);\n border: 0;\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--border-radius);\n outline-offset: 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 .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 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 .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n}";
73
+ var css_248z$29 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start,\n .kol-input .input .inputAdornment-end {\n display: flex;\n align-items: center;\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-start .kol-icon,\n .kol-input .input .inputAdornment-end .kol-icon {\n min-width: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n justify-content: center;\n }\n .kol-input .input .inputAdornment-start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input .inputAdornment-end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
74
74
 
75
- 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}";
75
+ var css_248z$28 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
76
76
 
77
- var css_248z$2f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
77
+ var css_248z$27 = "@layer kol-theme-component {\n .kol-skip-nav {\n font-family: var(--font-family);\n }\n .kol-skip-nav .kol-link__text {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
78
78
 
79
- var css_248z$2e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
79
+ var css_248z$26 = "@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 {\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .main-button :is(a, button) > .kol-span {\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n }\n .secondary-button :is(a, button) > .kol-span {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-button--secondary, .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-button--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button__text:hover {\n box-shadow: 0 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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button:focus {\n border-radius: var(--border-radius);\n outline-offset: 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 .kol-button:disabled:hover .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-button .badge-text-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}";
80
80
 
81
- var css_248z$2d = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link__text {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
81
+ var css_248z$25 = "@layer kol-theme-component {\n @layer kol-theme-component {\n .kol-table {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n overflow-x: auto;\n overflow-y: hidden;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table, .kol-table__caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n }\n .kol-table__caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__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 .kol-table__cell {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--header {\n font-weight: normal;\n color: var(--color-primary);\n background-color: var(--color-light);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__spacer-line {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n .kol-table__spacer-line--foot {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__spacer-line--head {\n border-top-width: calc(var(--border-width) * 2);\n }\n .kol-table__row--body:nth-child(even) {\n background-color: var(--color-mute);\n }\n .kol-table__selection-input: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 .kol-table__selection-input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-table__selection-input--radio {\n display: flex;\n border-color: var(--color-subtle);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-primary);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-primary);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-table__selection-icon {\n color: var(--color-light);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox, .kol-table__selection-input--checkbox:hover {\n border-color: var(--color-primary);\n }\n }\n .kol-table-stateful__pagination {\n font-family: var(--font-family);\n hyphens: var(--hyphens);\n line-height: var(--line-height);\n word-break: break-word;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
82
82
 
83
- 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 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 .main-button :is(a, button) > .kol-span-wc {\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n }\n .secondary-button :is(a, button) > .kol-span-wc {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-button--secondary, .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-button--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button__text:hover {\n box-shadow: 0 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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button:focus {\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 .kol-button:disabled:hover .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-button .badge-text-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}";
83
+ var css_248z$24 = "@layer kol-theme-component {\n .kol-table {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n overflow-x: auto;\n overflow-y: hidden;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table, .kol-table__caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n }\n .kol-table__caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__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 .kol-table__cell {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--header {\n font-weight: normal;\n color: var(--color-primary);\n background-color: var(--color-light);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__spacer-line {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n .kol-table__spacer-line--foot {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__spacer-line--head {\n border-top-width: calc(var(--border-width) * 2);\n }\n .kol-table__row--body:nth-child(even) {\n background-color: var(--color-mute);\n }\n .kol-table__selection-input: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 .kol-table__selection-input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-table__selection-input--radio {\n display: flex;\n border-color: var(--color-subtle);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-primary);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-primary);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-table__selection-icon {\n color: var(--color-light);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox, .kol-table__selection-input--checkbox:hover {\n border-color: var(--color-primary);\n }\n}";
84
84
 
85
- var css_248z$2b = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .kol-button,\n th[aria-sort=descending] .kol-button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
85
+ var css_248z$23 = "@layer kol-theme-component {\n .kol-tabs {\n font-family: var(--font-family);\n display: grid;\n grid-template-rows: var(--grid-template-rows);\n grid-template-columns: var(--grid-template-columns);\n }\n .kol-tabs--align-right {\n --display: grid;\n --grid-template-columns: 1fr auto;\n --button-group-display: grid;\n --button-group-order: 1;\n }\n .kol-tabs--align-left {\n --display: grid;\n --grid-template-columns: auto 1fr;\n --button-group-order: 0;\n }\n .kol-tabs--align-bottom {\n --display: flex;\n --grid-template-rows: 1fr auto;\n --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n --button-group-order: 1;\n }\n .kol-tabs--align-top {\n --display: flex;\n --grid-template-rows: auto 1fr;\n --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n --button-group-order: 0;\n }\n .kol-tabs__button-group {\n display: var(--display);\n flex-wrap: wrap;\n gap: var(--button-group-gap);\n order: var(--button-group-order);\n }\n .kol-tabs .kol-button {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n border: none;\n font-style: normal;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n }\n .kol-tabs .kol-button:hover {\n color: var(--color-primary);\n }\n .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n color: var(--color-primary);\n }\n .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n padding-bottom: 0.25em;\n }\n .kol-tabs .kol-button.selected .kol-span__container {\n border-bottom: 0.25em solid;\n }\n .kol-tabs .kol-button .kol-span__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-icon {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs__content {\n padding: 0.25em 0;\n }\n .kol-tabs__panel {\n height: 100%;\n }\n .kol-tabs .kol-button-wc {\n width: 100%;\n }\n}";
86
86
 
87
- var css_248z$2a = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .kol-button,\n th[aria-sort=descending] .kol-button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
87
+ var css_248z$22 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
88
88
 
89
- 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}";
89
+ var css_248z$21 = "@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item {\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
90
90
 
91
- var css_248z$28 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
91
+ var css_248z$20 = "@layer kol-theme-component {\n .kol-toolbar {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n background-color: var(--color-light);\n border-width: var(--border-width);\n border-style: solid;\n }\n}";
92
92
 
93
- var css_248z$27 = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n }\n .toast {\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
93
+ var css_248z$1$ = "@layer kol-theme-component {\n .kol-tree-item__link {\n display: block;\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-tree-item__link .kol-link {\n display: block;\n color: var(--color-text);\n text-decoration: none;\n text-align: left;\n }\n .kol-tree-item__link:hover, .kol-tree-item__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 .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n outline-offset: 0;\n color: var(--color-light);\n }\n .kol-tree-item__link--active {\n background-color: var(--color-primary);\n }\n .kol-tree-item__link--active .kol-link {\n color: var(--color-light);\n }\n .kol-tree-item__toggle-button {\n display: inline-block;\n }\n .kol-tree-item__toggle-button:hover {\n transform: scale(1.3);\n }\n}";
94
94
 
95
- 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}";
96
-
97
- 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}";
98
-
99
- 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}";
95
+ var css_248z$1_ = "@layer kol-theme-component {\n .kol-tree__treeview-navigation {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-radius: var(--border-radius);\n }\n .kol-tree:focus-within {\n outline: 0;\n }\n .kol-tree:focus-within ul {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n }\n}";
100
96
 
101
97
  const DEFAULT = KoliBri.createTheme('default', {
102
- GLOBAL: css_248z$2L,
103
- 'KOL-ACCORDION': css_248z$2K,
104
- 'KOL-ALERT': css_248z$2J,
105
- 'KOL-AVATAR': css_248z$2I,
106
- 'KOL-BADGE': css_248z$2H,
107
- 'KOL-BREADCRUMB': css_248z$2G,
108
- 'KOL-BUTTON': css_248z$2F,
109
- 'KOL-BUTTON-GROUP': css_248z$2E,
110
- 'KOL-BUTTON-LINK': css_248z$2D,
111
- 'KOL-CARD': css_248z$2C,
112
- 'KOL-COMBOBOX': css_248z$2B,
113
- 'KOL-DETAILS': css_248z$2A,
114
- 'KOL-DRAWER': css_248z$2z,
115
- 'KOL-FORM': css_248z$2y,
116
- 'KOL-HEADING': css_248z$2x,
117
- 'KOL-INDENTED-TEXT': css_248z$2w,
118
- 'KOL-INPUT-CHECKBOX': css_248z$2v,
119
- 'KOL-INPUT-COLOR': css_248z$2u,
120
- 'KOL-INPUT-DATE': css_248z$2t,
121
- 'KOL-INPUT-EMAIL': css_248z$2s,
122
- 'KOL-INPUT-FILE': css_248z$2r,
123
- 'KOL-INPUT-NUMBER': css_248z$2q,
124
- 'KOL-INPUT-PASSWORD': css_248z$2p,
125
- 'KOL-INPUT-RADIO': css_248z$2o,
126
- 'KOL-INPUT-RANGE': css_248z$2n,
127
- 'KOL-INPUT-TEXT': css_248z$2m,
128
- 'KOL-KOLIBRI': css_248z$2l,
129
- 'KOL-LINK': css_248z$2j,
130
- 'KOL-LINK-BUTTON': css_248z$2k,
131
- 'KOL-NAV': css_248z$2i,
132
- 'KOL-PAGINATION': css_248z$2h,
133
- 'KOL-PROGRESS': css_248z$2g,
134
- 'KOL-SELECT': css_248z$2f,
135
- 'KOL-SINGLE-SELECT': css_248z$2e,
136
- 'KOL-SKIP-NAV': css_248z$2d,
137
- 'KOL-SPLIT-BUTTON': css_248z$2c,
138
- 'KOL-TABLE-STATEFUL': css_248z$2b,
139
- 'KOL-TABLE-STATELESS': css_248z$2a,
140
- 'KOL-TABS': css_248z$29,
141
- 'KOL-TEXTAREA': css_248z$28,
142
- 'KOL-TOAST-CONTAINER': css_248z$27,
143
- 'KOL-TOOLBAR': css_248z$26,
144
- 'KOL-TREE': css_248z$24,
145
- 'KOL-TREE-ITEM': css_248z$25,
98
+ GLOBAL: css_248z$2D,
99
+ 'KOL-ACCORDION': css_248z$2C,
100
+ 'KOL-ALERT': css_248z$2B,
101
+ 'KOL-AVATAR': css_248z$2A,
102
+ 'KOL-BADGE': css_248z$2z,
103
+ 'KOL-BREADCRUMB': css_248z$2y,
104
+ 'KOL-BUTTON': css_248z$2x,
105
+ 'KOL-BUTTON-LINK': css_248z$2w,
106
+ 'KOL-CARD': css_248z$2v,
107
+ 'KOL-COMBOBOX': css_248z$2u,
108
+ 'KOL-DETAILS': css_248z$2t,
109
+ 'KOL-DRAWER': css_248z$2s,
110
+ 'KOL-FORM': css_248z$2r,
111
+ 'KOL-HEADING': css_248z$2q,
112
+ 'KOL-INPUT-CHECKBOX': css_248z$2p,
113
+ 'KOL-INPUT-COLOR': css_248z$2o,
114
+ 'KOL-INPUT-DATE': css_248z$2n,
115
+ 'KOL-INPUT-EMAIL': css_248z$2m,
116
+ 'KOL-INPUT-FILE': css_248z$2l,
117
+ 'KOL-INPUT-NUMBER': css_248z$2k,
118
+ 'KOL-INPUT-PASSWORD': css_248z$2j,
119
+ 'KOL-INPUT-RADIO': css_248z$2i,
120
+ 'KOL-INPUT-RANGE': css_248z$2h,
121
+ 'KOL-INPUT-TEXT': css_248z$2g,
122
+ 'KOL-KOLIBRI': css_248z$2f,
123
+ 'KOL-LINK': css_248z$2d,
124
+ 'KOL-LINK-BUTTON': css_248z$2e,
125
+ 'KOL-NAV': css_248z$2c,
126
+ 'KOL-PAGINATION': css_248z$2b,
127
+ 'KOL-PROGRESS': css_248z$2a,
128
+ 'KOL-SELECT': css_248z$29,
129
+ 'KOL-SINGLE-SELECT': css_248z$28,
130
+ 'KOL-SKIP-NAV': css_248z$27,
131
+ 'KOL-SPLIT-BUTTON': css_248z$26,
132
+ 'KOL-TABLE-STATEFUL': css_248z$25,
133
+ 'KOL-TABLE-STATELESS': css_248z$24,
134
+ 'KOL-TABS': css_248z$23,
135
+ 'KOL-TEXTAREA': css_248z$22,
136
+ 'KOL-TOAST-CONTAINER': css_248z$21,
137
+ 'KOL-TOOLBAR': css_248z$20,
138
+ 'KOL-TREE': css_248z$1_,
139
+ 'KOL-TREE-ITEM': css_248z$1$,
146
140
  });
147
141
 
148
- 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}";
149
-
150
- var css_248z$22 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion {\n background-color: var(--color-grey-5);\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button button {\n text-align: left;\n width: 100%;\n padding: 0 var(--spacing-m);\n display: flex;\n place-items: center;\n line-height: 1.2;\n }\n .kol-accordion__heading-button button span {\n color: var(--color-grey);\n font-weight: var(--font-weight-bold);\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n width: 100%;\n border: none;\n }\n .kol-accordion__heading-button button:focus, .kol-accordion__heading-button button:hover {\n background-color: var(--color-grey-25);\n }\n .kol-accordion__heading-button button:focus {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-icon {\n margin-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n margin-inline-end: calc(16rem / var(--kolibri-root-font-size, 16));\n margin-inline-start: 0;\n margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__content {\n padding: var(--spacing-s) var(--spacing-m);\n }\n}";
151
-
152
- var css_248z$21 = "@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
153
-
154
- var css_248z$20 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
155
-
156
- var css_248z$1$ = "@layer kol-theme-component {\n .kol-badge {\n font: normal normal var(--font-weight) 1em var(--font-family);\n padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n text-transform: uppercase;\n }\n}";
157
-
158
- var css_248z$1_ = "@layer kol-theme-component {\n .kol-breadcrumb {\n font: normal normal 400 calc(14rem / var(--kolibri-root-font-size, 16))/calc(16rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: var(--font-weight-bold);\n }\n .kol-breadcrumb__icon::part(icon separator)::before {\n color: var(--color-blue);\n }\n .kol-breadcrumb__icon[exportparts*=separator] {\n margin-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n margin-inline-start: calc(8rem / var(--kolibri-root-font-size, 16));\n padding: 0;\n }\n .kol-breadcrumb__list-element:last-child {\n color: var(--color-grey-75);\n }\n .kol-breadcrumb__link {\n font-family: var(--font-family);\n }\n}";
159
-
160
- var css_248z$1Z = "@layer kol-theme-component {\n .kol-button {\n font-family: var(--font-family);\n appearance: none;\n outline: none;\n text-decoration: none;\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button:focus {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary: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: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: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: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:hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n border-radius: 0;\n border-style: solid;\n border-width: 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 .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n}";
142
+ var css_248z$1Z = "@layer kol-theme-global {\n .kol-tooltip__arrow {\n background-color: #626262;\n }\n .kol-tooltip__content {\n background-color: #f2f2f2;\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n border-radius: 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,\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}";
161
143
 
162
- 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}";
144
+ var css_248z$1Y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion {\n background-color: var(--color-grey-5);\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-button {\n text-align: left;\n width: 100%;\n padding: 0 var(--spacing-m);\n display: flex;\n place-items: center;\n line-height: 1.2;\n }\n .kol-accordion__heading-button .kol-button__text {\n color: var(--color-grey);\n font-weight: var(--font-weight-bold);\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n width: 100%;\n border: none;\n }\n .kol-accordion__heading-button .kol-button:focus, .kol-accordion__heading-button .kol-button:hover {\n background-color: var(--color-grey-25);\n }\n .kol-accordion__heading-button .kol-button:focus {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-icon {\n margin-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n margin-inline-end: calc(16rem / var(--kolibri-root-font-size, 16));\n margin-inline-start: 0;\n margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__content {\n padding: var(--spacing-s) var(--spacing-m);\n }\n}";
163
145
 
164
- var css_248z$1X = "@layer kol-theme-component {\n .kol-button {\n font-family: var(--font-family);\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-button:hover {\n color: var(--color-blue-130);\n }\n .badge-text-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
146
+ var css_248z$1X = "@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
165
147
 
166
- 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}";
148
+ var css_248z$1W = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
167
149
 
168
- var css_248z$1V = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
150
+ var css_248z$1V = "@layer kol-theme-component {\n .kol-badge {\n font: normal normal var(--font-weight) 1em var(--font-family);\n padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n text-transform: uppercase;\n }\n}";
169
151
 
170
- 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}";
152
+ var css_248z$1U = "@layer kol-theme-component {\n .kol-breadcrumb {\n font: normal normal 400 calc(14rem / var(--kolibri-root-font-size, 16))/calc(16rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: var(--font-weight-bold);\n }\n .kol-breadcrumb__icon::part(icon separator)::before {\n color: var(--color-blue);\n }\n .kol-breadcrumb__icon[exportparts*=separator] {\n margin-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n margin-inline-start: calc(8rem / var(--kolibri-root-font-size, 16));\n padding: 0;\n }\n .kol-breadcrumb__list-element:last-child {\n color: var(--color-grey-75);\n }\n .kol-breadcrumb__link {\n font-family: var(--font-family);\n }\n}";
171
153
 
172
- 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}";
154
+ var css_248z$1T = "@layer kol-theme-component {\n .kol-button {\n font-family: var(--font-family);\n appearance: none;\n outline: none;\n text-decoration: none;\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button:focus {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary: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: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: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: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:hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n border-radius: 0;\n border-style: solid;\n border-width: 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 .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: calc(-6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n}";
173
155
 
174
- var css_248z$1S = "@layer kol-theme-component {\n .kol-link {\n font-family: var(--font-family);\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n :host {\n font-family: var(--font-family);\n width: 100%;\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form__link {\n display: inline-block;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n }\n .kol-alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
156
+ var css_248z$1S = "@layer kol-theme-component {\n .kol-button {\n font-family: var(--font-family);\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-button:hover {\n color: var(--color-blue-130);\n }\n .badge-text-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
175
157
 
176
- 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}";
158
+ var css_248z$1R = "@layer kol-theme-component {\n .kol-card {\n font-family: var(--font-family);\n display: grid;\n width: 100%;\n height: 100%;\n background-color: white;\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n .kol-card__headline {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75em;\n }\n .kol-card__header {\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n overflow: hidden;\n }\n}";
177
159
 
178
- 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}";
160
+ var css_248z$1Q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
179
161
 
180
- var css_248z$1P = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
162
+ var css_248z$1P = "@layer kol-theme-component {\n .kol-details {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button:focus-within {\n cursor: pointer;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: #000;\n }\n .kol-details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button .kol-span__container {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .kol-details__content.indented-text {\n font-family: var(--font-family);\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n margin: 0;\n }\n}";
181
163
 
182
- var css_248z$1O = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
164
+ var css_248z$1O = "@layer kol-theme-component {\n .kol-drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
183
165
 
184
- var css_248z$1N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
166
+ var css_248z$1N = "@layer kol-theme-component {\n .kol-link {\n font-family: var(--font-family);\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form {\n font-family: var(--font-family);\n width: 100%;\n }\n .kol-form__link {\n display: inline-block;\n }\n .kol-form__mandatory-fields-hint {\n font-family: var(--font-family);\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n }\n .kol-form__alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
185
167
 
186
- var css_248z$1M = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
168
+ var css_248z$1M = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-headline--h1 {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n }\n .kol-headline--h2 {\n font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n line-height: 1.143;\n }\n .kol-headline--h3 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1667;\n }\n .kol-headline--h4 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .kol-headline--h5 {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n .kol-headline--h6 {\n color: rgb(234, 0, 255);\n }\n}";
187
169
 
188
- var css_248z$1L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
170
+ var css_248z$1L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
189
171
 
190
172
  var css_248z$1K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
191
173
 
192
174
  var css_248z$1J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
193
175
 
194
- var css_248z$1I = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .input-slot {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n fieldset .kol-alert {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:focus {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
176
+ var css_248z$1I = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
195
177
 
196
178
  var css_248z$1H = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
197
179
 
198
180
  var css_248z$1G = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
199
181
 
200
- var css_248z$1F = "@layer kol-theme-component {\n .kol-link {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n color: var(--color-blue);\n text-decoration: underline;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n}";
182
+ var css_248z$1F = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
201
183
 
202
- var css_248z$1E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
184
+ var css_248z$1E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .input-slot {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n fieldset .kol-alert {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:focus {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
203
185
 
204
- var css_248z$1D = "@layer kol-theme-component {\n .kol-link {\n font-family: var(--font-family);\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n}";
186
+ var css_248z$1D = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
205
187
 
206
- 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,\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):focus-within .kol-span-wc {\n border-color: var(--color-white);\n }\n :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc,\n :is(.kol-button-wc, .kol-link):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}";
188
+ var css_248z$1C = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
207
189
 
208
- var css_248z$1B = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .kol-button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n .kol-button__text {\n background-color: var(--color-yellow);\n border: 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 .kol-button:not(:disabled):hover .kol-button__text {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .kol-button:focus .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n opacity: 1;\n text-decoration: underline;\n }\n .kol-button:disabled .kol-button__text {\n cursor: not-allowed;\n opacity: 0.5;\n }\n}";
190
+ var css_248z$1B = "@layer kol-theme-component {\n .kol-link {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n color: var(--color-blue);\n text-decoration: underline;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n}";
209
191
 
210
- 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}";
192
+ var css_248z$1A = "@layer kol-theme-component {\n .kol-kolibri {\n font-family: var(--font-family);\n }\n}";
211
193
 
212
- var css_248z$1z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
194
+ var css_248z$1z = "@layer kol-theme-component {\n .kol-link {\n font-family: var(--font-family);\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n}";
213
195
 
214
- var css_248z$1y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n display: inline-flex;\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .single-select__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n cursor: pointer;\n padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 1rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n }\n .single-select__item {\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: 1em;\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
196
+ var css_248z$1y = "@layer kol-theme-component {\n .kol-nav {\n font-family: var(--font-family);\n }\n .kol-nav__navigation {\n background-color: var(--color-blue);\n }\n .kol-nav__list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list-item {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n }\n .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-nav__expand-button .kol-button {\n background-color: var(--color-blue-130);\n margin: auto;\n height: 100%;\n }\n .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .kol-link {\n text-decoration: none;\n }\n .kol-span {\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 :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}";
215
197
 
216
- var css_248z$1x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link__text {\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}";
198
+ var css_248z$1x = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .kol-button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n .kol-button__text {\n background-color: var(--color-yellow);\n border: 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 .kol-button:not(:disabled):hover .kol-button__text {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .kol-button:focus .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n opacity: 1;\n text-decoration: underline;\n }\n .kol-button:disabled .kol-button__text {\n cursor: not-allowed;\n opacity: 0.5;\n }\n}";
217
199
 
218
- 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}";
200
+ var css_248z$1w = "@layer kol-theme-component {\n .kol-progress {\n font-family: var(--font-family);\n }\n .kol-progress__bar-progress {\n fill: var(--color-blue-130);\n }\n .kol-progress__cycle-background {\n stroke: var(--color-grey-25);\n }\n .kol-progress__cycle-progress {\n stroke: var(--color-blue-130);\n }\n}";
219
201
 
220
- 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 .kol-button {\n font-family: var(--font-family);\n appearance: none;\n outline: none;\n text-decoration: none;\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button:focus {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary: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: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: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: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:hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n border-radius: 0;\n border-style: solid;\n border-width: 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 .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n}";
202
+ var css_248z$1v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
221
203
 
222
- 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] .kol-button,\n th[aria-sort=descending] .kol-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}";
204
+ var css_248z$1u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n display: inline-flex;\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .single-select__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n cursor: pointer;\n padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 1rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n }\n .single-select__item {\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: 1em;\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
223
205
 
224
- 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] .kol-button,\n th[aria-sort=descending] .kol-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}";
206
+ var css_248z$1t = "@layer kol-theme-component {\n .kol-skip-nav {\n font-family: var(--font-family);\n }\n .kol-skip-nav .kol-link__text {\n border-radius: 0;\n border-style: solid;\n border-width: 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}";
225
207
 
226
- 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}";
208
+ var css_248z$1s = "@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}";
227
209
 
228
- var css_248z$1r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
210
+ var css_248z$1r = "@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,\n button .kol-span {\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 .kol-button {\n font-family: var(--font-family);\n appearance: none;\n outline: none;\n text-decoration: none;\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button:focus {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary: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: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: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: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:hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n border-radius: 0;\n border-style: solid;\n border-width: 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 .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: calc(-6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n}";
229
211
 
230
- var css_248z$1q = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert {\n font-family: var(--font-family);\n }\n .toast .kol-alert--msg {\n border: none;\n }\n .toast .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .toast .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .toast .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .toast .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .toast .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .toast .kol-alert__container {\n background-color: var(--color-white);\n }\n .toast .kol-alert--card .toast .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--msg .toast .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .toast .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--card .toast .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--msg .toast .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .toast .kol-alert--card .toast .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--card .toast .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .alert {\n display: block;\n }\n}";
212
+ var css_248z$1q = "@layer kol-theme-component {\n @layer kol-theme-component {\n .kol-table {\n display: block;\n font-family: var(--font-family);\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n background-color: var(--color-white);\n font-weight: normal;\n color: var(--color-midnight);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 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 .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--radio:hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\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, .kol-table__selection-input--checkbox:hover {\n border-color: var(--color-blue);\n }\n }\n .kol-table-stateful {\n font-family: var(--font-family);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-table-stateful__pagination {\n overflow-x: auto;\n overflow-y: hidden;\n grid-auto-flow: column;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}";
231
213
 
232
- 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}";
214
+ var css_248z$1p = "@layer kol-theme-component {\n .kol-table {\n display: block;\n font-family: var(--font-family);\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n background-color: var(--color-white);\n font-weight: normal;\n color: var(--color-midnight);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 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 .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--radio:hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\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, .kol-table__selection-input--checkbox:hover {\n border-color: var(--color-blue);\n }\n}";
233
215
 
234
- var css_248z$1o = "@layer kol-theme-component {\n .tree ul {\n display: flex;\n flex-direction: column;\n }\n}";
216
+ var css_248z$1o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs__button-group {\n border-bottom: 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 .kol-tabs .kol-button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n color: var(--color-blue-130);\n }\n .kol-tabs .kol-button:focus .kol-span {\n outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button.selected .kol-span {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 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 .kol-tabs .kol-button .kol-span {\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}";
235
217
 
236
- 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}";
218
+ var css_248z$1n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
237
219
 
238
- const ECL_EC = KoliBri.createTheme('ecl-ec', {
239
- GLOBAL: css_248z$23,
240
- 'KOL-HEADING': css_248z$1R,
241
- 'KOL-ACCORDION': css_248z$22,
242
- 'KOL-INDENTED-TEXT': css_248z$1Q,
243
- 'KOL-BUTTON': css_248z$1Z,
244
- 'KOL-LINK-BUTTON': css_248z$1F,
245
- 'KOL-BADGE': css_248z$1$,
246
- 'KOL-ALERT': css_248z$21,
247
- 'KOL-AVATAR': css_248z$20,
248
- 'KOL-TABS': css_248z$1s,
249
- 'KOL-LINK': css_248z$1D,
250
- 'KOL-BUTTON-LINK': css_248z$1X,
251
- 'KOL-BREADCRUMB': css_248z$1_,
252
- 'KOL-DETAILS': css_248z$1U,
253
- 'KOL-DRAWER': css_248z$1T,
254
- 'KOL-PROGRESS': css_248z$1A,
255
- 'KOL-SPIN': css_248z$1w,
256
- 'KOL-SINGLE-SELECT': css_248z$1y,
257
- 'KOL-PAGINATION': css_248z$1B,
258
- 'KOL-INPUT-CHECKBOX': css_248z$1P,
259
- 'KOL-INPUT-COLOR': css_248z$1O,
260
- 'KOL-CARD': css_248z$1W,
261
- 'KOL-COMBOBOX': css_248z$1V,
262
- 'KOL-BUTTON-GROUP': css_248z$1Y,
263
- 'KOL-INPUT-RADIO': css_248z$1I,
264
- 'KOL-INPUT-RANGE': css_248z$1H,
265
- 'KOL-INPUT-TEXT': css_248z$1G,
266
- 'KOL-KOLIBRI': css_248z$1E,
267
- 'KOL-INPUT-PASSWORD': css_248z$1J,
268
- 'KOL-INPUT-NUMBER': css_248z$1K,
269
- 'KOL-INPUT-DATE': css_248z$1N,
270
- 'KOL-INPUT-EMAIL': css_248z$1M,
271
- 'KOL-INPUT-FILE': css_248z$1L,
272
- 'KOL-SELECT': css_248z$1z,
273
- 'KOL-TEXTAREA': css_248z$1r,
274
- 'KOL-TABLE-STATEFUL': css_248z$1u,
275
- 'KOL-TABLE-STATELESS': css_248z$1t,
276
- 'KOL-NAV': css_248z$1C,
277
- 'KOL-SKIP-NAV': css_248z$1x,
278
- 'KOL-SPLIT-BUTTON': css_248z$1v,
279
- 'KOL-TOAST-CONTAINER': css_248z$1q,
280
- 'KOL-TOOLBAR': css_248z$1p,
281
- 'KOL-TREE': css_248z$1o,
282
- 'KOL-TREE-ITEM': css_248z$1n,
283
- 'KOL-FORM': css_248z$1S,
284
- });
220
+ var css_248z$1m = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .kol-toast-item {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert {\n font-family: var(--font-family);\n }\n .kol-toast-item .kol-alert--msg {\n border: none;\n }\n .kol-toast-item .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-toast-item .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-toast-item .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-toast-item .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-toast-item .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-toast-item .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-toast-item .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item__alert {\n display: block;\n }\n}";
285
221
 
286
- 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}";
222
+ var css_248z$1l = "@layer kol-theme-component {\n .kol-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}";
287
223
 
288
- var css_248z$1l = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion {\n border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n margin: 0;\n overflow: hidden;\n }\n .kol-accordion__heading {\n font-size: 2em;\n }\n .kol-accordion__heading-button button {\n border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n outline-offset: calc(-1rem / var(--kolibri-root-font-size, 16));\n border: 0;\n border-bottom-color: #cfdaf5;\n border-bottom-style: solid;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n color: #171a22;\n position: relative;\n display: block;\n font: normal normal 400 calc(18rem / var(--kolibri-root-font-size, 16))/calc(28rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n padding: calc(24rem / var(--kolibri-root-font-size, 16));\n text-align: start;\n width: 100%;\n line-height: 1.2;\n }\n .kol-accordion__heading-button button .button-inner > span {\n align-items: baseline;\n }\n .kol-accordion__heading-button button::before {\n background-color: #fc0;\n border-end-end-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n height: calc(4rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n left: calc(24rem / var(--kolibri-root-font-size, 16));\n top: 0;\n width: 3rem 2;\n }\n .kol-accordion__heading-button .kol-icon {\n margin-right: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-icon::part(icon)::before {\n color: #0e47cb;\n font-weight: 900;\n font-family: \"Font Awesome 6 Free\";\n }\n .kol-accordion__content {\n -webkit-border-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-margin-start: 0;\n border-bottom: calc(2rem / var(--kolibri-root-font-size, 16)) solid #cfdaf5;\n border-inline-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n color: #515560;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(24rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n margin-inline-start: 0;\n padding: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .open .kol-accordion__heading-button button {\n border-start-end-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n border-start-start-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .open .kol-accordion__heading-button .kol-icon::part(icon)::before {\n content: \"\\f077\";\n }\n :not(.open) .kol-accordion__heading-button button .kol-icon::part(icon)::before {\n content: \"\\f078\";\n }\n}";
224
+ var css_248z$1k = "@layer kol-theme-component {\n .kol-tree__treeview-navigation {\n display: flex;\n flex-direction: column;\n }\n}";
289
225
 
290
- var css_248z$1k = "@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
226
+ var css_248z$1j = "@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: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-tree-item__link:hover, .kol-tree-item__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 .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n color: var(--color-black);\n }\n .kol-tree-item__link--active {\n font-weight: 700;\n background-color: var(--color-yellow);\n }\n .kol-tree-item__link--active .kol-link {\n color: var(--color-black);\n background-color: var(--color-yellow);\n }\n .kol-tree-item__link .kol-link {\n display: block;\n color: var(--color-black);\n text-decoration: none;\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 display: inline-block;\n }\n .kol-tree-item__toggle-button:hover {\n transform: scale(1.3);\n }\n}";
291
227
 
292
- var css_248z$1j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
228
+ const ECL_EC = KoliBri.createTheme('ecl-ec', {
229
+ GLOBAL: css_248z$1Z,
230
+ 'KOL-HEADING': css_248z$1M,
231
+ 'KOL-ACCORDION': css_248z$1Y,
232
+ 'KOL-BUTTON': css_248z$1T,
233
+ 'KOL-LINK-BUTTON': css_248z$1B,
234
+ 'KOL-BADGE': css_248z$1V,
235
+ 'KOL-ALERT': css_248z$1X,
236
+ 'KOL-AVATAR': css_248z$1W,
237
+ 'KOL-TABS': css_248z$1o,
238
+ 'KOL-LINK': css_248z$1z,
239
+ 'KOL-BUTTON-LINK': css_248z$1S,
240
+ 'KOL-BREADCRUMB': css_248z$1U,
241
+ 'KOL-DETAILS': css_248z$1P,
242
+ 'KOL-DRAWER': css_248z$1O,
243
+ 'KOL-PROGRESS': css_248z$1w,
244
+ 'KOL-SPIN': css_248z$1s,
245
+ 'KOL-SINGLE-SELECT': css_248z$1u,
246
+ 'KOL-PAGINATION': css_248z$1x,
247
+ 'KOL-INPUT-CHECKBOX': css_248z$1L,
248
+ 'KOL-INPUT-COLOR': css_248z$1K,
249
+ 'KOL-CARD': css_248z$1R,
250
+ 'KOL-COMBOBOX': css_248z$1Q,
251
+ 'KOL-INPUT-RADIO': css_248z$1E,
252
+ 'KOL-INPUT-RANGE': css_248z$1D,
253
+ 'KOL-INPUT-TEXT': css_248z$1C,
254
+ 'KOL-KOLIBRI': css_248z$1A,
255
+ 'KOL-INPUT-PASSWORD': css_248z$1F,
256
+ 'KOL-INPUT-NUMBER': css_248z$1G,
257
+ 'KOL-INPUT-DATE': css_248z$1J,
258
+ 'KOL-INPUT-EMAIL': css_248z$1I,
259
+ 'KOL-INPUT-FILE': css_248z$1H,
260
+ 'KOL-SELECT': css_248z$1v,
261
+ 'KOL-TEXTAREA': css_248z$1n,
262
+ 'KOL-TABLE-STATEFUL': css_248z$1q,
263
+ 'KOL-TABLE-STATELESS': css_248z$1p,
264
+ 'KOL-NAV': css_248z$1y,
265
+ 'KOL-SKIP-NAV': css_248z$1t,
266
+ 'KOL-SPLIT-BUTTON': css_248z$1r,
267
+ 'KOL-TOAST-CONTAINER': css_248z$1m,
268
+ 'KOL-TOOLBAR': css_248z$1l,
269
+ 'KOL-TREE': css_248z$1k,
270
+ 'KOL-TREE-ITEM': css_248z$1j,
271
+ 'KOL-FORM': css_248z$1N,
272
+ });
293
273
 
294
- var css_248z$1i = "@layer kol-theme-component {\n .kol-badge {\n font: normal normal var(--font-weight) calc(14rem / var(--kolibri-root-font-size, 16))/1em var(--font-family);\n font-family: var(--font-family);\n padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n text-transform: uppercase;\n }\n}";
274
+ var css_248z$1i = "@layer kol-theme-global {\n .kol-tooltip__arrow {\n background-color: #626262;\n }\n .kol-tooltip__content {\n background-color: #f2f2f2;\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n border-radius: 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,\n .kol-span__container {\n gap: 0.5em;\n }\n .required label span::after,\n .required legend span::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n p.l,\n p.lead {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n p,\n p.m,\n p.medium {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n p.s,\n p.small {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n p.xs,\n p.extra-small {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n}";
295
275
 
296
- var css_248z$1h = "@layer kol-theme-component {\n .kol-breadcrumb {\n font-family: var(--font-family);\n }\n .kol-breadcrumb__link {\n font-family: var(--font-family);\n }\n}";
276
+ var css_248z$1h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion {\n border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n margin: 0;\n overflow: hidden;\n }\n .kol-accordion__heading {\n font-size: 2em;\n }\n .kol-accordion__heading-button .kol-button {\n border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n outline-offset: calc(-1rem / var(--kolibri-root-font-size, 16));\n border: 0;\n border-bottom-color: #cfdaf5;\n border-bottom-style: solid;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n color: #171a22;\n position: relative;\n display: block;\n font: normal normal 400 calc(18rem / var(--kolibri-root-font-size, 16))/calc(28rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n padding: calc(24rem / var(--kolibri-root-font-size, 16));\n text-align: start;\n width: 100%;\n line-height: 1.2;\n }\n .kol-accordion__heading-button .kol-button__text {\n align-items: baseline;\n }\n .kol-accordion__heading-button .kol-button::before {\n background-color: #fc0;\n border-end-end-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n height: calc(4rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n left: calc(24rem / var(--kolibri-root-font-size, 16));\n top: 0;\n width: 3rem 2;\n }\n .kol-accordion__heading-button .kol-icon {\n margin-right: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-icon::part(icon)::before {\n color: #0e47cb;\n font-weight: 900;\n font-family: \"Font Awesome 6 Free\";\n }\n .kol-accordion__content {\n -webkit-border-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-margin-start: 0;\n border-bottom: 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 .collapsible--open .kol-accordion__heading-button .kol-button {\n border-start-end-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n border-start-start-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .collapsible--open .kol-accordion__heading-button .kol-icon::part(icon)::before {\n content: \"\\f077\";\n }\n :not(.collapsible--open) .kol-accordion__heading-button .kol-button .kol-icon::part(icon)::before {\n content: \"\\f078\";\n }\n}";
297
277
 
298
- var css_248z$1g = "@layer kol-theme-component {\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n font-family: var(--font-family);\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n .kol-button--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-button--primary: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: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: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: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:hover {\n --text-color: #0e47cb;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button__text:active, .kol-button__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-button--secondary .kol-button__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n }\n .kol-button--secondary.button:focus-visible .kol-button__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n}";
278
+ var css_248z$1g = "@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
299
279
 
300
- var css_248z$1f = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n gap: var(--spacing-2xs);\n }\n}";
280
+ var css_248z$1f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
301
281
 
302
- var css_248z$1e = "@layer kol-theme-component {\n .kol-button {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-button:hover {\n color: var(--color-blue-130);\n }\n}";
282
+ var css_248z$1e = "@layer kol-theme-component {\n .kol-badge {\n font: normal normal var(--font-weight) calc(14rem / var(--kolibri-root-font-size, 16))/1em var(--font-family);\n font-family: var(--font-family);\n padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n text-transform: uppercase;\n }\n}";
303
283
 
304
- 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}";
284
+ var css_248z$1d = "@layer kol-theme-component {\n .kol-breadcrumb {\n font-family: var(--font-family);\n }\n .kol-breadcrumb__link {\n font-family: var(--font-family);\n }\n}";
305
285
 
306
- var css_248z$1c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-input .error {\n order: 1;\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .combobox {\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
286
+ var css_248z$1c = "@layer kol-theme-component {\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n font-family: var(--font-family);\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n .kol-button--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-button--primary: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: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: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: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:hover {\n --text-color: #0e47cb;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button__text:active, .kol-button__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-button--secondary .kol-button__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n }\n .kol-button--secondary.button:focus-visible .kol-button__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n}";
307
287
 
308
- 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}";
288
+ var css_248z$1b = "@layer kol-theme-component {\n .kol-button {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-button:hover {\n color: var(--color-blue-130);\n }\n}";
309
289
 
310
- var css_248z$1a = "@layer kol-theme-component {\n .kol-link {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n :host {\n font-family: var(--font-family);\n width: 100%;\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form__link {\n display: inline-block;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
290
+ var css_248z$1a = "@layer kol-theme-component {\n .kol-card {\n font-family: var(--font-family);\n display: grid;\n width: 100%;\n height: 100%;\n background-color: white;\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n .kol-card__headline {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75;\n }\n .kol-card__header {\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n overflow: hidden;\n }\n}";
311
291
 
312
- 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}";
292
+ var css_248z$19 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-input .error {\n order: 1;\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .combobox {\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
313
293
 
314
- 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}";
294
+ var css_248z$18 = "@layer kol-theme-component {\n .kol-details {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button:focus-within {\n cursor: pointer;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: #000;\n }\n .kol-details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button .kol-span__container {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .kol-details__content.indented-text {\n font-family: var(--font-family);\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n }\n}";
315
295
 
316
- 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}";
296
+ var css_248z$17 = "@layer kol-theme-component {\n .kol-link {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form {\n font-family: var(--font-family);\n width: 100%;\n }\n .kol-form__link {\n display: inline-block;\n }\n .kol-form__mandatory-fields-hint {\n font-family: var(--font-family);\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form__alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
317
297
 
318
- var css_248z$16 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
298
+ var css_248z$16 = "@layer kol-theme-component {\n .kol-drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
319
299
 
320
- var css_248z$15 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
300
+ var css_248z$15 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-headline--h1 {\n font-size: calc(42rem / var(--kolibri-root-font-size, 16));\n line-height: 3.25;\n }\n .kol-headline--h2 {\n font-size: calc(36rem / var(--kolibri-root-font-size, 16));\n line-height: 2.755;\n }\n .kol-headline--h3 {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n line-height: 2.5;\n }\n .kol-headline--h4 {\n font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n line-height: 2;\n }\n .kol-headline--h5 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n }\n .kol-headline--h6 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n }\n .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n font-weight: var(--font-weight-bold);\n }\n}";
321
301
 
322
- var css_248z$14 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
302
+ var css_248z$14 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
323
303
 
324
304
  var css_248z$13 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
325
305
 
@@ -329,129 +309,127 @@ var css_248z$11 = "@layer kol-theme-component {\n :host {\n font-family: var
329
309
 
330
310
  var css_248z$10 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
331
311
 
332
- var css_248z$$ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n fieldset .kol-alert {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:focus {\n outline-color: var(--color-blue);\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
312
+ var css_248z$$ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
333
313
 
334
- var css_248z$_ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
314
+ var css_248z$_ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
335
315
 
336
- var css_248z$Z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
316
+ var css_248z$Z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n fieldset .kol-alert {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:focus {\n outline-color: var(--color-blue);\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
337
317
 
338
- var css_248z$Y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
318
+ var css_248z$Y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
339
319
 
340
- var css_248z$X = "@layer kol-theme-component {\n .kol-link {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n font-family: var(--font-family);\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n .kol-link--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-link--primary: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: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: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: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:hover {\n --text-color: #0e47cb;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link__text {\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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-link__text:active, .kol-link__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-link--secondary .kol-link__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n }\n .kol-link--secondary.button:focus-visible .kol-link__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-link:focus-visible .kol-link__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link--hide-label .kol-link__text .span-label {\n display: none;\n }\n}";
320
+ var css_248z$X = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
341
321
 
342
- var css_248z$W = "@layer kol-theme-component {\n .kol-link {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n :host {\n font-family: var(--font-family);\n }\n}";
322
+ var css_248z$W = "@layer kol-theme-component {\n .kol-kolibri {\n font-family: var(--font-family);\n }\n}";
343
323
 
344
- 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,\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):focus-within .kol-span-wc {\n border-color: var(--color-white);\n }\n :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc,\n :is(.kol-button-wc, .kol-link):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}";
324
+ var css_248z$V = "@layer kol-theme-component {\n .kol-link {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n font-family: var(--font-family);\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n .kol-link--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-link--primary: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: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: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: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:hover {\n --text-color: #0e47cb;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link__text {\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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-link__text:active, .kol-link__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-link--secondary .kol-link__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n }\n .kol-link--secondary.button:focus-visible .kol-link__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-link:focus-visible .kol-link__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link--hide-label .kol-link__text .kol-span__label {\n display: none;\n }\n}";
345
325
 
346
- var css_248z$U = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 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 .kol-button:focus-visible .kol-button__text {\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 .kol-button:not(:disabled):active .kol-button__text, .kol-button:not(:disabled):hover .kol-button__text {\n background-color: #fc0;\n border-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n font-weight: bold;\n text-decoration: underline;\n opacity: 1;\n }\n .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}";
326
+ var css_248z$U = "@layer kol-theme-component {\n .kol-link {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n :host {\n font-family: var(--font-family);\n }\n}";
347
327
 
348
- var css_248z$T = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
328
+ var css_248z$T = "@layer kol-theme-component {\n .kol-nav {\n font-family: var(--font-family);\n }\n .kol-nav__navigation {\n background-color: var(--color-blue);\n }\n .kol-nav__list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list-item {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n }\n .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-nav__expand-button .kol-button {\n background-color: var(--color-blue-130);\n margin: auto;\n height: 100%;\n }\n .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .kol-link {\n text-decoration: none;\n }\n .kol-span {\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 :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}";
349
329
 
350
- var css_248z$S = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
330
+ var css_248z$S = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 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 .kol-button:focus-visible .kol-button__text {\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 .kol-button:not(:disabled):active .kol-button__text, .kol-button:not(:disabled):hover .kol-button__text {\n background-color: #fc0;\n border-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n font-weight: bold;\n text-decoration: underline;\n opacity: 1;\n }\n .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}";
351
331
 
352
- var css_248z$R = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n position: relative;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .single-select__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 2.5rem);\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n cursor: pointer;\n padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n display: flex;\n align-items: flex-start;\n justify-items: center;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: 1em;\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
332
+ var css_248z$R = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
353
333
 
354
- var css_248z$Q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link__text {\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}";
334
+ var css_248z$Q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
355
335
 
356
- 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}";
336
+ var css_248z$P = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n position: relative;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .single-select__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 2.5rem);\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n cursor: pointer;\n padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n display: flex;\n align-items: flex-start;\n justify-items: center;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: 1em;\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
357
337
 
358
- 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 .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n font-family: var(--font-family);\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n .kol-button--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-button--primary: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: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: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: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:hover {\n --text-color: #0e47cb;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button__text:active, .kol-button__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-button--secondary .kol-button__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n }\n .kol-button--secondary.button:focus-visible .kol-button__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n}";
338
+ var css_248z$O = "@layer kol-theme-component {\n .kol-skip-nav {\n font-family: var(--font-family);\n }\n .kol-skip-nav .kol-link__text {\n border-radius: 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}";
359
339
 
360
- 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] .kol-button,\n th[aria-sort=descending] .kol-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}";
340
+ var css_248z$N = "@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}";
361
341
 
362
- 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] .kol-button,\n th[aria-sort=descending] .kol-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}";
342
+ var css_248z$M = "@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 .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n font-family: var(--font-family);\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n .kol-button--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-button--primary: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: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: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: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:hover {\n --text-color: #0e47cb;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\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 background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button__text:active, .kol-button__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-button--secondary .kol-button__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n }\n .kol-button--secondary.button:focus-visible .kol-button__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n}";
363
343
 
364
- 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}";
344
+ var css_248z$L = "@layer kol-theme-component {\n @layer kol-theme-component {\n .kol-table {\n display: block;\n font-family: var(--font-family);\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 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 .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n font-weight: normal;\n color: var(--color-midnight);\n background-color: var(--color-white);\n }\n .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n font-weight: 700;\n }\n .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input--radio:hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--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 .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, .kol-table__selection-input--checkbox:hover {\n border-color: var(--color-blue);\n }\n }\n .kol-table-stateful {\n font-family: var(--font-family);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-table-stateful__pagination {\n overflow-x: auto;\n overflow-y: hidden;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n grid-auto-flow: column;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}";
365
345
 
366
- var css_248z$K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
346
+ var css_248z$K = "@layer kol-theme-component {\n .kol-table {\n display: block;\n font-family: var(--font-family);\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 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 .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n font-weight: normal;\n color: var(--color-midnight);\n background-color: var(--color-white);\n }\n .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n font-weight: 700;\n }\n .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__selection-input--radio:hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--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 .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, .kol-table__selection-input--checkbox:hover {\n border-color: var(--color-blue);\n }\n}";
367
347
 
368
- var css_248z$J = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert {\n font-family: var(--font-family);\n }\n .toast .kol-alert--msg {\n border: none;\n }\n .toast .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .toast .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .toast .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .toast .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .toast .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .toast .kol-alert__container {\n background-color: var(--color-white);\n }\n .toast .kol-alert--card .toast .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--msg .toast .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .toast .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--card .toast .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--msg .toast .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .toast .kol-alert--card .toast .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--card .toast .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n .alert {\n display: block;\n }\n}";
348
+ var css_248z$J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs__button-group {\n border-bottom: 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 .kol-tabs .kol-button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n color: var(--color-blue-130);\n }\n .kol-tabs .kol-button:focus .kol-span {\n outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button.selected .kol-span {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 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 .kol-tabs .kol-button .kol-span {\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}";
369
349
 
370
- 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}";
350
+ var css_248z$I = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
371
351
 
372
- var css_248z$H = "@layer kol-theme-component {\n .tree ul {\n display: flex;\n flex-direction: column;\n }\n}";
352
+ var css_248z$H = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .kol-toast-item {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert {\n font-family: var(--font-family);\n }\n .kol-toast-item .kol-alert--msg {\n border: none;\n }\n .kol-toast-item .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-toast-item .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-toast-item .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-toast-item .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-toast-item .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-toast-item .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-toast-item .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item__alert {\n display: block;\n }\n .kol-toast-item .heading {\n width: 100%;\n }\n .kol-toast-item .heading .heading-content {\n flex: 1;\n }\n}";
373
353
 
374
- 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}";
354
+ var css_248z$G = "@layer kol-theme-component {\n .kol-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}";
375
355
 
376
- const ECL_EU = KoliBri.createTheme('ecl-eu', {
377
- GLOBAL: css_248z$1m,
378
- 'KOL-HEADING': css_248z$18,
379
- 'KOL-ACCORDION': css_248z$1l,
380
- 'KOL-INDENTED-TEXT': css_248z$17,
381
- 'KOL-BUTTON': css_248z$1g,
382
- 'KOL-LINK-BUTTON': css_248z$X,
383
- 'KOL-BUTTON-GROUP': css_248z$1f,
384
- 'KOL-PAGINATION': css_248z$U,
385
- 'KOL-PROGRESS': css_248z$T,
386
- 'KOL-NAV': css_248z$V,
387
- 'KOL-BADGE': css_248z$1i,
388
- 'KOL-ALERT': css_248z$1k,
389
- 'KOL-CARD': css_248z$1d,
390
- 'KOL-COMBOBOX': css_248z$1c,
391
- 'KOL-INPUT-CHECKBOX': css_248z$16,
392
- 'KOL-INPUT-COLOR': css_248z$15,
393
- 'KOL-INPUT-FILE': css_248z$12,
394
- 'KOL-INPUT-EMAIL': css_248z$13,
395
- 'KOL-INPUT-NUMBER': css_248z$11,
396
- 'KOL-INPUT-DATE': css_248z$14,
397
- 'KOL-INPUT-PASSWORD': css_248z$10,
398
- 'KOL-INPUT-TEXT': css_248z$Z,
399
- 'KOL-KOLIBRI': css_248z$Y,
400
- 'KOL-SELECT': css_248z$S,
401
- 'KOL-SINGLE-SELECT': css_248z$R,
402
- 'KOL-TEXTAREA': css_248z$K,
403
- 'KOL-TABLE-STATEFUL': css_248z$N,
404
- 'KOL-TABLE-STATELESS': css_248z$M,
405
- 'KOL-AVATAR': css_248z$1j,
406
- 'KOL-TABS': css_248z$L,
407
- 'KOL-LINK': css_248z$W,
408
- 'KOL-BUTTON-LINK': css_248z$1e,
409
- 'KOL-BREADCRUMB': css_248z$1h,
410
- 'KOL-DETAILS': css_248z$1b,
411
- 'KOL-DRAWER': css_248z$19,
412
- 'KOL-SPIN': css_248z$P,
413
- 'KOL-INPUT-RADIO': css_248z$$,
414
- 'KOL-INPUT-RANGE': css_248z$_,
415
- 'KOL-SKIP-NAV': css_248z$Q,
416
- 'KOL-SPLIT-BUTTON': css_248z$O,
417
- 'KOL-TOAST-CONTAINER': css_248z$J,
418
- 'KOL-TOOLBAR': css_248z$I,
419
- 'KOL-TREE': css_248z$H,
420
- 'KOL-TREE-ITEM': css_248z$G,
421
- 'KOL-FORM': css_248z$1a,
422
- });
356
+ var css_248z$F = "@layer kol-theme-component {\n .kol-tree__treeview-navigation {\n display: flex;\n flex-direction: column;\n }\n}";
423
357
 
424
- 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}";
358
+ var css_248z$E = "@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: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tree-item__link:hover, .kol-tree-item__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 .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n color: var(--color-black);\n }\n .kol-tree-item__link--active {\n background-color: var(--color-yellow);\n }\n .kol-tree-item__link--active .kol-link {\n background-color: var(--color-yellow);\n color: var(--color-black);\n }\n .kol-tree-item__link .kol-link {\n display: block;\n color: var(--color-black);\n text-decoration: none;\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 display: inline-block;\n color: var(--color-blue);\n }\n .kol-tree-item__toggle-button:hover {\n transform: scale(1.3);\n }\n}";
425
359
 
426
- var css_248z$E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n display: grid;\n border-color: var(--kolibri-border-color);\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n font-weight: 700;\n }\n .kol-accordion__heading-button button {\n font-size: inherit;\n line-height: 1.75;\n }\n .kol-accordion__heading-button button {\n font-weight: inherit;\n font-size: inherit;\n line-height: inherit;\n cursor: pointer;\n width: 100%;\n margin: 0;\n display: flex;\n gap: 0.5em;\n border: 0;\n align-items: center;\n overflow: hidden;\n background-color: transparent;\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-icon::part(icon) {\n color: var(--color-midnight);\n }\n .kol-accordion__heading-button .kol-icon::part(close)::before {\n font-family: \"Font Awesome 6 Free\";\n content: \"\\f077\";\n }\n .kol-accordion__heading-button .kol-icon::part(open)::before {\n font-family: \"Font Awesome 6 Free\";\n content: \"\\f078\";\n }\n .kol-accordion__heading {\n margin: 0;\n }\n .kol-accordion__content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .open .kol-accordion__heading-button button {\n padding-bottom: 0;\n }\n .open .kol-accordion__heading-button .kol-icon {\n width: 1em;\n }\n .open .kol-accordion__content {\n margin: 0;\n }\n}";
360
+ const ECL_EU = KoliBri.createTheme('ecl-eu', {
361
+ GLOBAL: css_248z$1i,
362
+ 'KOL-HEADING': css_248z$15,
363
+ 'KOL-ACCORDION': css_248z$1h,
364
+ 'KOL-BUTTON': css_248z$1c,
365
+ 'KOL-LINK-BUTTON': css_248z$V,
366
+ 'KOL-PAGINATION': css_248z$S,
367
+ 'KOL-PROGRESS': css_248z$R,
368
+ 'KOL-NAV': css_248z$T,
369
+ 'KOL-BADGE': css_248z$1e,
370
+ 'KOL-ALERT': css_248z$1g,
371
+ 'KOL-CARD': css_248z$1a,
372
+ 'KOL-COMBOBOX': css_248z$19,
373
+ 'KOL-INPUT-CHECKBOX': css_248z$14,
374
+ 'KOL-INPUT-COLOR': css_248z$13,
375
+ 'KOL-INPUT-FILE': css_248z$10,
376
+ 'KOL-INPUT-EMAIL': css_248z$11,
377
+ 'KOL-INPUT-NUMBER': css_248z$$,
378
+ 'KOL-INPUT-DATE': css_248z$12,
379
+ 'KOL-INPUT-PASSWORD': css_248z$_,
380
+ 'KOL-INPUT-TEXT': css_248z$X,
381
+ 'KOL-KOLIBRI': css_248z$W,
382
+ 'KOL-SELECT': css_248z$Q,
383
+ 'KOL-SINGLE-SELECT': css_248z$P,
384
+ 'KOL-TEXTAREA': css_248z$I,
385
+ 'KOL-TABLE-STATEFUL': css_248z$L,
386
+ 'KOL-TABLE-STATELESS': css_248z$K,
387
+ 'KOL-AVATAR': css_248z$1f,
388
+ 'KOL-TABS': css_248z$J,
389
+ 'KOL-LINK': css_248z$U,
390
+ 'KOL-BUTTON-LINK': css_248z$1b,
391
+ 'KOL-BREADCRUMB': css_248z$1d,
392
+ 'KOL-DETAILS': css_248z$18,
393
+ 'KOL-DRAWER': css_248z$16,
394
+ 'KOL-SPIN': css_248z$N,
395
+ 'KOL-INPUT-RADIO': css_248z$Z,
396
+ 'KOL-INPUT-RANGE': css_248z$Y,
397
+ 'KOL-SKIP-NAV': css_248z$O,
398
+ 'KOL-SPLIT-BUTTON': css_248z$M,
399
+ 'KOL-TOAST-CONTAINER': css_248z$H,
400
+ 'KOL-TOOLBAR': css_248z$G,
401
+ 'KOL-TREE': css_248z$F,
402
+ 'KOL-TREE-ITEM': css_248z$E,
403
+ 'KOL-FORM': css_248z$17,
404
+ });
427
405
 
428
- var css_248z$D = "@layer kol-theme-component {\n .kol-alert--default {\n --alert-border-color: var(--color-anthrazit);\n }\n .kol-alert--error {\n --alert-border-color: var(--color-rotton);\n }\n .kol-alert--info {\n --alert-border-color: var(--color-petrol);\n }\n .kol-alert--success {\n --alert-border-color: var(--color-gras);\n }\n .kol-alert--warning {\n --alert-border-color: var(--color-warn);\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n background-color: var(--alert-border-color);\n }\n}";
406
+ var css_248z$D = "@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,\n .kol-span__container {\n gap: 0.25em;\n }\n .kol-tooltip__arrow {\n background-color: #626262;\n }\n .kol-tooltip__content {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n background-color: #f2f2f2;\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}";
429
407
 
430
- var css_248z$C = "@layer kol-theme-component {\n .kol-badge {\n display: inline-flex;\n font-family: inherit;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__smart-button {\n border-left: calc(1rem / var(--kolibri-root-font-size, 16)) solid rgba(0, 0, 0, 0.25);\n }\n .kol-badge__smart-button .button {\n border-radius: 0 var(--spacing) var(--spacing) 0;\n }\n .kol-badge__label {\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label .kol-span__container {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
408
+ var css_248z$C = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n display: grid;\n border-color: var(--kolibri-border-color);\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n font-weight: 700;\n }\n .kol-accordion__heading-button button {\n font-size: inherit;\n line-height: 1.75;\n }\n .kol-accordion__heading-button .kol-button {\n font-weight: inherit;\n font-size: inherit;\n line-height: inherit;\n cursor: pointer;\n width: 100%;\n margin: 0;\n display: flex;\n gap: 0.5em;\n border: 0;\n align-items: center;\n overflow: hidden;\n background-color: transparent;\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-icon::part(icon) {\n color: var(--color-midnight);\n }\n .kol-accordion__heading-button .kol-icon::part(close)::before {\n font-family: \"Font Awesome 6 Free\";\n content: \"\\f077\";\n }\n .kol-accordion__heading-button .kol-icon::part(open)::before {\n font-family: \"Font Awesome 6 Free\";\n content: \"\\f078\";\n }\n .kol-accordion__heading {\n margin: 0;\n }\n .kol-accordion__content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .collapsible--open .kol-accordion__heading-button .kol-button {\n padding-bottom: 0;\n }\n .collapsible--open .kol-accordion__heading-button .kol-icon {\n width: 1em;\n }\n .collapsible--open .kol-accordion__content {\n margin: 0;\n }\n}";
431
409
 
432
- var css_248z$B = "@layer kol-theme-component {\n .kol-breadcrumb__list-element-span {\n font-weight: bold;\n /* text-transform: uppercase; */\n }\n}";
410
+ var css_248z$B = "@layer kol-theme-component {\n .kol-alert--default {\n --alert-border-color: var(--color-anthrazit);\n }\n .kol-alert--error {\n --alert-border-color: var(--color-rotton);\n }\n .kol-alert--info {\n --alert-border-color: var(--color-petrol);\n }\n .kol-alert--success {\n --alert-border-color: var(--color-gras);\n }\n .kol-alert--warning {\n --alert-border-color: var(--color-warn);\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n background-color: var(--alert-border-color);\n }\n}";
433
411
 
434
- var css_248z$A = "@layer kol-theme-component {\n .kol-button {\n background-color: transparent;\n }\n .kol-button--primary {\n --text-background-color: var(--color-petrol);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--primary:focus {\n --text-background-color: var(--color-achat);\n --text-border-color: var(--color-achat);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-petrol);\n }\n .kol-button--secondary:not([disabled]):hover, .kol-button--secondary:focus {\n --text-background-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--normal {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-anthrazit);\n --text-color: var(--color-anthrazit);\n }\n .kol-button--normal:not([disabled]):hover, .kol-button--normal:focus {\n --text-background-color: var(--color-anthrazit);\n --text-color: var(--color-weiss);\n }\n .kol-button--danger {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-blut);\n --text-color: var(--color-blut);\n }\n .kol-button--danger:hover, .kol-button--danger:focus {\n --text-background-color: var(--color-blut);\n --text-color: var(--color-weiss);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-ghost);\n --text-border-color: transparent;\n --text-color: var(--color-anthrazit);\n }\n .kol-button--ghost:not([disabled]):hover, .kol-button--ghost:focus {\n --text-border-color: var(--color-ghost);\n }\n .kol-button__text {\n gap: 0.25em;\n transition-delay: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button {\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text {\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}";
412
+ var css_248z$A = "@layer kol-theme-component {\n .kol-badge {\n display: inline-flex;\n font-family: inherit;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__smart-button {\n border-left: calc(1rem / var(--kolibri-root-font-size, 16)) solid rgba(0, 0, 0, 0.25);\n }\n .kol-badge__smart-button .button {\n border-radius: 0 var(--spacing) var(--spacing) 0;\n }\n .kol-badge__label {\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label .kol-span__container {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
435
413
 
436
- 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}";
414
+ var css_248z$z = "@layer kol-theme-component {\n .kol-breadcrumb__list-element-span {\n font-weight: bold;\n /* text-transform: uppercase; */\n }\n}";
437
415
 
438
- var css_248z$y = "@layer kol-theme-component {\n .kol-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 .kol-button--primary {\n --background-color: var(--color-petrol);\n --border-color: var(--color-petrol);\n --color: var(--color-weiss);\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--primary:focus {\n --background-color: var(--color-achat);\n --border-color: var(--color-achat);\n }\n .kol-button--secondary {\n --background-color: var(--color-weiss);\n --border-color: var(--color-petrol);\n --color: var(--color-petrol);\n }\n .kol-button--secondary:not([disabled]):hover, .kol-button--secondary:focus {\n --background-color: var(--color-petrol);\n --border-color: var(--color-petrol);\n --color: var(--color-weiss);\n }\n .kol-button--normal {\n --background-color: var(--color-weiss);\n --border-color: var(--color-anthrazit);\n --color: var(--color-anthrazit);\n }\n .kol-button--normal:not([disabled]):hover, .kol-button--normal:focus {\n --background-color: var(--color-anthrazit);\n --border-color: var(--color-anthrazit);\n --color: var(--color-weiss);\n }\n .kol-button--danger {\n --background-color: var(--color-weiss);\n --border-color: var(--color-blut);\n --color: var(--color-blut);\n }\n .kol-button--danger:not([disabled]):hover, .kol-button--danger:focus {\n --background-color: var(--color-blut);\n --border-color: var(--color-blut);\n --color: var(--color-weiss);\n }\n .kol-button--ghost {\n --background-color: var(--color-ghost);\n --border-color: transparent;\n --color: var(--color-anthrazit);\n }\n .kol-button--ghost:not([disabled]):hover, .kol-button--ghost:focus {\n --background-color: var(--color-ghost);\n --border-color: var(--color-ghost);\n --color: var(--color-anthrazit);\n }\n .kol-button__text {\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 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 background-color: var(--background-color);\n border-color: var(--border-color);\n color: var(--color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n}";
416
+ var css_248z$y = "@layer kol-theme-component {\n .kol-button {\n background-color: transparent;\n }\n .kol-button--primary {\n --text-background-color: var(--color-petrol);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--primary:focus {\n --text-background-color: var(--color-achat);\n --text-border-color: var(--color-achat);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-petrol);\n }\n .kol-button--secondary:not([disabled]):hover, .kol-button--secondary:focus {\n --text-background-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--normal {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-anthrazit);\n --text-color: var(--color-anthrazit);\n }\n .kol-button--normal:not([disabled]):hover, .kol-button--normal:focus {\n --text-background-color: var(--color-anthrazit);\n --text-color: var(--color-weiss);\n }\n .kol-button--danger {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-blut);\n --text-color: var(--color-blut);\n }\n .kol-button--danger:hover, .kol-button--danger:focus {\n --text-background-color: var(--color-blut);\n --text-color: var(--color-weiss);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-ghost);\n --text-border-color: transparent;\n --text-color: var(--color-anthrazit);\n }\n .kol-button--ghost:not([disabled]):hover, .kol-button--ghost:focus {\n --text-border-color: var(--color-ghost);\n }\n .kol-button__text {\n gap: 0.25em;\n transition-delay: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: 0 calc(8rem / 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 {\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text {\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}";
439
417
 
440
- 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}";
418
+ var css_248z$x = "@layer kol-theme-component {\n .kol-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 .kol-button--primary {\n --background-color: var(--color-petrol);\n --border-color: var(--color-petrol);\n --color: var(--color-weiss);\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--primary:focus {\n --background-color: var(--color-achat);\n --border-color: var(--color-achat);\n }\n .kol-button--secondary {\n --background-color: var(--color-weiss);\n --border-color: var(--color-petrol);\n --color: var(--color-petrol);\n }\n .kol-button--secondary:not([disabled]):hover, .kol-button--secondary:focus {\n --background-color: var(--color-petrol);\n --border-color: var(--color-petrol);\n --color: var(--color-weiss);\n }\n .kol-button--normal {\n --background-color: var(--color-weiss);\n --border-color: var(--color-anthrazit);\n --color: var(--color-anthrazit);\n }\n .kol-button--normal:not([disabled]):hover, .kol-button--normal:focus {\n --background-color: var(--color-anthrazit);\n --border-color: var(--color-anthrazit);\n --color: var(--color-weiss);\n }\n .kol-button--danger {\n --background-color: var(--color-weiss);\n --border-color: var(--color-blut);\n --color: var(--color-blut);\n }\n .kol-button--danger:not([disabled]):hover, .kol-button--danger:focus {\n --background-color: var(--color-blut);\n --border-color: var(--color-blut);\n --color: var(--color-weiss);\n }\n .kol-button--ghost {\n --background-color: var(--color-ghost);\n --border-color: transparent;\n --color: var(--color-anthrazit);\n }\n .kol-button--ghost:not([disabled]):hover, .kol-button--ghost:focus {\n --background-color: var(--color-ghost);\n --border-color: var(--color-ghost);\n --color: var(--color-anthrazit);\n }\n .kol-button__text {\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 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 background-color: var(--background-color);\n border-color: var(--border-color);\n color: var(--color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n}";
441
419
 
442
- var css_248z$w = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n :host .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n :host .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n :host .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n :host .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__group:not(.disabled) .combobox__group:hover, .combobox__group:focus-within {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .combobox:not(.combobox--disabled) .combobox__group:hover {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n background-color: transparent;\n border: none;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input:focus {\n outline-offset: 0;\n outline-width: 0;\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-petrol);\n color: var(--color-weiss);\n outline: 0;\n }\n .error .combobox__group {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
420
+ var css_248z$w = "@layer kol-theme-component {\n .kol-card {\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-card__headline {\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 .kol-card__header, .kol-card__content {\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}";
443
421
 
444
- 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}";
422
+ var css_248z$v = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n :host .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n :host .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n :host .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n :host .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__group:not(.disabled) .combobox__group:hover, .combobox__group:focus-within {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .combobox:not(.combobox--disabled) .combobox__group:hover {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n background-color: transparent;\n border: none;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input:focus {\n outline-offset: 0;\n outline-width: 0;\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-petrol);\n color: var(--color-weiss);\n outline: 0;\n }\n .error .combobox__group {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
445
423
 
446
- var css_248z$u = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 0.25em gray;\n }\n}";
424
+ var css_248z$u = "@layer kol-theme-component {\n .kol-details {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button {\n border-radius: var(--border-radius);\n }\n .kol-details__heading-button:focus-within {\n cursor: pointer;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: #000;\n }\n .kol-details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button .kol-span__container {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .kol-details__content.indented-text {\n font-family: var(--font-family);\n border-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}";
447
425
 
448
- var css_248z$t = "@layer kol-theme-component {\n .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .kol-link {\n text-decoration-line: none;\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: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n .kol-link__text {\n gap: 0.25em;\n }\n .kol-form__link {\n display: inline-block;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-left: calc(4rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n padding: 0.25em 0.5em;\n margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n .kol-alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
426
+ var css_248z$t = "@layer kol-theme-component {\n .kol-drawer__wrapper {\n box-shadow: 0 0 0.25em gray;\n }\n}";
449
427
 
450
- 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}";
428
+ var css_248z$s = "@layer kol-theme-component {\n .kol-link {\n text-decoration-line: none;\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: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n .kol-link__text {\n gap: 0.25em;\n }\n .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .kol-form__link {\n display: inline-block;\n }\n .kol-form__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-form__alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
451
429
 
452
- 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}";
430
+ var css_248z$r = "@layer kol-theme-component {\n .kol-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 .kol-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 .kol-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 .kol-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 .kol-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 .kol-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 .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n margin: 0;\n padding: 0;\n }\n}";
453
431
 
454
- var css_248z$q = "@layer kol-theme-component {\n :host .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n :host .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n :host .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n :host .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n :host .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-color: var(--default-border);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n input:hover {\n border-color: var(--color-petrol);\n }\n /* NEU */\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n }\n .kol-input.default {\n grid-template-columns: calc(12 * var(--spacing)) auto;\n }\n .default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(12 * var(--spacing));\n }\n .switch {\n grid-template-columns: calc(26 * var(--spacing)) auto;\n }\n .switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(26 * var(--spacing));\n }\n .button {\n gap: calc(8rem / var(--kolibri-root-font-size, 16)) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input > div.input {\n display: inline-flex;\n order: 1;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n order: 2;\n padding-left: calc(4 * var(--spacing));\n }\n .kol-input > .kol-alert.error {\n order: 3;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n /* CHECKBOX */\n input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .default input[type=checkbox] {\n height: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n width: calc(12 * var(--spacing));\n }\n .default .icon {\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-weiss);\n }\n .switch input[type=checkbox] {\n display: block;\n min-width: 3.2em;\n width: 3.2em;\n height: 1.7em;\n position: relative;\n }\n .switch input[type=checkbox]:before {\n /* border-radius: 0.25em; */\n -webkit-transition: 0.5s;\n -moz-transition: 0.5s;\n -ms-transition: 0.5s;\n transition: 0.5;\n width: 1.2em;\n height: 1.2em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n background-color: black;\n position: absolute;\n }\n .switch input[type=checkbox]:checked:before {\n transform: translateX(1.5em);\n background-color: white;\n }\n .switch input[type=checkbox]:indeterminate:before {\n transform: translateX(0.75em);\n background-color: var(--color-petrol);\n }\n .switch:is(:not(.checked), .indeterminate) .icon {\n color: #fff;\n }\n .disabled {\n opacity: 0.33;\n }\n .kol-input span.hint {\n grid-column: span 2;\n font-style: italic;\n color: gray;\n display: block;\n order: 3;\n padding: 0 var(--spacing);\n }\n .button:focus-within {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n outline-color: var(--color-achat);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n}";
432
+ var css_248z$q = "@layer kol-theme-component {\n :host .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n :host .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n :host .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n :host .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n :host .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .checkbox-container {\n position: relative;\n justify-content: center;\n min-width: initial;\n width: initial;\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 gap: calc(4 * var(--spacing));\n }\n .kol-input.default {\n grid-template-columns: auto 1fr;\n }\n .default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: 1fr auto;\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 }\n .kol-input > .kol-alert.error {\n order: 3;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n /* CHECKBOX */\n input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .default input[type=checkbox] {\n height: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n width: calc(12 * var(--spacing));\n }\n .default .icon {\n display: flex;\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}";
455
433
 
456
434
  var css_248z$p = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n :host .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n :host .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n :host .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n :host .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n overflow: hidden;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
457
435
 
@@ -473,11 +451,11 @@ var css_248z$h = "@layer kol-theme-component {\n .kol-link {\n text-decorati
473
451
 
474
452
  var css_248z$g = "@layer kol-theme-component {\n .kol-link {\n text-decoration-line: none;\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: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n .kol-link__text {\n gap: 0.25em;\n }\n}";
475
453
 
476
- 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 {\n width: 100%;\n /*height: 100%;font-weight: 600;*/\n display: block;\n }\n :host > div > nav .kol-link 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[exportparts*=selected] a {\n background-color: var(--color-achat);\n font-weight: 700;\n }\n :host > div > nav .kol-link a .kol-icon.mr-2 {\n margin-right: calc(4 * var(--spacing));\n }\n :host > div > nav .kol-link a .kol-icon.ml-2 {\n margin-left: calc(4 * var(--spacing));\n }\n :host > div > nav .kol-link a:focus,\n :host > div > nav .kol-link 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 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}";
454
+ var css_248z$f = "@layer kol-theme-component {\n .kol-nav__list {\n list-style: none;\n margin: 0;\n padding: 0;\n border-radius: var(--border-radius);\n background-color: var(--color-petrol);\n }\n .kol-nav__list--horizontal {\n display: flex;\n }\n .kol-nav__list--nested {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav .kol-button,\n .kol-nav .kol-link {\n align-items: center;\n color: var(--color-weiss);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n text-align: left;\n text-decoration: none;\n }\n .kol-nav .kol-button:hover, .kol-nav .kol-button:focus-visible,\n .kol-nav .kol-link:hover,\n .kol-nav .kol-link:focus-visible {\n text-decoration: underline;\n }\n}";
477
455
 
478
456
  var css_248z$e = "@layer kol-theme-component {\n .kol-button {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family-sans);\n }\n .kol-button__text {\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 .kol-button__text:not(:disabled):hover .kol-button__text, .kol-button__text:focus .kol-button__text {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n :disabled .kol-button__text {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-button__text--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination__button--selected .kol-button__text {\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}";
479
457
 
480
- 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}";
458
+ var css_248z$d = "@layer kol-theme-component {\n .kol-progress {\n --kolibri-text-label-padding: calc(60rem / var(--kolibri-root-font-size, 16));\n }\n .kol-progress__bar-progress {\n fill: var(--color-achat);\n }\n .kol-progress__cycle-background {\n stroke: var(--color-fluorit);\n }\n .kol-progress__cycle-progress {\n stroke: var(--color-achat);\n }\n}";
481
459
 
482
460
  var css_248z$c = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n :host .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n :host .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n :host .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n :host .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .error select {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n select {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n width: 100%;\n }\n select:not(.disabled) select:hover, select:focus-within {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n option {\n min-height: 2em;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
483
461
 
@@ -487,32 +465,31 @@ var css_248z$a = "@layer kol-theme-component {\n .kol-link__text {\n border-
487
465
 
488
466
  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}";
489
467
 
490
- 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 .kol-button {\n background-color: transparent;\n }\n .kol-button--primary {\n --text-background-color: var(--color-petrol);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--primary:focus {\n --text-background-color: var(--color-achat);\n --text-border-color: var(--color-achat);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-petrol);\n }\n .kol-button--secondary:not([disabled]):hover, .kol-button--secondary:focus {\n --text-background-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--normal {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-anthrazit);\n --text-color: var(--color-anthrazit);\n }\n .kol-button--normal:not([disabled]):hover, .kol-button--normal:focus {\n --text-background-color: var(--color-anthrazit);\n --text-color: var(--color-weiss);\n }\n .kol-button--danger {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-blut);\n --text-color: var(--color-blut);\n }\n .kol-button--danger:hover, .kol-button--danger:focus {\n --text-background-color: var(--color-blut);\n --text-color: var(--color-weiss);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-ghost);\n --text-border-color: transparent;\n --text-color: var(--color-anthrazit);\n }\n .kol-button--ghost:not([disabled]):hover, .kol-button--ghost:focus {\n --text-border-color: var(--color-ghost);\n }\n .kol-button__text {\n gap: 0.25em;\n transition-delay: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n}";
468
+ 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 {\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 {\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 {\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,\n button > .kol-span {\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 .kol-button {\n background-color: transparent;\n }\n .kol-button--primary {\n --text-background-color: var(--color-petrol);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--primary:focus {\n --text-background-color: var(--color-achat);\n --text-border-color: var(--color-achat);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-petrol);\n }\n .kol-button--secondary:not([disabled]):hover, .kol-button--secondary:focus {\n --text-background-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--normal {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-anthrazit);\n --text-color: var(--color-anthrazit);\n }\n .kol-button--normal:not([disabled]):hover, .kol-button--normal:focus {\n --text-background-color: var(--color-anthrazit);\n --text-color: var(--color-weiss);\n }\n .kol-button--danger {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-blut);\n --text-color: var(--color-blut);\n }\n .kol-button--danger:hover, .kol-button--danger:focus {\n --text-background-color: var(--color-blut);\n --text-color: var(--color-weiss);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-ghost);\n --text-border-color: transparent;\n --text-color: var(--color-anthrazit);\n }\n .kol-button--ghost:not([disabled]):hover, .kol-button--ghost:focus {\n --text-border-color: var(--color-ghost);\n }\n .kol-button__text {\n gap: 0.25em;\n transition-delay: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n}";
491
469
 
492
- 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 .kol-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}";
470
+ var css_248z$7 = "@layer kol-theme-component {\n @layer kol-theme-component {\n .kol-table {\n padding: 0.5em;\n }\n .kol-table__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 .kol-table__container {\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 .kol-table__head-row, .kol-table__row {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n .kol-table__head-row--body:nth-child(even), .kol-table__row--body:nth-child(even) {\n background-color: #f2f2f2;\n }\n .kol-table__cell {\n padding: 0.25em 0.5em;\n border-right: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n .kol-table__cell--header {\n background-color: #eee;\n }\n .kol-table__cell:last-child {\n border-right-width: 0;\n }\n .kol-table__sort-button .kol-button {\n font-weight: bold;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .kol-table__selection-input--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 .kol-table__selection-input--radio {\n display: flex;\n }\n .kol-table__selection-input--radio:hover {\n border-color: var(--color-achat);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-anthrazit);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-petrol);\n }\n .kol-table__selection-input--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 .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-weiss);\n }\n .kol-table__selection-icon {\n color: var(--color-weiss);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-petrol);\n }\n }\n .kol-table-stateful {\n font-family: var(--font-family);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-table-stateful__pagination {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table-stateful__pagination--bottom {\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 .kol-table-stateful .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}";
493
471
 
494
- 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 .kol-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}";
472
+ var css_248z$6 = "@layer kol-theme-component {\n .kol-table {\n padding: 0.5em;\n }\n .kol-table__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 .kol-table__container {\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 .kol-table__head-row, .kol-table__row {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n .kol-table__head-row--body:nth-child(even), .kol-table__row--body:nth-child(even) {\n background-color: #f2f2f2;\n }\n .kol-table__cell {\n padding: 0.25em 0.5em;\n border-right: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n .kol-table__cell--header {\n background-color: #eee;\n }\n .kol-table__cell:last-child {\n border-right-width: 0;\n }\n .kol-table__sort-button .kol-button {\n font-weight: bold;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .kol-table__selection-input--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 .kol-table__selection-input--radio {\n display: flex;\n }\n .kol-table__selection-input--radio:hover {\n border-color: var(--color-achat);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-anthrazit);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-petrol);\n }\n .kol-table__selection-input--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 .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-weiss);\n }\n .kol-table__selection-icon {\n color: var(--color-weiss);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-petrol);\n }\n}";
495
473
 
496
- 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}";
474
+ var css_248z$5 = "@layer kol-theme-component {\n .kol-tabs {\n width: 100%;\n display: grid;\n }\n .kol-tabs--tabs-align-left {\n --order: 0;\n grid-template-columns: auto 1fr;\n }\n .kol-tabs--tabs-align-right {\n --order: 1;\n grid-template-columns: 1fr auto;\n }\n .kol-tabs--tabs-align-top {\n --order: 0;\n }\n .kol-tabs--tabs-align-bottom {\n --order: 1;\n }\n .kol-tabs__button-group {\n display: flex;\n background-color: var(--color-petrol);\n order: --order;\n }\n .kol-tabs__tabs-content {\n padding: 0.25em;\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--border-color);\n }\n .kol-tabs .kol-button-wc {\n width: 100%;\n }\n .kol-tabs .kol-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-tabs .kol-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-tabs .kol-button.selected {\n background-color: white;\n border-bottom-width: 0.25em;\n border-bottom-style: solid;\n border-bottom-color: var(--color-citrin);\n }\n .kol-tabs .kol-button .kol-span_container {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n }\n .kol-tabs .kol-button.primary, .kol-tabs .kol-button.primary:disabled:hover {\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n color: white;\n }\n .kol-tabs .kol-button.primary:hover, .kol-tabs .kol-button.primary:focus {\n color: var(--kolibri-color-primary);\n }\n .kol-tabs .kol-button.secondary, .kol-tabs .kol-button.secondary:disabled:hover {\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n color: white;\n }\n .kol-tabs .kol-button.secondary:hover, .kol-tabs .kol-button.secondary:focus {\n color: var(--kolibri-color-secondary);\n }\n .kol-tabs .kol-button.normal, .kol-tabs .kol-button.normal:disabled:hover {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: white;\n }\n .kol-tabs .kol-button.normal:hover, .kol-tabs .kol-button.normal:focus {\n color: var(--color-petrol);\n }\n .kol-tabs .kol-button.danger, .kol-tabs .kol-button.danger:disabled:hover {\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n color: white;\n }\n .kol-tabs .kol-button.danger:hover, .kol-tabs .kol-button.danger:focus {\n color: var(--kolibri-color-danger);\n }\n .kol-tabs .kol-button.ghost, .kol-tabs .kol-button.ghost:disabled:hover {\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n color: var(--kolibri-color-ghost);\n }\n .kol-tabs .kol-button.ghost:hover, .kol-tabs .kol-button.ghost:focus {\n background-color: var(--kolibri-color-ghost);\n color: white;\n }\n .kol-tabs .kol-button:hover, .kol-tabs .kol-button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n .kol-tabs .kol-button:active {\n outline: 0;\n box-shadow: none;\n }\n .kol-tabs .kol-button .close-button {\n font-size: 25%;\n height: fit-content;\n width: 0;\n }\n .kol-tabs .kol-button .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}";
497
475
 
498
476
  var css_248z$4 = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n :host .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n :host .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n :host .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n :host .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n width: 100%;\n }\n textarea::placeholder {\n font-style: italic;\n }\n textarea:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n textarea:not(.disabled, textarea:disabled):hover, textarea:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .error textarea {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n textarea:read-only {\n border-color: var(--border-default);\n background-color: var(--background-light-grey);\n }\n}";
499
477
 
500
- var css_248z$3 = "@layer kol-theme-component {\n .kol-alert--default {\n --alert-border-color: var(--color-anthrazit);\n }\n .kol-alert--error {\n --alert-border-color: var(--color-rotton);\n }\n .kol-alert--info {\n --alert-border-color: var(--color-petrol);\n }\n .kol-alert--success {\n --alert-border-color: var(--color-gras);\n }\n .kol-alert--warning {\n --alert-border-color: var(--color-warn);\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n background-color: var(--alert-border-color);\n }\n}\n@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(750rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n left: 50%;\n transform: translateX(-50%);\n }\n .toast {\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n}";
478
+ var css_248z$3 = "@layer kol-theme-component {\n .kol-alert--default {\n --alert-border-color: var(--color-anthrazit);\n }\n .kol-alert--error {\n --alert-border-color: var(--color-rotton);\n }\n .kol-alert--info {\n --alert-border-color: var(--color-petrol);\n }\n .kol-alert--success {\n --alert-border-color: var(--color-gras);\n }\n .kol-alert--warning {\n --alert-border-color: var(--color-warn);\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n background-color: var(--alert-border-color);\n }\n}\n@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(750rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n left: 50%;\n transform: translateX(-50%);\n }\n .kol-toast-item {\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .heading {\n width: 100%;\n }\n .kol-toast-item .heading .heading-content {\n flex: 1;\n }\n}";
501
479
 
502
- 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}";
480
+ var css_248z$2 = "@layer kol-theme-component {\n .kol-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}";
503
481
 
504
- 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}";
482
+ var css_248z$1 = "@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: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-tree-item__link .kol-link {\n display: block;\n color: var(--color-black);\n text-decoration: none;\n text-align: left;\n }\n .kol-tree-item__link .kol-link:focus {\n color: var(--color-petrol);\n }\n .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--border-color);\n }\n .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n outline-offset: 0;\n color: var(--color-petrol);\n }\n .kol-tree-item__link--active {\n background-color: var(--color-anthrazit);\n }\n .kol-tree-item__link--active .kol-link {\n color: var(--color-weiss);\n }\n .kol-tree-item__toggle-button {\n display: inline-block;\n color: var(--color-blue);\n }\n .kol-tree-item__toggle-button:hover {\n transform: scale(1.3);\n }\n}";
505
483
 
506
- 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}";
484
+ var css_248z = "@layer kol-theme-component {\n .kol-tree__treeview-navigation {\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 .kol-tree:focus-within {\n outline: 0;\n }\n .kol-tree:focus-within ul {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n}";
507
485
 
508
486
  const ITZBund = KoliBri.createTheme('itzbund', {
509
- GLOBAL: css_248z$F,
510
- 'KOL-BUTTON': css_248z$A,
511
- 'KOL-BUTTON-GROUP': css_248z$z,
487
+ GLOBAL: css_248z$D,
488
+ 'KOL-BUTTON': css_248z$y,
512
489
  'KOL-LINK-BUTTON': css_248z$h,
513
490
  'KOL-PAGINATION': css_248z$e,
514
- 'KOL-BUTTON-LINK': css_248z$y,
515
- 'KOL-FORM': css_248z$t,
491
+ 'KOL-BUTTON-LINK': css_248z$x,
492
+ 'KOL-FORM': css_248z$s,
516
493
  'KOL-INPUT-TEXT': css_248z$i,
517
494
  'KOL-INPUT-PASSWORD': css_248z$k,
518
495
  'KOL-INPUT-NUMBER': css_248z$l,
@@ -520,25 +497,24 @@ const ITZBund = KoliBri.createTheme('itzbund', {
520
497
  'KOL-INPUT-EMAIL': css_248z$n,
521
498
  'KOL-INPUT-FILE': css_248z$m,
522
499
  'KOL-TEXTAREA': css_248z$4,
523
- 'KOL-ALERT': css_248z$D,
524
- 'KOL-HEADING': css_248z$s,
525
- 'KOL-BADGE': css_248z$C,
526
- 'KOL-INDENTED-TEXT': css_248z$r,
500
+ 'KOL-ALERT': css_248z$B,
501
+ 'KOL-HEADING': css_248z$r,
502
+ 'KOL-BADGE': css_248z$A,
527
503
  'KOL-LINK': css_248z$g,
528
- 'KOL-BREADCRUMB': css_248z$B,
504
+ 'KOL-BREADCRUMB': css_248z$z,
529
505
  'KOL-SPIN': css_248z$9,
530
506
  'KOL-SINGLE-SELECT': css_248z$b,
531
507
  'KOL-PROGRESS': css_248z$d,
532
508
  'KOL-SELECT': css_248z$c,
533
509
  'KOL-INPUT-COLOR': css_248z$p,
534
- 'KOL-ACCORDION': css_248z$E,
510
+ 'KOL-ACCORDION': css_248z$C,
535
511
  'KOL-TABLE-STATEFUL': css_248z$7,
536
512
  'KOL-TABLE-STATELESS': css_248z$6,
537
513
  'KOL-NAV': css_248z$f,
538
- 'KOL-CARD': css_248z$x,
539
- 'KOL-COMBOBOX': css_248z$w,
540
- 'KOL-DETAILS': css_248z$v,
541
- 'KOL-DRAWER': css_248z$u,
514
+ 'KOL-CARD': css_248z$w,
515
+ 'KOL-COMBOBOX': css_248z$v,
516
+ 'KOL-DETAILS': css_248z$u,
517
+ 'KOL-DRAWER': css_248z$t,
542
518
  'KOL-INPUT-CHECKBOX': css_248z$q,
543
519
  'KOL-INPUT-RADIO': css_248z$j,
544
520
  'KOL-TOAST-CONTAINER': css_248z$3,