@charset "UTF-8";
/**
 * @file _mixims.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles und wiederverwendbare Snippets für mehrere Komponenten.
 *
 * Diese Datei enthält wiederverwendbare Snippets, die in mehrere Komponenten
 * eingesetzt werden können.
 */
html {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* 2 */
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: var(--kern-color-layout-background-default);
}

[data-kern-theme=dark],
.kern-dark,
[data-kern-theme=light],
.kern-light {
  background-color: var(--kern-color-layout-background-default);
}

body:has(.kern-dialog[open]) {
  overflow: hidden;
}

*:not(i) {
  font-family: var(--kern-typography-font-family-default);
}

area[href]:not([tabindex="-1"]):focus,
iframe:not([tabindex="-1"]):focus,
[tabindex]:not([tabindex="-1"]):focus,
[contentEditable=true]:not([tabindex="-1"]):focus {
  border-radius: var(--kern-metric-border-radius-default, 0.25rem);
  box-shadow: 0 0 0 2px var(--kern-color-action-on-default), 0 0 0 4px var(--kern-color-action-focus-border-inside), 0 0 0 6px var(--kern-color-action-focus-border-outside);
}
area[href]:not([tabindex="-1"]):focus:focus-visible,
iframe:not([tabindex="-1"]):focus:focus-visible,
[tabindex]:not([tabindex="-1"]):focus:focus-visible,
[contentEditable=true]:not([tabindex="-1"]):focus:focus-visible {
  outline: 0;
}

.kern-sr-only {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.kern-sr-only:not(caption) {
  position: absolute !important;
}
.kern-sr-only-mobile {
  display: inline;
}
@media (max-width: 767px) {
  .kern-sr-only-mobile {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .kern-sr-only-mobile:not(caption) {
    position: absolute !important;
  }
}

.kern-error {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  display: flex;
  gap: var(--kern-metric-space-small, 8px);
  align-items: flex-start;
  align-self: stretch;
}
.kern-error .kern-icon {
  background-color: var(--kern-color-feedback-danger, #BD0F09);
  margin: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
}

.kern-number {
  display: flex;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 2px 0px;
  justify-content: center;
  align-items: center;
  border-radius: var(--kern-metric-border-radius-circle, 50%);
  border: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-layout-text-default, #171A2B);
  color: var(--kern-color-layout-text-default, #171A2B);
}

/**
 * @file _icon.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Icon Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Icon Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Variationen (small, default, large und x-large).
 */
/**
 * @file _icons.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 26.05.2025
 * 2.3.0
 * @brief SVG-Icon werden hier definiert.
 *
 * Diese Datei enthält Definitionen, um die SVG-Icon als Styles zu laden.
 */
.kern-icon {
  display: inline-block;
  width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
  min-width: var(--kern-metric-dimension-default, 24px);
  min-height: var(--kern-metric-dimension-default, 24px);
}
.kern-icon--small {
  width: var(--kern-metric-dimension-small, 20px);
  min-width: var(--kern-metric-dimension-small, 20px);
  height: var(--kern-metric-dimension-small, 20px);
  min-height: var(--kern-metric-dimension-small, 20px);
}
.kern-icon--default {
  width: var(--kern-metric-dimension-default, 24px);
  min-width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
  min-height: var(--kern-metric-dimension-default, 24px);
}
.kern-icon--large {
  width: var(--kern-metric-dimension-large, 32px);
  min-width: var(--kern-metric-dimension-large, 32px);
  height: var(--kern-metric-dimension-large, 32px);
  min-height: var(--kern-metric-dimension-large, 32px);
}
.kern-icon--x-large {
  width: var(--kern-metric-dimension-x-large, 48px);
  min-width: var(--kern-metric-dimension-x-large, 48px);
  height: var(--kern-metric-dimension-x-large, 48px);
  min-height: var(--kern-metric-dimension-x-large, 48px);
}
.kern-icon--add {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--add {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--arrow-down {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--arrow-down {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--arrow-up {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--arrow-up {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--arrow-forward {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M647-440H200q-17 0-28.5-11.5T160-480q0-17 11.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11 28-11.5t28 11.5l264 264q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L508-188q-11 11-27.5 11T452-188q-12-12-12-28.5t12-28.5l195-195Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M647-440H200q-17 0-28.5-11.5T160-480q0-17 11.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11 28-11.5t28 11.5l264 264q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L508-188q-11 11-27.5 11T452-188q-12-12-12-28.5t12-28.5l195-195Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--arrow-forward {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--arrow-back {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m313-440 196 196q12 12 11.5 28T508-188q-12 11-28 11.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l264-264q11-11 27.5-11t28.5 11q12 12 12 28.5T508-715L313-520h447q17 0 28.5 11.5T800-480q0 17-11.5 28.5T760-440H313Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m313-440 196 196q12 12 11.5 28T508-188q-12 11-28 11.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l264-264q11-11 27.5-11t28.5 11q12 12 12 28.5T508-715L313-520h447q17 0 28.5 11.5T800-480q0 17-11.5 28.5T760-440H313Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--arrow-back {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--autorenew {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M240-478q0 16 2 31.5t7 30.5q5 17-1 32.5T227-361q-16 8-31.5 1.5T175-383q-8-23-11.5-47t-3.5-48q0-134 93-228t227-94h7l-36-36q-11-11-11-28t11-28q11-11 28-11t28 11l104 104q12 12 12 28t-12 28L507-628q-11 11-28 11t-28-11q-11-11-11-28t11-28l36-36h-7q-100 0-170 70.5T240-478Zm480-4q0-16-2-31.5t-7-30.5q-5-17 1-32.5t21-22.5q16-8 31.5-1.5T785-577q8 23 11.5 47t3.5 48q0 134-93 228t-227 94h-7l36 36q11 11 11 28t-11 28q-11 11-28 11t-28-11L349-172q-12-12-12-28t12-28l104-104q11-11 28-11t28 11q11 11 11 28t-11 28l-36 36h7q100 0 170-70.5T720-482Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M240-478q0 16 2 31.5t7 30.5q5 17-1 32.5T227-361q-16 8-31.5 1.5T175-383q-8-23-11.5-47t-3.5-48q0-134 93-228t227-94h7l-36-36q-11-11-11-28t11-28q11-11 28-11t28 11l104 104q12 12 12 28t-12 28L507-628q-11 11-28 11t-28-11q-11-11-11-28t11-28l36-36h-7q-100 0-170 70.5T240-478Zm480-4q0-16-2-31.5t-7-30.5q-5-17 1-32.5t21-22.5q16-8 31.5-1.5T785-577q8 23 11.5 47t3.5 48q0 134-93 228t-227 94h-7l36 36q11 11 11 28t-11 28q-11 11-28 11t-28-11L349-172q-12-12-12-28t12-28l104-104q11-11 28-11t28 11q11 11 11 28t-11 28l-36 36h7q100 0 170-70.5T720-482Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--autorenew {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--calendar-today {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--calendar-today {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--check {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--check {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--checklist {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m221-313 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-228q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm0-320 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-548q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm339 353q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h280q17 0 28.5 11.5T880-320q0 17-11.5 28.5T840-280H560Zm0-320q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h280q17 0 28.5 11.5T880-640q0 17-11.5 28.5T840-600H560Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m221-313 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-228q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm0-320 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-548q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm339 353q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h280q17 0 28.5 11.5T880-320q0 17-11.5 28.5T840-280H560Zm0-320q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h280q17 0 28.5 11.5T880-640q0 17-11.5 28.5T840-600H560Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--checklist {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--chevron-left {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m432-480 156 156q11 11 11 28t-11 28q-11 11-28 11t-28-11L348-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 28-11t28 11q11 11 11 28t-11 28L432-480Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m432-480 156 156q11 11 11 28t-11 28q-11 11-28 11t-28-11L348-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 28-11t28 11q11 11 11 28t-11 28L432-480Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--chevron-left {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--chevron-right {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--chevron-right {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--close {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--close {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--content-copy {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360ZM200-80q-33 0-56.5-23.5T120-160v-520q0-17 11.5-28.5T160-720q17 0 28.5 11.5T200-680v520h400q17 0 28.5 11.5T640-120q0 17-11.5 28.5T600-80H200Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360ZM200-80q-33 0-56.5-23.5T120-160v-520q0-17 11.5-28.5T160-720q17 0 28.5 11.5T200-680v520h400q17 0 28.5 11.5T640-120q0 17-11.5 28.5T600-80H200Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--content-copy {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--danger {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-361q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-361q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--danger {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--delete {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M280-120q-33 0-56.5-23.5T200-200v-520q-17 0-28.5-11.5T160-760q0-17 11.5-28.5T200-800h160q0-17 11.5-28.5T400-840h160q17 0 28.5 11.5T600-800h160q17 0 28.5 11.5T800-760q0 17-11.5 28.5T760-720v520q0 33-23.5 56.5T680-120H280Zm120-160q17 0 28.5-11.5T440-320v-280q0-17-11.5-28.5T400-640q-17 0-28.5 11.5T360-600v280q0 17 11.5 28.5T400-280Zm160 0q17 0 28.5-11.5T600-320v-280q0-17-11.5-28.5T560-640q-17 0-28.5 11.5T520-600v280q0 17 11.5 28.5T560-280Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M280-120q-33 0-56.5-23.5T200-200v-520q-17 0-28.5-11.5T160-760q0-17 11.5-28.5T200-800h160q0-17 11.5-28.5T400-840h160q17 0 28.5 11.5T600-800h160q17 0 28.5 11.5T800-760q0 17-11.5 28.5T760-720v520q0 33-23.5 56.5T680-120H280Zm120-160q17 0 28.5-11.5T440-320v-280q0-17-11.5-28.5T400-640q-17 0-28.5 11.5T360-600v280q0 17 11.5 28.5T400-280Zm160 0q17 0 28.5-11.5T600-320v-280q0-17-11.5-28.5T560-640q-17 0-28.5 11.5T520-600v280q0 17 11.5 28.5T560-280Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--delete {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--download {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-337q-8 0-15-2.5t-13-8.5L308-492q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T365-549l75 75v-286q0-17 11.5-28.5T480-800q17 0 28.5 11.5T520-760v286l75-75q12-12 28.5-11.5T652-548q11 12 11.5 28T652-492L508-348q-6 6-13 8.5t-15 2.5ZM240-160q-33 0-56.5-23.5T160-240v-80q0-17 11.5-28.5T200-360q17 0 28.5 11.5T240-320v80h480v-80q0-17 11.5-28.5T760-360q17 0 28.5 11.5T800-320v80q0 33-23.5 56.5T720-160H240Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-337q-8 0-15-2.5t-13-8.5L308-492q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T365-549l75 75v-286q0-17 11.5-28.5T480-800q17 0 28.5 11.5T520-760v286l75-75q12-12 28.5-11.5T652-548q11 12 11.5 28T652-492L508-348q-6 6-13 8.5t-15 2.5ZM240-160q-33 0-56.5-23.5T160-240v-80q0-17 11.5-28.5T200-360q17 0 28.5 11.5T240-320v80h480v-80q0-17 11.5-28.5T760-360q17 0 28.5 11.5T800-320v80q0 33-23.5 56.5T720-160H240Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--download {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--draft {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T720-80H240Zm280-560q0 17 11.5 28.5T560-600h160L520-800v160Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T720-80H240Zm280-560q0 17 11.5 28.5T560-600h160L520-800v160Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--draft {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--drive-folder-upload {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm320-120q17 0 28.5-11.5T520-320v-128l36 36q11 11 28 11t28-11q11-11 11-28t-11-28L508-572q-12-12-28-12t-28 12L348-468q-11 11-11 28t11 28q11 11 28 11t28-11l36-36v128q0 17 11.5 28.5T480-280Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm320-120q17 0 28.5-11.5T520-320v-128l36 36q11 11 28 11t28-11q11-11 11-28t-11-28L508-572q-12-12-28-12t-28 12L348-468q-11 11-11 28t11 28q11 11 28 11t28-11l36-36v128q0 17 11.5 28.5T480-280Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--drive-folder-upload {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--easy-language {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M120-274v-286q0-32 23.5-54t55.5-20q79 12 150.5 46.5T480-498q59-55 130.5-89.5T761-634q32-2 55.5 20t23.5 54v286q0 32-21 54.5T766-195q-64 10-124 33t-112 61q-11 9-23.5 13.5T480-83q-14 0-26.5-4.5T430-101q-52-38-112-61t-124-33q-32-2-53-24.5T120-274Zm360-326q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M120-274v-286q0-32 23.5-54t55.5-20q79 12 150.5 46.5T480-498q59-55 130.5-89.5T761-634q32-2 55.5 20t23.5 54v286q0 32-21 54.5T766-195q-64 10-124 33t-112 61q-11 9-23.5 13.5T480-83q-14 0-26.5-4.5T430-101q-52-38-112-61t-124-33q-32-2-53-24.5T120-274Zm360-326q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--easy-language {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--edit {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-120q-17 0-28.5-11.5T120-160v-97q0-16 6-30.5t17-25.5l505-504q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L313-143q-11 11-25.5 17t-30.5 6h-97Zm544-528 56-56-56-56-56 56 56 56Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-120q-17 0-28.5-11.5T120-160v-97q0-16 6-30.5t17-25.5l505-504q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L313-143q-11 11-25.5 17t-30.5 6h-97Zm544-528 56-56-56-56-56 56 56 56Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--edit {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--home {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-200v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H600q-17 0-28.5-11.5T560-160v-200q0-17-11.5-28.5T520-400h-80q-17 0-28.5 11.5T400-360v200q0 17-11.5 28.5T360-120H240q-33 0-56.5-23.5T160-200Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-200v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H600q-17 0-28.5-11.5T560-160v-200q0-17-11.5-28.5T520-400h-80q-17 0-28.5 11.5T400-360v200q0 17-11.5 28.5T360-120H240q-33 0-56.5-23.5T160-200Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--home {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--help {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm2 160q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Zm4-172q25 0 43.5 16t18.5 40q0 22-13.5 39T502-525q-23 20-40.5 44T444-427q0 14 10.5 23.5T479-394q15 0 25.5-10t13.5-25q4-21 18-37.5t30-31.5q23-22 39.5-48t16.5-58q0-51-41.5-83.5T484-720q-38 0-72.5 16T359-655q-7 12-4.5 25.5T368-609q14 8 29 5t25-17q11-15 27.5-23t34.5-8Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm2 160q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Zm4-172q25 0 43.5 16t18.5 40q0 22-13.5 39T502-525q-23 20-40.5 44T444-427q0 14 10.5 23.5T479-394q15 0 25.5-10t13.5-25q4-21 18-37.5t30-31.5q23-22 39.5-48t16.5-58q0-51-41.5-83.5T484-720q-38 0-72.5 16T359-655q-7 12-4.5 25.5T368-609q14 8 29 5t25-17q11-15 27.5-23t34.5-8Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--help {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--info {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--info {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--keyboard-double-arrow-left {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--keyboard-double-arrow-left {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--keyboard-double-arrow-right {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M383-480 228-636q-11-11-11.5-27.5T228-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L284-268q-11 11-27.5 11.5T228-268q-11-11-11-28t11-28l155-156Zm264 0L492-636q-11-11-11.5-27.5T492-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L548-268q-11 11-27.5 11.5T492-268q-11-11-11-28t11-28l155-156Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M383-480 228-636q-11-11-11.5-27.5T228-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L284-268q-11 11-27.5 11.5T228-268q-11-11-11-28t11-28l155-156Zm264 0L492-636q-11-11-11.5-27.5T492-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L548-268q-11 11-27.5 11.5T492-268q-11-11-11-28t11-28l155-156Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--keyboard-double-arrow-right {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--logout {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h240q17 0 28.5 11.5T480-160q0 17-11.5 28.5T440-120H200Zm487-320H400q-17 0-28.5-11.5T360-480q0-17 11.5-28.5T400-520h287l-75-75q-11-11-11-27t11-28q11-12 28-12.5t29 11.5l143 143q12 12 12 28t-12 28L669-309q-12 12-28.5 11.5T612-310q-11-12-10.5-28.5T613-366l74-74Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h240q17 0 28.5 11.5T480-160q0 17-11.5 28.5T440-120H200Zm487-320H400q-17 0-28.5-11.5T360-480q0-17 11.5-28.5T400-520h287l-75-75q-11-11-11-27t11-28q11-12 28-12.5t29 11.5l143 143q12 12 12 28t-12 28L669-309q-12 12-28.5 11.5T612-310q-11-12-10.5-28.5T613-366l74-74Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--logout {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--mail {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-287q5 0 10.5-1.5T501-453l283-177q8-5 12-12.5t4-16.5q0-20-17-30t-35 1L480-520 212-688q-18-11-35-.5T160-659q0 10 4 17.5t12 11.5l283 177q5 3 10.5 4.5T480-447Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-287q5 0 10.5-1.5T501-453l283-177q8-5 12-12.5t4-16.5q0-20-17-30t-35 1L480-520 212-688q-18-11-35-.5T160-659q0 10 4 17.5t12 11.5l283 177q5 3 10.5 4.5T480-447Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--mail {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--more-vert {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--more-vert {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--open-in-new {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h560v-240q0-17 11.5-28.5T800-480q17 0 28.5 11.5T840-440v240q0 33-23.5 56.5T760-120H200Zm560-584L416-360q-11 11-28 11t-28-11q-11-11-11-28t11-28l344-344H600q-17 0-28.5-11.5T560-800q0-17 11.5-28.5T600-840h200q17 0 28.5 11.5T840-800v200q0 17-11.5 28.5T800-560q-17 0-28.5-11.5T760-600v-104Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h560v-240q0-17 11.5-28.5T800-480q17 0 28.5 11.5T840-440v240q0 33-23.5 56.5T760-120H200Zm560-584L416-360q-11 11-28 11t-28-11q-11-11-11-28t11-28l344-344H600q-17 0-28.5-11.5T560-800q0-17 11.5-28.5T600-840h200q17 0 28.5 11.5T840-800v200q0 17-11.5 28.5T800-560q-17 0-28.5-11.5T760-600v-104Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--open-in-new {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--question-mark {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M584-637q0-43-28.5-69T480-732q-29 0-52.5 12.5T387-683q-16 23-43.5 26.5T296-671q-14-13-15.5-32t9.5-36q32-48 81.5-74.5T480-840q97 0 157.5 55T698-641q0 45-19 81t-70 85q-37 35-50 54.5T542-376q-4 24-20.5 40T482-320q-23 0-39.5-15.5T426-374q0-39 17-71.5t57-68.5q51-45 67.5-69.5T584-637ZM480-80q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M584-637q0-43-28.5-69T480-732q-29 0-52.5 12.5T387-683q-16 23-43.5 26.5T296-671q-14-13-15.5-32t9.5-36q32-48 81.5-74.5T480-840q97 0 157.5 55T698-641q0 45-19 81t-70 85q-37 35-50 54.5T542-376q-4 24-20.5 40T482-320q-23 0-39.5-15.5T426-374q0-39 17-71.5t57-68.5q51-45 67.5-69.5T584-637ZM480-80q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--question-mark {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--search {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--search {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--sign-language {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-40q-17 0-28.5-11.5T160-80q0-17 11.5-28.5T200-120h160v-40H120q-17 0-28.5-11.5T80-200q0-17 11.5-28.5T120-240h240v-40H80q-17 0-28.5-11.5T40-320q0-17 11.5-28.5T80-360h280v-40H160q-17 0-28.5-11.5T120-440q0-17 11.5-28.5T160-480h244l-34-60q-12-21-9.5-44.5T380-625l4-3q11-11 25.5-12t26.5 8l236 176q23 17 35.5 42t12.5 54v200q0 50-35 85t-85 35H200Zm593-374q-10 0-18-5.5T763-436q-9-20-23-37t-32-31L524-641 303-807q-14-10-16-26t8-30q10-14 26-16.5t30 7.5l224 169 24-33-160-120q-14-10-16.5-26t7.5-30q10-14 26-16t30 8l196 146 9-69q3-24 19-41t39-21l6-1q15-2 27 6t17 22l84 283q8 27 3 55t-22 51l-48 64q-5 6-10.5 8.5T793-414ZM248-599q10-14 25.5-16t29.5 8q14 10 16.5 25.5T312-552q-10 14-26 16.5t-30-7.5q-14-10-16-26t8-30Zm15-88q-14-10-16-26t8-30q10-14 26-16t30 8l32 25q15 12 15.5 27t-8.5 27q-9 12-24 16t-30-7l-33-24Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-40q-17 0-28.5-11.5T160-80q0-17 11.5-28.5T200-120h160v-40H120q-17 0-28.5-11.5T80-200q0-17 11.5-28.5T120-240h240v-40H80q-17 0-28.5-11.5T40-320q0-17 11.5-28.5T80-360h280v-40H160q-17 0-28.5-11.5T120-440q0-17 11.5-28.5T160-480h244l-34-60q-12-21-9.5-44.5T380-625l4-3q11-11 25.5-12t26.5 8l236 176q23 17 35.5 42t12.5 54v200q0 50-35 85t-85 35H200Zm593-374q-10 0-18-5.5T763-436q-9-20-23-37t-32-31L524-641 303-807q-14-10-16-26t8-30q10-14 26-16.5t30 7.5l224 169 24-33-160-120q-14-10-16.5-26t7.5-30q10-14 26-16t30 8l196 146 9-69q3-24 19-41t39-21l6-1q15-2 27 6t17 22l84 283q8 27 3 55t-22 51l-48 64q-5 6-10.5 8.5T793-414ZM248-599q10-14 25.5-16t29.5 8q14 10 16.5 25.5T312-552q-10 14-26 16.5t-30-7.5q-14-10-16-26t8-30Zm15-88q-14-10-16-26t8-30q10-14 26-16t30 8l32 25q15 12 15.5 27t-8.5 27q-9 12-24 16t-30-7l-33-24Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--sign-language {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--success {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--success {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--visibility {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-134 0-244.5-72T61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q64-118 174.5-190T480-800q134 0 244.5 72T899-538q5 9 7.5 18.5T909-500q0 10-2.5 19.5T899-462q-64 118-174.5 190T480-200Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-134 0-244.5-72T61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q64-118 174.5-190T480-800q134 0 244.5 72T899-538q5 9 7.5 18.5T909-500q0 10-2.5 19.5T899-462q-64 118-174.5 190T480-200Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--visibility {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--visibility-off {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M764-84 624-222q-35 11-71 16.5t-73 5.5q-134 0-245-72T61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q22-39 47-76t58-66l-83-84q-11-11-11-27.5T84-820q11-11 28-11t28 11l680 680q11 11 11.5 27.5T820-84q-11 11-28 11t-28-11ZM480-320q11 0 21-1t20-4L305-541q-3 10-4 20t-1 21q0 75 52.5 127.5T480-320Zm0-480q134 0 245.5 72.5T900-537q5 8 7.5 17.5T910-500q0 10-2 19.5t-7 17.5q-19 37-42.5 70T806-331q-14 14-33 13t-33-15l-80-80q-7-7-9-16.5t1-19.5q4-13 6-25t2-26q0-75-52.5-127.5T480-680q-14 0-26 2t-25 6q-10 3-20 1t-17-9l-33-33q-19-19-12.5-44t31.5-32q25-5 50.5-8t51.5-3Zm79 226q11 13 18.5 28.5T587-513q1 8-6 11t-13-3l-82-82q-6-6-2.5-13t11.5-7q19 2 35 10.5t29 22.5Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M764-84 624-222q-35 11-71 16.5t-73 5.5q-134 0-245-72T61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q22-39 47-76t58-66l-83-84q-11-11-11-27.5T84-820q11-11 28-11t28 11l680 680q11 11 11.5 27.5T820-84q-11 11-28 11t-28-11ZM480-320q11 0 21-1t20-4L305-541q-3 10-4 20t-1 21q0 75 52.5 127.5T480-320Zm0-480q134 0 245.5 72.5T900-537q5 8 7.5 17.5T910-500q0 10-2 19.5t-7 17.5q-19 37-42.5 70T806-331q-14 14-33 13t-33-15l-80-80q-7-7-9-16.5t1-19.5q4-13 6-25t2-26q0-75-52.5-127.5T480-680q-14 0-26 2t-25 6q-10 3-20 1t-17-9l-33-33q-19-19-12.5-44t31.5-32q25-5 50.5-8t51.5-3Zm79 226q11 13 18.5 28.5T587-513q1 8-6 11t-13-3l-82-82q-6-6-2.5-13t11.5-7q19 2 35 10.5t29 22.5Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--visibility-off {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--warning {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm371-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm371-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--warning {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--brightness-medium {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M346-160H240q-33 0-56.5-23.5T160-240v-106l-77-78q-11-12-17-26.5T60-480q0-15 6-29.5T83-536l77-78v-106q0-33 23.5-56.5T240-800h106l78-77q12-11 26.5-17t29.5-6q15 0 29.5 6t26.5 17l78 77h106q33 0 56.5 23.5T800-720v106l77 78q11 12 17 26.5t6 29.5q0 15-6 29.5T877-424l-77 78v106q0 33-23.5 56.5T720-160H614l-78 77q-12 11-26.5 17T480-60q-15 0-29.5-6T424-83l-78-77Zm34-80 100 100 100-100h140v-140l100-100-100-100v-140H580L480-820 380-720H240v140L140-480l100 100v140h140Zm100-40q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680v400Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M346-160H240q-33 0-56.5-23.5T160-240v-106l-77-78q-11-12-17-26.5T60-480q0-15 6-29.5T83-536l77-78v-106q0-33 23.5-56.5T240-800h106l78-77q12-11 26.5-17t29.5-6q15 0 29.5 6t26.5 17l78 77h106q33 0 56.5 23.5T800-720v106l77 78q11 12 17 26.5t6 29.5q0 15-6 29.5T877-424l-77 78v106q0 33-23.5 56.5T720-160H614l-78 77q-12 11-26.5 17T480-60q-15 0-29.5-6T424-83l-78-77Zm34-80 100 100 100-100h140v-140l100-100-100-100v-140H580L480-820 380-720H240v140L140-480l100 100v140h140Zm100-40q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680v400Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--brightness-medium {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--light-mode {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM80-440q-17 0-28.5-11.5T40-480q0-17 11.5-28.5T80-520h80q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440H80Zm720 0q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520h80q17 0 28.5 11.5T920-480q0 17-11.5 28.5T880-440h-80ZM480-760q-17 0-28.5-11.5T440-800v-80q0-17 11.5-28.5T480-920q17 0 28.5 11.5T520-880v80q0 17-11.5 28.5T480-760Zm0 720q-17 0-28.5-11.5T440-80v-80q0-17 11.5-28.5T480-200q17 0 28.5 11.5T520-160v80q0 17-11.5 28.5T480-40ZM226-678l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226-678Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734-282l43 42q12 11 11.5 28T777-183q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678-734l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183-183q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282-226l-42 43q-11 12-28 11.5T183-183Zm297-297Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM80-440q-17 0-28.5-11.5T40-480q0-17 11.5-28.5T80-520h80q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440H80Zm720 0q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520h80q17 0 28.5 11.5T920-480q0 17-11.5 28.5T880-440h-80ZM480-760q-17 0-28.5-11.5T440-800v-80q0-17 11.5-28.5T480-920q17 0 28.5 11.5T520-880v80q0 17-11.5 28.5T480-760Zm0 720q-17 0-28.5-11.5T440-80v-80q0-17 11.5-28.5T480-200q17 0 28.5 11.5T520-160v80q0 17-11.5 28.5T480-40ZM226-678l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226-678Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734-282l43 42q12 11 11.5 28T777-183q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678-734l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183-183q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282-226l-42 43q-11 12-28 11.5T183-183Zm297-297Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--light-mode {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-icon--dark-mode {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-120q-151 0-255.5-104.5T120-480q0-138 90-239.5T440-838q13-2 23 3.5t16 14.5q6 9 6.5 21t-7.5 23q-17 26-25.5 55t-8.5 61q0 90 63 153t153 63q31 0 61.5-9t54.5-25q11-7 22.5-6.5T819-479q10 5 15.5 15t3.5 24q-14 138-117.5 229T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-120q-151 0-255.5-104.5T120-480q0-138 90-239.5T440-838q13-2 23 3.5t16 14.5q6 9 6.5 21t-7.5 23q-17 26-25.5 55t-8.5 61q0 90 63 153t153 63q31 0 61.5-9t54.5-25q11-7 22.5-6.5T819-479q10 5 15.5 15t3.5 24q-14 138-117.5 229T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-layout-text-default, #171a2b);
}
@media (forced-colors: active) {
  .kern-icon--dark-mode {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}

/**
 * @file _accordion.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0 
 * @brief Styles für die Accordion-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Accordion-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zuständ (:hover, :focus)
 */
.kern-accordion {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  border-radius: var(--kern-metric-border-radius-none, 0px);
  border-top: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border, #A5AAC3);
  border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border, #A5AAC3);
}
.kern-accordion + .kern-accordion {
  margin-top: calc(var(--kern-metric-border-width-light) * -1);
}
.kern-accordion[open] > summary::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-action-default, #1A3DA5);
}
@media (forced-colors: active) {
  .kern-accordion[open] > summary::after {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kern-metric-space-small, 8px);
  flex: 1 0 0;
  padding: var(--kern-metric-space-default, 16px) var(--kern-metric-space-x-small, 4px);
  list-style-type: none;
}
.kern-accordion__header::-webkit-details-marker, .kern-accordion__header::marker {
  display: none;
}
.kern-accordion__header::after {
  content: "";
  width: var(--kern-metric-dimension-default, 24px);
  min-width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E");
  mask-size: cover;
  mask-repeat: no-repeat;
  background-color: var(--kern-color-action-default, #1A3DA5);
}
@media (forced-colors: active) {
  .kern-accordion__header::after {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-accordion__header:hover {
  background: var(--kern-color-action-state-indicator-tint-hover-opacity);
  cursor: pointer;
}
.kern-accordion__header:not([tabindex="-1"]):focus-visible {
  position: relative;
  z-index: 1;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--kern-color-action-on-default), 0 0 0 4px var(--kern-color-action-focus-border-inside), 0 0 0 6px var(--kern-color-action-focus-border-outside);
}
@media (forced-colors: active) {
  .kern-accordion__header:not([tabindex="-1"]):focus-visible {
    outline-offset: 4px !important;
    outline-width: 3px !important;
    outline-color: transparent !important;
  }
}
.kern-accordion__header .kern-title {
  color: var(--kern-color-action-default, #1A3DA5);
  flex: 1;
  overflow-wrap: break-word;
}
.kern-accordion__body {
  padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-small, 4px);
}

/**
 * @file _alert.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Alert-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Alert-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Variationen (info, success, warning und danger)
 * Alle Variationen können mit und ohne body text dargestellt werden.
 */
.kern-alert {
  border-radius: var(--kern-metric-border-radius-default, 4px);
  border: var(--kern-metric-border-width-default, 2px) solid transparent;
}
.kern-alert--info {
  border-color: var(--kern-color-feedback-info, #006490);
  background-color: var(--kern-color-feedback-info-background, #E0F4FC);
}
.kern-alert--info .kern-icon--info {
  background-color: var(--kern-color-feedback-info, #006490);
}
@media (forced-colors: active) {
  .kern-alert--info .kern-icon--info {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-alert--success {
  border-color: var(--kern-color-feedback-success, #006B51);
  background-color: var(--kern-color-feedback-success-background, #DEF6ED);
}
.kern-alert--success .kern-icon--success {
  background-color: var(--kern-color-feedback-success, #006B51);
}
@media (forced-colors: active) {
  .kern-alert--success .kern-icon--success {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-alert--warning {
  border-color: var(--kern-color-feedback-warning, #8A4F00);
  background-color: var(--kern-color-feedback-warning-background, #FFEFD0);
}
.kern-alert--warning .kern-icon--warning {
  background-color: var(--kern-color-feedback-warning, #8A4F00);
}
@media (forced-colors: active) {
  .kern-alert--warning .kern-icon--warning {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-alert--danger {
  border-color: var(--kern-color-feedback-danger, #BD0F09);
  background-color: var(--kern-color-feedback-danger-background, #FEECE8);
}
.kern-alert--danger .kern-icon--danger {
  background-color: var(--kern-color-feedback-danger, #BD0F09);
}
@media (forced-colors: active) {
  .kern-alert--danger .kern-icon--danger {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-alert__header {
  display: flex;
  padding: var(--kern-metric-space-default, 16px);
  align-items: center;
}
.kern-alert__header .kern-icon {
  width: var(--kern-component-alert-icon-size, 32px);
  min-width: var(--kern-component-alert-icon-size, 32px);
  height: var(--kern-component-alert-icon-size, 32px);
  min-height: var(--kern-component-alert-icon-size, 32px);
}
.kern-alert .kern-title {
  padding-left: var(--kern-metric-space-small, 8px);
  padding-right: var(--kern-metric-space-small, 8px);
}
.kern-alert__body {
  padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-default, 16px) var(--kern-metric-space-large, 24px);
  background: var(--kern-color-layout-background-default, #FFF);
  display: flex;
  flex-direction: column;
  gap: var(--kern-metric-space-small, 8px);
}

/**
 * @file _badge.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Badge-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Badge-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Variationen (info, success, warning und danger)
 * Alle Variationen können mit und ohne Icon dargestellt werden.
 */
.kern-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--kern-metric-space-2x-small, 2px) var(--kern-metric-space-default, 16px) var(--kern-metric-space-2x-small, 2px) var(--kern-component-badge-space-left, 12px);
  border-radius: var(--kern-metric-border-radius-default, 4px);
  min-height: var(--kern-metric-dimension-large, 32px);
}
.kern-badge .kern-label {
  padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px);
}
.kern-badge .kern-icon {
  width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
}
.kern-badge--info {
  background: var(--kern-color-feedback-info-background, #E0F4FC);
  border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-info, #006490);
}
.kern-badge--info .kern-icon {
  background-color: var(--kern-color-feedback-info, #006490);
}
@media (forced-colors: active) {
  .kern-badge--info .kern-icon {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-badge--success {
  background: var(--kern-color-feedback-success-background, #DEF6ED);
  border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-success, #006B51);
}
.kern-badge--success .kern-icon {
  background-color: var(--kern-color-feedback-success, #006B51);
}
@media (forced-colors: active) {
  .kern-badge--success .kern-icon {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-badge--warning {
  background: var(--kern-color-feedback-warning-background, #FFEFD0);
  border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-warning, #8A4F00);
}
.kern-badge--warning .kern-icon {
  background-color: var(--kern-color-feedback-warning, #8A4F00);
}
@media (forced-colors: active) {
  .kern-badge--warning .kern-icon {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-badge--danger {
  background: var(--kern-color-feedback-danger-background, #FEECE8);
  border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-danger, #BD0F09);
}
.kern-badge--danger .kern-icon {
  background-color: var(--kern-color-feedback-danger, #BD0F09);
}
@media (forced-colors: active) {
  .kern-badge--danger .kern-icon {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}

/**
 * @file _button.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Button-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Button-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zustände (:hover, :active, :focus, :disabled) und mögliche
 * Variationen (primary, secondary und tertiary).
 */
.kern-btn {
  display: inline-flex;
  min-height: var(--kern-metric-dimension-x-large, 48px);
  padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
  justify-content: center;
  align-items: center;
  vertical-align: top;
  gap: var(--kern-metric-space-none, 0px);
  border: none;
  border-radius: var(--kern-metric-border-radius-default, 4px);
  position: relative;
}
.kern-btn:has(.kern-sr-only) {
  width: var(--kern-metric-dimension-x-large, 48px);
}
@media (max-width: 767px) {
  .kern-btn:has(.kern-sr-only-mobile) {
    width: var(--kern-metric-dimension-x-large, 48px);
  }
}
.kern-btn .kern-label {
  padding: var(--kern-metric-space-small, 8px);
}
.kern-btn:not(:disabled):hover {
  cursor: pointer;
}
.kern-btn:not([disabled]):not([tabindex="-1"]):focus {
  border-radius: var(--kern-metric-border-radius-default, 0.25rem);
  box-shadow: 0 0 0 2px var(--kern-color-action-on-default), 0 0 0 4px var(--kern-color-action-focus-border-inside), 0 0 0 6px var(--kern-color-action-focus-border-outside);
}
@media (forced-colors: active) {
  .kern-btn:not([disabled]):not([tabindex="-1"]):focus:focus-visible {
    outline-offset: 4px !important;
    outline-width: 3px !important;
    outline-color: transparent !important;
  }
}
.kern-btn:disabled, .kern-btn[disabled] {
  cursor: not-allowed;
}
.kern-btn--block {
  width: 100%;
}
.kern-btn--primary {
  background: var(--kern-color-action-default, #1A3DA5);
}
@media (forced-colors: active) {
  .kern-btn--primary {
    border: 3px solid transparent;
  }
}
.kern-btn--primary .kern-label {
  color: var(--kern-color-action-on-default, #FFF);
}
.kern-btn--primary > .kern-icon {
  background-color: var(--kern-color-action-on-default, #FFF);
}
@media (forced-colors: active) {
  .kern-btn--primary > .kern-icon {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-btn--primary:not(:disabled):hover {
  background: var(--kern-color-action-state-indicator-shade-hover);
}
.kern-btn--primary:active {
  background: var(--kern-color-action-state-indicator-shade-active);
}
.kern-btn--primary:disabled, .kern-btn--primary[disabled] {
  background: var(--action-default, #1A3DA5);
  opacity: var(--action-state-opacity-disabled, 0.4);
}
.kern-btn--secondary {
  border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default, #1A3DA5);
  background: transparent;
}
.kern-btn--secondary .kern-label {
  color: var(--kern-color-action-default, #1A3DA5);
}
.kern-btn--secondary > .kern-icon {
  background-color: var(--kern-color-action-default, #1A3DA5);
}
@media (forced-colors: active) {
  .kern-btn--secondary > .kern-icon {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-btn--secondary:not(:disabled):hover {
  background: var(--kern-color-action-state-indicator-tint-hover-opacity);
}
.kern-btn--secondary:active {
  background: var(--kern-color-action-state-indicator-tint-active-opacity);
}
.kern-btn--secondary:disabled, .kern-btn--secondary[disabled] {
  opacity: var(--action-state-opacity-disabled, 0.4);
}
@media (forced-colors: active) {
  .kern-btn--secondary {
    border: 1px solid transparent !important;
  }
}
.kern-btn--tertiary {
  background: transparent;
}
.kern-btn--tertiary .kern-label {
  color: var(--kern-color-action-default, #1A3DA5);
}
.kern-btn--tertiary > .kern-icon {
  background-color: var(--kern-color-action-default, #1A3DA5);
}
@media (forced-colors: active) {
  .kern-btn--tertiary > .kern-icon {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-btn--tertiary:not(:disabled):hover {
  background: var(--kern-color-action-state-indicator-tint-hover-opacity);
}
.kern-btn--tertiary:active {
  background: var(--kern-color-action-state-indicator-tint-active-opacity);
}
.kern-btn--tertiary:disabled, .kern-btn--tertiary[disabled] {
  opacity: var(--action-state-opacity-disabled, 0.4);
}
.kern-btn--tertiary .kern-label {
  text-decoration: underline;
}
.kern-btn--tertiary:hover .kern-label {
  text-decoration-thickness: var(--kern-3, 3px);
}
.kern-btn--tertiary:hover:disabled .kern-label, .kern-btn--tertiary:hover[disabled] .kern-label {
  text-decoration-thickness: var(--kern-metric-border-width-light, 1px);
}
.kern-btn--tertiary:has(.kern-icon) .kern-label {
  text-decoration: none;
}

/**
 * @file _card.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 29.11.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Card-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Card-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Variationen (default, small, large und active)
 * Zustände active Card (:hover, :focus: :active), gesammte Card ist als Link klickbar.
 * Cards innerhalb einer Zeile werden gleiche höhe dargestellt, 
 * Mit Modifier (hug) hat Cards eigene höhe.
 */
.kern-card {
  display: flex;
  padding: var(--kern-metric-space-none, 0px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-none, 0px);
  flex-shrink: 0;
  border-radius: var(--kern-metric-border-radius-default, 4px);
  border: var(--kern-metric-border-width-light, 1px) solid var(--layout-border, #A5AAC3);
  background: var(--kern-color-layout-background-default, #FFF);
  height: 100%;
}
.kern-card--hug {
  height: auto;
}
.kern-card--hug .kern-card__container {
  height: auto;
}
.kern-card__media {
  display: flex;
  padding: 0px var(--kern-metric-space-none, 0px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.kern-card__media * {
  width: 100%;
  overflow: hidden;
  border-top-left-radius: var(--kern-metric-border-radius-default, 4px);
  border-top-right-radius: var(--kern-metric-border-radius-default, 4px);
}
.kern-card__container {
  display: flex;
  padding: var(--kern-metric-space-large, 24px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-default, 16px);
  align-self: stretch;
  height: 100%;
}
.kern-card__header {
  display: flex;
  padding: var(--kern-metric-space-none, 0px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-none, 0px);
  align-self: stretch;
}
.kern-card__body {
  display: flex;
  padding: var(--kern-metric-space-none, 0px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-small, 8px);
  align-self: stretch;
  flex: 1 1 auto;
}
.kern-card__footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: var(--kern-metric-space-default, 16px);
  align-items: flex-start;
  gap: var(--kern-metric-space-default, 16px);
  align-self: stretch;
}
.kern-card__footer .kern-btn {
  flex: 1 1 0;
  min-width: fit-content;
}
.kern-card--active {
  position: relative;
}
.kern-card--active .kern-link--stretched {
  color: var(--kern-color-action-default, #1A3DA5);
  letter-spacing: var(--kern-metric-space-none, 0px);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: var(--kern-1, 1px);
  /* 4.762% */
  text-underline-offset: var(--kern-2, 2px);
  /* 9.524% */
  text-underline-position: from-font;
}
.kern-card--active .kern-link--stretched:after {
  position: absolute;
  top: var(--kern-metric-space-none, 0px);
  right: var(--kern-metric-space-none, 0px);
  bottom: var(--kern-metric-space-none, 0px);
  left: var(--kern-metric-space-none, 0px);
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: transparent;
}
.kern-card--active .kern-link--stretched:hover {
  text-decoration-thickness: 3px;
  /* 14.286% */
}
.kern-card--active .kern-link--stretched:hover:after {
  background: var(--kern-color-action-state-indicator-tint-hover-opacity);
}
.kern-card--active .kern-link--stretched:active:after {
  background: var(--kern-color-action-state-indicator-tint-active-opacity);
}
.kern-card--active .kern-link--stretched:focus-visible {
  outline-color: transparent;
}
.kern-card--active .kern-link--stretched:focus-visible:after {
  border-radius: var(--kern-metric-border-radius-default, 0.25rem);
  box-shadow: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 2px var(--kern-color-action-on-default), var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 4px var(--kern-color-action-focus-border-inside), var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 6px var(--kern-color-action-focus-border-outside);
}
@media (forced-colors: active) {
  .kern-card--active .kern-link--stretched:focus-visible:after {
    outline-offset: 4px !important;
    outline-width: 3px !important;
    outline-color: transparent !important;
  }
}
.kern-card--small .kern-card__container {
  padding: var(--kern-metric-space-default, 16px);
  gap: var(--kern-metric-space-small, 8px);
}
.kern-card--small .kern-card__container .kern-card__header .kern-preline {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-preline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-small, 16px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}
.kern-card--small .kern-card__container .kern-card__header .kern-title {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-title-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}
.kern-card--small .kern-card__container .kern-card__header .kern-subline {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-subline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-small-padding-bottom, 9px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-small, 16px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}
.kern-card--small .kern-card__container .kern-card__body .kern-body {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-small, 16px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}
.kern-card--large .kern-card__container {
  padding: var(--kern-metric-space-x-large, 32px);
  gap: var(--kern-metric-space-large, 24px);
}
.kern-card--large .kern-card__container .kern-card__header .kern-preline {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-preline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-large, 21px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-large, 32px);
}
.kern-card--large .kern-card__container .kern-card__header .kern-title {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-title-large-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-large-padding-bottom, 9px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-adaptive-large, 26px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-adaptive-large, 32px);
}
.kern-card--large .kern-card__container .kern-card__header .kern-subline {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-subline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-large, 21px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-static-large, 32px);
}
.kern-card--large .kern-card__container .kern-card__body .kern-body {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-large, 21px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-large, 32px);
}

/**
 * @file _check.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Checkbox und Radio Komponente.
 *
 * Diese Datei enthält gemeinsame CSS-Regeln, um die Checkbox und Radio Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zuständ (:hover, :focus, :checked, disabled)
 */
.kern-form-check {
  display: grid;
  grid-template-columns: var(--kern-metric-dimension-large, 32px) auto;
  align-items: start;
  padding-right: var(--kern-metric-space-default, 16px);
  gap: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px);
}
.kern-form-check__radio, .kern-form-check__checkbox {
  width: var(--kern-metric-dimension-large, 32px);
  height: var(--kern-metric-dimension-large, 32px);
  border: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171a2b);
  background: var(--kern-color-form-input-background, #f7f7f9);
  margin: var(--kern-metric-space-none, 0px);
  appearance: none;
}
.kern-form-check__radio:hover, .kern-form-check__checkbox:hover {
  border: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border, #171a2b);
}
.kern-form-check__radio:focus, .kern-form-check__radio:focus-visible, .kern-form-check__checkbox:focus, .kern-form-check__checkbox:focus-visible {
  box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-form-input-border, #171a2b);
  outline-color: transparent;
  border: var(--kern-metric-border-width-none, 0px);
  forced-color-adjust: none;
}
@media (forced-colors: active) {
  .kern-form-check__radio:focus, .kern-form-check__radio:focus-visible, .kern-form-check__checkbox:focus, .kern-form-check__checkbox:focus-visible {
    outline-offset: 4px !important;
    outline-width: 3px !important;
    outline-color: transparent !important;
  }
}
.kern-form-check__radio:focus:hover, .kern-form-check__radio:focus-visible:hover, .kern-form-check__checkbox:focus:hover, .kern-form-check__checkbox:focus-visible:hover {
  border: var(--kern-metric-border-width-none, 0px);
}
.kern-form-check__radio:checked:focus, .kern-form-check__radio:checked:focus-visible, .kern-form-check__checkbox:checked:focus, .kern-form-check__checkbox:checked:focus-visible {
  box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-form-input-border, #171a2b);
  outline-color: transparent;
  border: var(--kern-metric-border-width-none, 0px);
  forced-color-adjust: none;
}
@media (forced-colors: active) {
  .kern-form-check__radio:checked:focus, .kern-form-check__radio:checked:focus-visible, .kern-form-check__checkbox:checked:focus, .kern-form-check__checkbox:checked:focus-visible {
    outline-offset: 4px !important;
    outline-width: 3px !important;
    outline-color: transparent !important;
  }
}
.kern-form-check__radio:checked:focus:hover, .kern-form-check__radio:checked:focus-visible:hover, .kern-form-check__checkbox:checked:focus:hover, .kern-form-check__checkbox:checked:focus-visible:hover {
  border: var(--kern-metric-border-width-none, 0px);
}
.kern-form-check__radio--error:focus, .kern-form-check__radio--error:focus-visible, .kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible {
  box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger, #bd0f09);
  outline: var(--kern-metric-border-width-none, 0px);
}
@media (forced-colors: active) {
  .kern-form-check__radio--error:focus, .kern-form-check__radio--error:focus-visible, .kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible {
    box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-layout-background-inverted) !important;
    background-color: var(--kern-color-layout-background-default) !important;
  }
}
.kern-form-check__radio--error:checked:focus, .kern-form-check__radio--error:checked:focus-visible, .kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible {
  box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger, #bd0f09) !important;
  outline: var(--kern-metric-border-width-none, 0px);
}
@media (forced-colors: active) {
  .kern-form-check__radio--error:checked:focus, .kern-form-check__radio--error:checked:focus-visible, .kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible {
    box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-layout-background-inverted) !important;
    background-color: var(--kern-color-layout-background-default) !important;
  }
}
.kern-form-check__radio[disabled], .kern-form-check__checkbox[disabled] {
  outline: 0;
  opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
}
.kern-form-check__radio[disabled]:checked, .kern-form-check__checkbox[disabled]:checked {
  outline: var(--kern-metric-border-width-none, 0px);
}
.kern-form-check__radio[disabled]:hover, .kern-form-check__checkbox[disabled]:hover {
  cursor: default;
}
.kern-form-check__radio[disabled] ~ .kern-label, .kern-form-check__checkbox[disabled] ~ .kern-label {
  opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
  cursor: default;
}
.kern-form-check .kern-label {
  font-weight: var(--kern-typography-font-weight-regular, 400);
  padding-top: var(--kern-metric-space-x-small, 4px);
}
.kern-form-check .kern-label:has(.kern-label__optional) {
  display: flex;
  align-items: center;
  align-content: center;
  gap: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px);
  align-self: stretch;
  flex-wrap: wrap;
}
.kern-form-check .kern-label__optional {
  color: var(--kern-color-layout-text-muted, #404565);
  font-weight: var(--kern-typography-font-weight-regular, 400);
}
.kern-form-check .kern-error {
  grid-column: span 2;
}
.kern-form-check .kern-error .kern-icon {
  width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
  min-width: var(--kern-metric-dimension-default, 24px);
  min-height: var(--kern-metric-dimension-default, 24px);
}
.kern-form-check--error {
  border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-feedback-danger, #bd0f09);
  padding-left: var(--kern-metric-space-default, 16px);
}
.kern-form-check--error .kern-form-check__checkbox--error {
  border-color: var(--kern-color-feedback-danger, #bd0f09) !important;
  outline-color: var(--kern-color-feedback-danger, #bd0f09) !important;
  background: var(--kern-color-feedback-danger-background, #feece8);
}
.kern-form-check--error .kern-form-check__radio:before {
  background-color: var(--kern-color-feedback-danger, #bd0f09);
}

/**
 * @file _checkbox.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Checkbox Komponente.
 *
 * Diese Datei enthält, von der _check.scss abweichende, CSS-Regeln, um die Checkbox Komponente
 * visuell darzustellen.
 */
.kern-form-check__checkbox {
  border-radius: var(--kern-metric-border-radius-small, 2px);
}
.kern-form-check__checkbox::before {
  content: "";
}
.kern-form-check__checkbox:focus::before, .kern-form-check__checkbox:focus-visible::before {
  margin: var(--kern-6, 6px);
}
.kern-form-check__checkbox:checked::before {
  display: block;
  position: relative;
  left: var(--kern-3, 3px);
  top: var(--kern-8, 8px);
  transform: rotate(47deg) translate(-50%, -50%);
  background-color: transparent;
  border-width: var(--kern-metric-space-none, 0px) var(--kern-metric-border-width-default, 2px) var(--kern-metric-border-width-default, 2px) var(--kern-metric-space-none, 0px);
  border-color: var(--kern-color-form-input-border, #171A2B);
  border-style: solid;
  height: var(--kern-metric-dimension-x-small, 16px);
  width: var(--kern-metric-dimension-2x-small, 8px);
  margin: 4px;
}
.kern-form-check__checkbox:checked:hover::before {
  margin: var(--kern-metric-space-2x-small, 2px);
}
.kern-form-check__checkbox:checked:focus::before, .kern-form-check__checkbox:checked:focus-visible::before {
  margin: var(--kern-6, 6px);
}
.kern-form-check__checkbox--error {
  border-color: var(--kern-color-feedback-danger, #BD0F09) !important;
  outline-color: var(--kern-color-feedback-danger, #BD0F09) !important;
  background: var(--kern-color-feedback-danger-background, #FEECE8);
}
.kern-form-check__checkbox--error:checked::before {
  border-color: var(--kern-color-feedback-danger, #BD0F09);
}
@media (forced-colors: active) {
  .kern-form-check__checkbox--error:checked::before {
    border-color: var(--kern-color-layout-background-inverted) !important;
  }
}
.kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible {
  box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger, #BD0F09);
  outline: var(--kern-metric-border-width-none, 0px);
  border: var(--kern-metric-border-width-none, 0px);
}
.kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible {
  box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger, #BD0F09);
  outline: var(--kern-metric-border-width-none, 0px);
  border: var(--kern-metric-border-width-none, 0px);
}

/**
 * @file _dialog.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 23.05.2025
 * 2.3.0
 * @brief Styles für die Dialog Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Dialog Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 */
.kern-dialog {
  max-width: var(--kern-small, 768px);
  border-radius: var(--kern-metric-border-radius-large, 8px);
  border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border, #A5AAC3);
  background: var(--kern-color-layout-background-default, #FFF);
  padding: var(--kern-metric-space-none, 0px);
}
.kern-dialog__header {
  display: flex;
  justify-content: space-between;
  min-height: var(--kern-metric-dimension-3x-large, 64px);
  padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-large, 32px);
  align-items: flex-start;
  gap: var(--kern-metric-space-default, 16px);
}
.kern-dialog .kern-title {
  display: flex;
  align-items: flex-start;
  gap: var(--kern-metric-space-none, 0px);
  flex: 1 0 0;
}
.kern-dialog__body {
  display: flex;
  padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-x-large, 32px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-large, 32px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-default, 16px);
}
.kern-dialog__footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--kern-metric-space-default, 16px);
  padding: var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-large, 32px) var(--kern-metric-space-x-large, 32px) var(--kern-metric-space-x-large, 32px);
  border-top: 1px solid var(--kern-color-layout-border, #A5AAC3);
}
@media (max-width: 576px) {
  .kern-dialog__footer {
    flex-direction: column;
  }
}
.kern-dialog__footer .kern-btn {
  flex-grow: 1;
  align-self: stretch;
}
.kern-dialog__footer .kern-btn + .kern-btn {
  margin-left: var(--kern-metric-space-none, 0px);
}
.kern-dialog::backdrop {
  background: var(--kern-color-layout-background-overlay);
}
@media (max-width: 768px) {
  .kern-dialog {
    overflow-y: auto;
    min-width: 100%;
    max-width: 100%;
    margin-bottom: var(--kern-metric-space-none, 0px);
    border-radius: var(--border-radius-large, 8px) var(--kern-metric-border-radius-large, 8px) var(--kern-metric-border-radius-none, 0px) var(--kern-metric-border-radius-none, 0px);
  }
}

/**
 * @file _description-list.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 23.05.2025
 * 2.3.0
 * @brief Styles für die Description-list Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die description-list Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Description-list ist ein Key / Value pairs darstellung
 * Variationen (horizontal und vertikal) 
 */
.kern-description-list {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-small, 8px);
}
.kern-description-list p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
.kern-description-list--col .kern-description-list-item {
  gap: var(--kern-metric-border-width-none, 0px);
}
.kern-description-list--col .kern-description-list-item__key, .kern-description-list--col .kern-description-list-item__value {
  width: 100%;
  max-width: 100%;
}
.kern-description-list-item {
  display: flex;
  padding: var(--kern-metric-space-none, 0px);
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--kern-metric-space-none, 0px);
  align-self: stretch;
  flex-wrap: wrap;
  flex-direction: column;
  word-break: break-word;
}
@media (min-width: 768px) {
  .kern-description-list-item {
    flex-direction: row;
    gap: var(--kern-metric-space-x-large, 32px);
  }
}
.kern-description-list-item__key {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
}
@media (min-width: 768px) {
  .kern-description-list-item__key {
    width: 30%;
    max-width: var(--kern-component-description-list-term-max-width, 352px);
  }
}
.kern-description-list-item__value {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}
.kern-description-list-item__value ul {
  list-style: none;
  padding-left: var(--kern-metric-border-width-none, 0px);
}
@media (min-width: 768px) {
  .kern-description-list-item__value {
    width: calc(70% - var(--kern-metric-space-x-large, 32px));
  }
}

/**
 * @file _divider.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Divider Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Divider Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 */
.kern-divider {
  border: var(--kern-metric-border-radius-none, 0px);
  margin: var(--kern-metric-space-none, 0px);
  height: var(--kern-metric-border-width-light, 1px);
  background-color: var(--kern-color-layout-border, #A5AAC3);
}
@media (forced-colors: active) {
  .kern-divider {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}

/**
 * @file _dropdown.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 23.05.2025
 * @version 2.x.x
 * @brief Styles für die Dropdown Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Dropdown Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Dropdown ist noch in der Entwicklungsphase und noch nicht teil des Framworks
 */
.kern-dropdown details[open] summary::before {
  content: "";
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: var(--kern-metric-space-none, 0px);
  left: var(--kern-metric-space-none, 0px);
  cursor: auto;
}
.kern-dropdown details summary {
  cursor: pointer;
  list-style-type: none;
  display: inline-flex;
  min-height: var(--kern-metric-dimension-x-large, 48px);
  justify-content: center;
  align-items: center;
  vertical-align: top;
  gap: var(--kern-metric-space-none, 0px);
  border: none;
  border-radius: var(--kern-metric-border-radius-default, 4px);
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
  color: var(--kern-color-action-default, #1A3DA5);
  background: rgba(26, 61, 165, 0);
}
.kern-dropdown details summary:hover {
  background: var(--kern-color-action-state-indicator-tint-hover);
}
.kern-dropdown details summary + ul li label {
  width: 100%;
  display: block;
}
.kern-dropdown details summary + ul li label input {
  all: unset;
}
.kern-dropdown details summary + ul li {
  margin-bottom: var(--kern-metric-space-none, 0px);
  padding: 1rem;
  list-style: none;
}
.kern-dropdown details summary + ul {
  display: flex;
  z-index: 99;
  position: absolute;
  left: 0;
  flex-direction: column;
  border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default, #1A3DA5);
}

/**
 * @file _fieldset.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 17.07.2025
 * 2.3.0
 * @brief Styles für die Fieldset Komponenten.
 *
 * Diese Datei enthält die CSS-Regeln, um die Fieldset Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zuständ (kann Fehlermaeldung für mehrere Komponenten darstellen).
 */
.kern-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-small, 8px);
}
.kern-fieldset--error {
  border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-feedback-danger, #BD0F09);
  padding-left: var(--kern-metric-space-default, 16px);
}
.kern-fieldset legend {
  float: left;
}
.kern-fieldset legend.kern-label {
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
}
.kern-fieldset .kern-label:has(.kern-label__optional) {
  display: flex;
  align-items: center;
  align-content: center;
  gap: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px);
  align-self: stretch;
  flex-wrap: wrap;
}
.kern-fieldset .kern-label__optional {
  color: var(--kern-color-layout-text-muted, #404565);
  font-weight: var(--kern-typography-font-weight-regular, 400);
}
.kern-fieldset__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--kern-metric-space-default, 16px);
}
.kern-fieldset__body--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}
.kern-fieldset .kern-error .kern-icon {
  width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
  min-width: var(--kern-metric-dimension-default, 24px);
  min-height: var(--kern-metric-dimension-default, 24px);
}

/**
 * @file _input.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Form Input Komponenten.
 *
 * Diese Datei enthält gemeinsame CSS-Regeln, um die Input Komponenten
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zuständ (:hover, :focus, read-only, disabled)
 */
.kern-form-input {
  display: flex;
  padding: var(--kern-metric-space-none, 0px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-small, 8px);
  align-self: stretch;
  /* File-INPUT */
}
.kern-form-input:has(input[disabled], textarea[disabled]) {
  cursor: not-allowed;
}
.kern-form-input:has(input[disabled], textarea[disabled]) .kern-label {
  cursor: not-allowed;
}
.kern-form-input .kern-label:has(.kern-label__optional) {
  display: flex;
  align-items: center;
  align-content: center;
  gap: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px);
  align-self: stretch;
  flex-wrap: wrap;
}
.kern-form-input .kern-label__optional {
  color: var(--kern-color-layout-text-muted, #404565);
  font-weight: var(--kern-typography-font-weight-regular, 400);
}
.kern-form-input__input {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
  height: var(--kern-metric-dimension-x-large, 48px);
  align-items: center;
  align-self: stretch;
  border-radius: var(--kern-metric-border-radius-small, 2px);
  border: none;
  border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171A2B);
  background: var(--kern-color-form-input-background, #F7F7F9);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  text-overflow: ellipsis;
}
@media (forced-colors: active) {
  .kern-form-input__input {
    border: 1px solid transparent !important;
  }
}
.kern-form-input__input:hover {
  border-width: var(--kern-metric-border-width-bold, 4px);
  padding-top: calc(var(--kern-metric-border-width-bold, 4px) - var(--kern-metric-border-width-default, 2px));
}
.kern-form-input__input:focus {
  border-radius: var(--kern-metric-border-radius-small, 2px);
  outline: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border, #171A2B);
  background: var(--kern-color-form-input-background, #F7F7F9);
  border: none;
  padding-bottom: calc(var(--kern-metric-border-width-bold, 4px) - var(--kern-metric-border-width-default, 2px));
}
.kern-form-input__input:focus:hover {
  padding-top: var(--kern-metric-space-none, 0px);
}
.kern-form-input__input[readonly], .kern-form-input__input[readonly=readonly] {
  border-radius: var(--kern-metric-border-radius-none, 0px);
  border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border, #A5AAC3);
  background: inherit;
  cursor: not-allowed;
}
@media (forced-colors: active) {
  .kern-form-input__input[readonly], .kern-form-input__input[readonly=readonly] {
    border: 1px solid transparent !important;
  }
}
.kern-form-input__input[readonly]:hover, .kern-form-input__input[readonly=readonly]:hover {
  padding-top: var(--kern-metric-space-none, 0px);
}
.kern-form-input__input[readonly]:focus, .kern-form-input__input[readonly=readonly]:focus {
  border-radius: var(--kern-metric-border-radius-small, 2px);
  padding-top: var(--kern-metric-border-width-light, 1px);
  border-width: var(--kern-metric-border-width-none, 0);
}
.kern-form-input__input[disabled], .kern-form-input__input[disabled=disabled] {
  opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
  cursor: not-allowed;
}
.kern-form-input__input[disabled]:hover, .kern-form-input__input[disabled=disabled]:hover {
  border-width: var(--kern-metric-border-width-default, 2px);
  padding-top: var(--kern-metric-space-none, 0px);
}
.kern-form-input__input--error {
  border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-feedback-danger, #BD0F09);
  background: var(--kern-color-feedback-danger-background, #FEECE8);
}
@media (forced-colors: active) {
  .kern-form-input__input--error {
    border: 1px solid transparent !important;
  }
}
.kern-form-input__input--error:focus {
  outline-color: var(--kern-color-feedback-danger, #BD0F09);
  background: var(--kern-color-feedback-danger-background, #FEECE8);
  border: none;
}
.kern-form-input__input--width-2 {
  max-width: var(--kern-metric-dimension-2x-large);
}
.kern-form-input__input--width-4 {
  max-width: var(--kern-metric-dimension-4x-large);
}
.kern-form-input input[type=file].kern-form-input__input {
  order: 4;
  display: flex;
  padding: var(--kern-metric-space-large, 24px);
  gap: 16px var(--kern-metric-space-default, 16px);
  align-items: flex-start;
  align-self: stretch;
  border-radius: var(--kern-metric-border-radius-small, 2px);
  outline: var(--kern-metric-border-width-default, 2px) dashed var(--kern-color-form-input-border, #171A2B);
  border: none;
  height: inherit;
}
.kern-form-input input[type=file].kern-form-input__input:hover {
  outline: none;
  box-shadow: inset var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-border-width-bold, 4px) var(--kern-color-form-input-border, #171A2B);
  cursor: pointer;
}
@media (forced-colors: active) {
  .kern-form-input input[type=file].kern-form-input__input:hover {
    outline: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-layout-background-inverted);
    outline-offset: -4px;
  }
}
.kern-form-input input[type=file].kern-form-input__input:focus {
  outline: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border, #171A2B);
}
.kern-form-input input[type=file].kern-form-input__input:focus:hover {
  box-shadow: none;
}
.kern-form-input input[type=file].kern-form-input__input[disabled], .kern-form-input input[type=file].kern-form-input__input[disabled=disabled] {
  outline: var(--kern-metric-border-width-default, 2px) dashed var(--kern-color-form-input-border, #171A2B);
  box-shadow: none;
  cursor: not-allowed;
}
.kern-form-input input[type=file].kern-form-input__input::file-selector-button {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  margin-right: var(--kern-metric-space-default, 16px);
  min-height: var(--kern-metric-dimension-x-large, 48px);
  padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
  border: none;
  border-radius: var(--kern-metric-border-radius-default, 4px);
  border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default, #1A3DA5);
  color: var(--kern-color-action-default, #1A3DA5);
  background: rgba(26, 61, 165, 0);
}
.kern-form-input .kern-error {
  order: 5;
}
.kern-form-input .kern-error .kern-icon {
  width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
  min-width: var(--kern-metric-dimension-default, 24px);
  min-height: var(--kern-metric-dimension-default, 24px);
}
.kern-form-input--error {
  border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-feedback-danger, #BD0F09);
  padding-left: var(--kern-metric-space-default, 16px);
  /* File-INPUT */
}
.kern-form-input--error input[type=file].kern-form-input__input,
.kern-form-input--error .kern-form-input__input[type=file] {
  outline-color: var(--kern-color-feedback-danger, #BD0F09);
}
.kern-form-input--error input[type=file].kern-form-input__input:hover,
.kern-form-input--error .kern-form-input__input[type=file]:hover {
  background: var(--kern-color-feedback-danger-background, #FEECE8);
  box-shadow: inset var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger, #BD0F09);
}
.kern-form-input--error input[type=file].kern-form-input__input:focus,
.kern-form-input--error .kern-form-input__input[type=file]:focus {
  outline-color: var(--kern-color-feedback-danger, #BD0F09);
}

textarea {
  padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px) !important;
  min-height: var(--kern-metric-dimension-5x-large, 96px);
}
textarea.kern-form-input__input:hover {
  padding-top: var(--kern-metric-space-none, 0px);
}

input[type=checkbox],
input[type=color],
input[type=file],
input[type=radio],
input[type=range],
input[type=file],
input[type=file]::-webkit-file-upload-button,
label,
option,
select {
  cursor: pointer;
}

/**
 * @file _kopfzeile.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * Version: 2.3.0
 * @brief Styles für die Kopfzeile-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Kopfzeile-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 */
.kern-kopfzeile {
  background: var(--kern-color-layout-background-hued, #F7F7F9);
  padding: var(--kern-component-kopfzeile-padding, 5px) var(--kern-metric-space-none, 0px);
}
@media (forced-colors: active) {
  .kern-kopfzeile {
    border-bottom: 1px solid transparent;
  }
}
.kern-kopfzeile__content {
  display: flex;
  padding: var(--kern-1, 1px) var(--kern-metric-space-none, 0px);
  align-items: center;
  gap: var(--kern-metric-space-small, 8px);
}
.kern-kopfzeile__flagge {
  display: flex;
  width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-small, 20px);
  padding: var(--kern-metric-space-2x-small, 2px) var(--kern-metric-space-none, 0px);
}
.kern-kopfzeile__flagge svg {
  vertical-align: baseline;
  outline: var(--kern-1, 1px) solid #FFFFFF;
}
.kern-kopfzeile__label {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-component-kopfzeile-font-family, "Fira Sans");
  font-style: normal;
  font-weight: 400;
  font-size: var(--kern-component-kopfzeile-font-size, 16px);
  line-height: var(--kern-component-kopfzeile-line-height, 20px);
}
@media only screen and (max-width: 768px) {
  .kern-kopfzeile__flagge {
    width: var(--kern-18, 18px);
    height: var(--kern-16, 16px);
  }
  .kern-kopfzeile__label {
    font-size: var(--kern-14, 14px);
    line-height: var(--kern-16, 16px);
  }
  .kern-kopfzeile .kern-container,
  .kern-kopfzeile .kern-container-fluid {
    padding-left: var(--kern-metric-space-small, 8px);
    padding-right: var(--kern-metric-space-small, 8px);
  }
}

/**
 * @file _loader.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Loader Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Loader Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 */
.kern-loader {
  display: none;
  box-sizing: border-box;
  border-width: 10px;
  border-style: solid;
  border-color: var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader);
  width: var(--kern-metric-dimension-5x-large, 96px);
  height: var(--kern-metric-dimension-5x-large, 96px);
  border-radius: 50%;
  animation: rotation 1.5s linear infinite;
  position: relative;
}
@media (forced-colors: active) {
  .kern-loader {
    border-color: var(--kern-color-layout-background-default) var(--kern-color-layout-background-default) var(--kern-color-layout-background-default) var(--kern-color-layout-background-inverted);
    forced-color-adjust: none;
    outline-color: transparent;
    box-shadow: 0 0 0 1px var(--kern-color-layout-background-inverted), inset 0 0 0 1px var(--kern-color-layout-background-inverted);
  }
}
.kern-loader:before, .kern-loader:after {
  content: "";
  height: var(--semantic-size-xs, 10px);
  background: var(--kern-color-feedback-loader);
  position: absolute;
}
.kern-loader:before {
  width: var(--kern-metric-border-radius-small, 2px);
  border-radius: var(--kern-metric-space-none, 0px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-space-none, 0px);
  left: var(--kern-7, 7px);
  top: var(--kern-metric-space-2x-small, 2px);
  transform: rotate(-45deg);
}
.kern-loader:after {
  width: var(--kern-metric-border-radius-small, 2px);
  border-radius: var(--kern-metric-space-none, 0px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-space-none, 0px);
  left: var(--kern-7, 7px);
  bottom: var(--kern-metric-space-2x-small, 2px);
  transform: rotate(45deg);
}
.kern-loader--visible {
  display: block;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/**
 * @file _progress.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Progress Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Progress Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 */
.kern-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-small, 8px);
}
.kern-progress progress {
  /* Determinate: */
}
.kern-progress progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  height: var(--kern-metric-dimension-2x-small, 8px);
  border-radius: var(--kern-metric-border-radius-small, 2px);
  background: var(--kern-color-feedback-loader-background, #DFE1EA);
  color: var(--kern-color-feedback-loader);
}
.kern-progress progress[value]::-webkit-progress-bar {
  background: var(--kern-color-feedback-loader-background, #DFE1EA);
  border-radius: var(--kern-metric-border-radius-small, 2px);
}
.kern-progress progress[value]::-webkit-progress-value {
  background-color: var(--kern-color-feedback-loader);
  border-radius: var(--kern-metric-border-radius-small, 2px);
}
.kern-progress progress[value]::-moz-progress-bar {
  background-color: var(--kern-color-feedback-loader);
  border-radius: var(--kern-metric-border-radius-small, 2px);
}
@media (forced-colors: active) {
  .kern-progress progress[value] {
    background-color: var(--kern-color-layout-background-default);
    border: 1px solid var(--kern-color-layout-background-inverted);
    color: var(--kern-color-layout-background-inverted);
    forced-color-adjust: none;
  }
  .kern-progress progress[value]::-webkit-progress-bar {
    background-color: var(--kern-color-layout-background-default);
  }
  .kern-progress progress[value]::-webkit-progress-value {
    background-color: var(--kern-color-layout-background-inverted);
  }
  .kern-progress progress[value]::-moz-progress-bar {
    background-color: var(--kern-color-layout-background-inverted);
  }
}

/**
 * @file _radio.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Radio Komponente.
 *
 * Diese Datei enthält, von der _check.scss abweichende, CSS-Regeln, um die Radio Komponente
 * visuell darzustellen.
 */
.kern-form-check__radio {
  display: flex;
  border-radius: 100%;
}
.kern-form-check__radio::before {
  border-radius: 100%;
  content: "";
  margin: auto;
}
.kern-form-check__radio:checked::before {
  background-color: var(--kern-color-form-input-border, #171A2B);
  height: var(--kern-12, 12px);
  width: var(--kern-12, 12px);
}
.kern-form-check__radio--error {
  border-color: var(--kern-color-feedback-danger, #BD0F09) !important;
  outline-color: var(--kern-color-feedback-danger, #BD0F09) !important;
  background: var(--kern-color-feedback-danger-background, #FEECE8);
}
.kern-form-check__radio--error.kern-form-check__radio:checked::before {
  background-color: var(--kern-color-feedback-danger, #BD0F09);
}
@media (forced-colors: active) {
  .kern-form-check__radio--error.kern-form-check__radio:checked::before {
    background-color: var(--kern-color-layout-background-inverted) !important;
  }
}

/**
 * @file _select.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Form Select Komponenten.
 *
 * Diese Datei enthält gemeinsame CSS-Regeln, um die Select Komponenten
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zuständ (:hover, :focus, disabled)
 */
.kern-form-input:has(select[disabled]) {
  opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
  cursor: not-allowed;
}
.kern-form-input:has(select[disabled]) .kern-label {
  cursor: not-allowed;
}
.kern-form-input--error .kern-form-input__select-wrapper {
  border-color: var(--kern-color-feedback-danger, #BD0F09);
  background: var(--kern-color-feedback-danger-background, #FEECE8);
}
.kern-form-input--error .kern-form-input__select-wrapper::after {
  background-color: var(--kern-color-feedback-danger, #BD0F09);
}
.kern-form-input--error .kern-form-input__select-wrapper:hover {
  border-color: var(--kern-color-feedback-danger, #BD0F09);
}
.kern-form-input__select-wrapper {
  position: relative;
  display: flex;
  height: var(--kern-metric-dimension-x-large, 48px);
  gap: var(--kern-metric-space-none, 0px);
  align-self: stretch;
  border-radius: var(--kern-metric-border-radius-small, 2px);
  border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171A2B);
  background: var(--kern-color-form-input-background, #F7F7F9);
}
@media (forced-colors: active) {
  .kern-form-input__select-wrapper {
    border: 1px solid transparent !important;
  }
}
.kern-form-input__select-wrapper:hover {
  border-bottom: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border, #171A2B);
}
.kern-form-input__select-wrapper:hover .kern-form-input__select {
  padding: var(--kern-metric-space-small, 8px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
}
@media (forced-colors: active) {
  .kern-form-input__select-wrapper:hover .kern-form-input__select {
    padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
  }
}
.kern-form-input__select-wrapper:hover:has(.kern-form-input__select:focus) {
  border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171A2B);
}
.kern-form-input__select-wrapper:hover:has(.kern-form-input__select:focus) .kern-form-input__select {
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
}
.kern-form-input__select-wrapper:hover:has(select[disabled]) {
  border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171A2B);
}
.kern-form-input__select-wrapper:hover:has(select[disabled]) .kern-form-input__select {
  padding: var(--kern-metric-space-small, 6px) var(--kern-metric-space-default, 16px) var(--kern-4, 4px) var(--kern-metric-space-default, 16px);
}
.kern-form-input__select-wrapper::after {
  content: " ";
  display: inline-block;
  position: absolute;
  right: var(--kern-metric-dimension-x-small, 16px);
  top: var(--kern-metric-dimension-default, 24px);
  transform: translateY(-50%);
  pointer-events: none;
  width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E");
  background-color: var(--kern-color-action-default);
}
@media (forced-colors: active) {
  .kern-form-input__select-wrapper::after {
    background-color: var(--kern-color-layout-background-inverted) !important;
    forced-color-adjust: none;
  }
}
.kern-form-input__select {
  background-color: transparent;
  box-sizing: border-box;
  width: 100%;
  border: none;
  appearance: none;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
}
.kern-form-input__select:focus {
  border-radius: var(--kern-metric-border-radius-small, 2px);
  outline: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border, #171A2B);
  background: var(--kern-color-form-input-background, #F7F7F9);
  border: none;
}
.kern-form-input__select--error:focus {
  outline-color: var(--kern-color-feedback-danger, #BD0F09);
  background: var(--kern-color-feedback-danger-background, #FEECE8);
}
.kern-form-input__select option {
  margin: 40px;
  background: var(--kern-color-form-input-background, #F7F7F9);
}
.kern-form-input__select[disabled], .kern-form-input__select[disabled=disabled] {
  cursor: not-allowed;
}

/**
 * @file _summary.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Summary Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Summary Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 */
.kern-summary-group__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: var(--kern-metric-baseline-heading-medium-padding-top, 8px) var(--kern-metric-space-none, 0px) calc(var(--kern-metric-baseline-heading-medium-padding-bottom, 8px) + var(--kern-metric-space-default, 16px)) var(--kern-metric-space-none, 0px);
  margin-top: var(--kern-metric-space-x-large, 32px);
}
.kern-summary-group__header:first-of-type {
  margin-top: var(--kern-metric-space-none, 0px);
}

.kern-summary__header {
  display: flex;
  padding: var(--kern-metric-space-default, 16px) var(--skern-pace-none, 0px);
  align-items: flex-start;
  gap: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px);
  align-self: stretch;
}
.kern-summary__header .kern-number {
  margin-top: var(--kern-metric-space-x-small, 4px);
}
.kern-summary .kern-title {
  font-weight: var(--kern-typography-font-weight-regular, 400);
}
.kern-summary__body {
  display: flex;
  padding: var(--kern-metric-space-default, 16px);
  flex-direction: column;
  gap: var(--kern-metric-space-x-large, 32px);
  border-radius: var(--kern-metric-border-radius-default, 4px);
  background: var(--kern-color-layout-background-hued, #f7f7f9);
}
@media (forced-colors: active) {
  .kern-summary__body {
    border: 1px solid transparent !important;
  }
}

/**
 * @file _table.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Table Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Table Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Variationen (small, default und responsive).
 */
.kern-table {
  width: 100%;
  border-spacing: var(--kern-metric-space-none, 0px);
  border-collapse: collapse;
}
.kern-table--small .kern-title {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-heading-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}
.kern-table--small .kern-table__header,
.kern-table--small .kern-table__cell {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-small, 16px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  padding: calc(var(--kern-metric-baseline-body-small-padding-top, 7px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)) calc(var(--kern-metric-baseline-body-small-padding-bottom, 1px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px));
}
.kern-table--small .kern-table__header {
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
}
.kern-table--striped .kern-table__body .kern-table__row:nth-child(odd) .kern-table__header,
.kern-table--striped .kern-table__body .kern-table__row:nth-child(odd) .kern-table__cell {
  background-color: var(--kern-color-layout-background-hued, #F7F7F9);
}
.kern-table .kern-title {
  display: table-caption;
  text-align: left;
}
.kern-table__header, .kern-table__cell {
  text-align: left;
  vertical-align: top;
  box-shadow: inset 0 -1px 0 0 var(--kern-color-layout-border, #A5AAC3);
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  padding: calc(var(--kern-metric-baseline-body-default-padding-top, 6px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)) calc(var(--kern-metric-baseline-body-default-padding-bottom, 2px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px));
}
.kern-table__header--numeric, .kern-table__cell--numeric {
  text-align: right;
}
@media (forced-colors: active) {
  .kern-table__header, .kern-table__cell {
    border-bottom: 1px solid transparent;
  }
}
.kern-table__header {
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
}
.kern-table__footer {
  box-shadow: inset 0 1px 0 0 var(--kern-color-layout-border, #A5AAC3);
}
.kern-table__footer .kern-table__cell {
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
}
.kern-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/**
 * @file _task-list.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Styles für die Tasklist-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Tasklist-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zustände (:hover, :active, :focus) und mögliche
 */
.kern-task-list {
  display: block;
}
.kern-task-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--kern-metric-space-x-large, 32px);
}
.kern-task-list__header {
  display: flex;
  padding-bottom: var(--kern-metric-space-default, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-default, 16px);
  align-self: stretch;
  margin-top: var(--kern-metric-space-x-large, 32px);
}
.kern-task-list__header:first-of-type {
  margin-top: var(--kern-metric-space-none, 0px);
}
.kern-task-list__header .kern-heading {
  display: flex;
  padding: var(--kern-metric-baseline-heading-medium-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-medium-padding-bottom, 3px) var(--kern-metric-space-none, 0px);
  align-items: flex-start;
  gap: var(--kern-metric-space-none, 0px);
  align-self: stretch;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-heading-medium-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-medium-padding-bottom, 3px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-adaptive-medium, 21px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-adaptive-medium, 24px);
}
.kern-task-list__list {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  display: flex;
  flex-direction: column;
  gap: var(--kern-metric-space-small, 8px);
  align-self: stretch;
  list-style: none;
}
.kern-task-list__item {
  display: flex;
  padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px);
  align-items: flex-start;
  gap: var(--kern-metric-space-default, 16px);
  flex: 1 0 0;
  justify-content: space-between;
  position: relative;
  border-radius: var(--kern-metric-border-radius-default, 4px);
  background: var(--kern-color-layout-background-hued, #F7F7F9);
}
@media (forced-colors: active) {
  .kern-task-list__item {
    border: 1px solid transparent !important;
  }
}
.kern-task-list__item .kern-number {
  margin-top: var(--kern-12, 12px);
}
.kern-task-list__item:has(.kern-link) {
  color: var(--kern-color-action-default, #1A3DA5);
}
.kern-task-list__item:has(.kern-link) .kern-number {
  color: var(--kern-color-action-default, #1A3DA5);
  border-color: var(--kern-color-action-default, #1A3DA5);
}
.kern-task-list__item .kern-link--stretched:after {
  position: absolute;
  top: var(--kern-metric-space-none, 0px);
  right: var(--kern-metric-space-none, 0px);
  bottom: var(--kern-metric-space-none, 0px);
  left: var(--kern-metric-space-none, 0px);
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: transparent;
}
.kern-task-list__item .kern-link--stretched:focus-visible {
  outline-color: transparent;
}
.kern-task-list__item .kern-link--stretched:focus-visible:after {
  border-radius: var(--kern-metric-border-radius-default, 0.25rem);
  box-shadow: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 2px var(--kern-color-action-on-default), var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 4px var(--kern-color-action-focus-border-inside), var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 6px var(--kern-color-action-focus-border-outside);
}
.kern-task-list__item:has(.kern-link--stretched:hover) {
  background: var(--kern-color-action-state-indicator-tint-hover-opacity);
}
.kern-task-list__item:has(.kern-link--stretched:active) {
  background: var(--kern-color-action-state-indicator-tint-active-opacity);
}
.kern-task-list__title {
  display: flex;
  padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0px);
  align-items: flex-start;
  gap: var(--kern-metric-space-default, 16px);
  flex-grow: 1;
  flex-wrap: wrap;
}
@media all and (min-width: 768px) {
  .kern-task-list__title {
    flex-wrap: nowrap;
  }
}
.kern-task-list__title .kern-link:visited {
  color: var(--kern-color-action-default, #1A3DA5);
}
.kern-task-list__title .kern-link,
.kern-task-list__title .kern-body {
  flex-grow: 1;
}
.kern-task-list__status {
  text-align: right;
  white-space: nowrap;
}

.kern-body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}
.kern-body--large {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-large, 21px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-large, 32px);
}
.kern-body--small {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-small, 16px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}
.kern-body--bold {
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
}
.kern-body--muted {
  color: var(--kern-color-layout-text-muted, #404565);
}

.kern-hint {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  color: var(--kern-color-layout-text-muted, #404565);
}

.kern-heading-display {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-heading-display-padding-top, 12px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-display-padding-bottom, 12px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-adaptive-2x-large, 48px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-adaptive-2x-large, 56px);
}

.kern-heading-x-large {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-heading-x-large-padding-top, 9px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-x-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-adaptive-x-large, 32px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-adaptive-x-large, 40px);
}

.kern-heading-large {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-heading-large-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-large-padding-bottom, 9px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-adaptive-large, 26px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-adaptive-large, 32px);
}

.kern-heading-medium {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-heading-medium-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-medium-padding-bottom, 3px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-adaptive-medium, 21px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-adaptive-medium, 24px);
}

.kern-heading-small {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-heading-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}

.kern-label {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-label-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  width: fit-content;
}
.kern-label--large {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-label-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-large, 21px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-static-large, 32px);
}
.kern-label--small {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-label-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-small, 16px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}

.kern-link {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  color: var(--kern-color-action-default, #1A3DA5);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: var(--kern-1, 1px); /* 5.556% */
  text-underline-offset: var(--kern-metric-space-2x-small, 2px); /* 11.111% */
  text-underline-position: from-font;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--kern-metric-space-x-small, 4px);
}
.kern-link .kern-icon {
  background-color: var(--kern-color-action-default, #1A3DA5);
}
.kern-link:has(.kern-icon) {
  text-decoration: none;
}
.kern-link:has(.kern-icon):active, .kern-link:has(.kern-icon):hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */
  text-underline-offset: var(--kern-metric-space-2x-small, 2px); /* 11.111% */
  text-underline-position: from-font;
}
.kern-link:hover {
  text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */
}
.kern-link:active {
  color: var(--kern-color-action-default, #1A3DA5);
  text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */
}
.kern-link:active .kern-icon {
  background-color: var(--kern-color-action-default, #1A3DA5);
}
.kern-link:visited {
  color: var(--kern-color-action-visited, #75009E);
}
.kern-link:visited .kern-icon {
  background-color: var(--kern-color-action-visited, #75009E);
}
.kern-link--small {
  gap: var(--kern-metric-space-2x-small, 2px);
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-small, 16px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  color: var(--kern-color-action-default, #1A3DA5);
}
.kern-link--small .kern-icon {
  width: var(--kern-metric-dimension-small, 20px);
  height: var(--kern-metric-dimension-small, 20px);
  min-width: var(--kern-metric-dimension-small, 20px);
  min-height: var(--kern-metric-dimension-small, 20px);
}
.kern-link:not(.kern-link--stretched):focus-visible {
  position: relative;
  z-index: 1;
  outline-color: transparent;
  border-radius: var(--kern-metric-border-radius-small, 0.125rem);
  box-shadow: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 2px var(--kern-color-action-on-default), var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 4px var(--kern-color-action-focus-border-inside), var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 6px var(--kern-color-action-focus-border-outside);
}
@media (forced-colors: active) {
  .kern-link:not(.kern-link--stretched):focus-visible {
    outline-offset: 4px !important;
    outline-width: 3px !important;
    outline-color: transparent !important;
  }
}

a.kern-btn {
  display: inline-flex;
  text-decoration: none;
}

.kern-list {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--kern-metric-space-none, 0);
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  padding-left: var(--kern-metric-space-none, 0);
}
.kern-list--small {
  font-size: var(--kern-typography-font-size-static-small, 16px);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  /* 125% */
  padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
}
.kern-list--large {
  font-size: var(--kern-typography-font-size-static-large, 21px);
  line-height: var(--kern-typography-line-height-static-large, 32px);
  /* 152.381% */
  padding: var(--kern-metric-baseline-body-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
}
.kern-list--bullet {
  padding-left: var(--kern-metric-space-x-large, 32px);
  gap: var(--kern-metric-space-default, 16px);
  list-style-type: disc;
}
.kern-list--number {
  padding-left: var(--kern-metric-space-x-large, 32px);
  gap: var(--kern-metric-space-default, 16px);
  list-style-type: decimal;
}

.kern-subline {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-subline-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}
.kern-subline--large {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-subline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-large, 21px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-static-large, 32px);
}
.kern-subline--small {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-subline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-small-padding-bottom, 9px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-small, 16px);
  font-weight: var(--kern-typography-font-weight-medium, 500);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}

.kern-preline {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-preline-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
  width: fit-content;
}
.kern-preline--large {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-preline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-large, 21px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-large, 32px);
}
.kern-preline--small {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  color: var(--kern-color-layout-text-muted, #404565);
  padding: var(--kern-metric-baseline-preline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-small, 16px);
  font-weight: var(--kern-typography-font-weight-regular, 400);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}

.kern-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-title-default-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-default-padding-bottom, 3px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-adaptive-medium, 21px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-adaptive-medium, 24px);
}
.kern-title--large {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-title-large-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-large-padding-bottom, 9px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-adaptive-large, 26px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-adaptive-large, 32px);
}
.kern-title--small {
  color: var(--kern-color-layout-text-default, #171A2B);
  font-family: var(--kern-typography-font-family-default, "Fira Sans");
  font-style: normal;
  letter-spacing: var(--kern-metric-space-none, 0px);
  padding: var(--kern-metric-baseline-title-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  font-size: var(--kern-typography-font-size-static-medium, 18px);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  line-height: var(--kern-typography-line-height-static-medium, 24px);
}

/**
 * @file _grid.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 17.04.2025
 * @modified 23.05.2025
 * 2.3.0
 * @brief Styles für die Grid-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Grid-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen,
 */
.kern-container-fluid, .kern-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

[class^=kern-col],
[class*=kern-col] {
  padding: 1rem;
  box-sizing: border-box;
}

.kern-container {
  max-width: 1600px;
}
.kern-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
  box-sizing: border-box;
}
.kern-row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}
.kern-col {
  flex: 1 0 0%;
}
.kern-align-items-start {
  align-items: flex-start !important;
}
.kern-align-items-center {
  align-items: center !important;
}
.kern-align-items-end {
  align-items: flex-end !important;
}
.kern-align-self-start {
  align-self: flex-start !important;
}
.kern-align-self-center {
  align-self: center !important;
}
.kern-align-self-end {
  align-self: flex-end !important;
}
.kern-justify-content-start {
  justify-content: flex-start !important;
}
.kern-justify-content-center {
  justify-content: center !important;
}
.kern-justify-content-end {
  justify-content: flex-end !important;
}
.kern-justify-content-around {
  justify-content: space-around !important;
}
.kern-justify-content-between {
  justify-content: space-between !important;
}
.kern-justify-content-evenly {
  justify-content: space-evenly !important;
}

.kern-col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.kern-col-offset-1 {
  margin-left: 8.3333333333%;
}

.kern-col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.kern-col-offset-2 {
  margin-left: 16.6666666667%;
}

.kern-col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.kern-col-offset-3 {
  margin-left: 25%;
}

.kern-col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.kern-col-offset-4 {
  margin-left: 33.3333333333%;
}

.kern-col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.kern-col-offset-5 {
  margin-left: 41.6666666667%;
}

.kern-col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.kern-col-offset-6 {
  margin-left: 50%;
}

.kern-col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.kern-col-offset-7 {
  margin-left: 58.3333333333%;
}

.kern-col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.kern-col-offset-8 {
  margin-left: 66.6666666667%;
}

.kern-col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.kern-col-offset-9 {
  margin-left: 75%;
}

.kern-col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.kern-col-offset-10 {
  margin-left: 83.3333333333%;
}

.kern-col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.kern-col-offset-11 {
  margin-left: 91.6666666667%;
}

.kern-col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.kern-col-offset-12 {
  margin-left: 100%;
}

@media (min-width: 576px) {
  .kern-container {
    max-width: 96%;
  }
  .kern-col-sm-offset-0 {
    margin-left: 0;
  }
  .kern-col-sm-1 {
    width: 8.3333333333%;
  }
  .kern-col-sm-offset-1 {
    margin-left: 8.3333333333%;
  }
  .kern-col-sm-2 {
    width: 16.6666666667%;
  }
  .kern-col-sm-offset-2 {
    margin-left: 16.6666666667%;
  }
  .kern-col-sm-3 {
    width: 25%;
  }
  .kern-col-sm-offset-3 {
    margin-left: 25%;
  }
  .kern-col-sm-4 {
    width: 33.3333333333%;
  }
  .kern-col-sm-offset-4 {
    margin-left: 33.3333333333%;
  }
  .kern-col-sm-5 {
    width: 41.6666666667%;
  }
  .kern-col-sm-offset-5 {
    margin-left: 41.6666666667%;
  }
  .kern-col-sm-6 {
    width: 50%;
  }
  .kern-col-sm-offset-6 {
    margin-left: 50%;
  }
  .kern-col-sm-7 {
    width: 58.3333333333%;
  }
  .kern-col-sm-offset-7 {
    margin-left: 58.3333333333%;
  }
  .kern-col-sm-8 {
    width: 66.6666666667%;
  }
  .kern-col-sm-offset-8 {
    margin-left: 66.6666666667%;
  }
  .kern-col-sm-9 {
    width: 75%;
  }
  .kern-col-sm-offset-9 {
    margin-left: 75%;
  }
  .kern-col-sm-10 {
    width: 83.3333333333%;
  }
  .kern-col-sm-offset-10 {
    margin-left: 83.3333333333%;
  }
  .kern-col-sm-11 {
    width: 91.6666666667%;
  }
  .kern-col-sm-offset-11 {
    margin-left: 91.6666666667%;
  }
  .kern-col-sm-12 {
    width: 100%;
  }
  .kern-col-sm-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 768px) {
  .kern-container {
    max-width: 96%;
  }
  .kern-col-md-offset-0 {
    margin-left: 0;
  }
  .kern-col-md-1 {
    width: 8.3333333333%;
  }
  .kern-col-md-offset-1 {
    margin-left: 8.3333333333%;
  }
  .kern-col-md-2 {
    width: 16.6666666667%;
  }
  .kern-col-md-offset-2 {
    margin-left: 16.6666666667%;
  }
  .kern-col-md-3 {
    width: 25%;
  }
  .kern-col-md-offset-3 {
    margin-left: 25%;
  }
  .kern-col-md-4 {
    width: 33.3333333333%;
  }
  .kern-col-md-offset-4 {
    margin-left: 33.3333333333%;
  }
  .kern-col-md-5 {
    width: 41.6666666667%;
  }
  .kern-col-md-offset-5 {
    margin-left: 41.6666666667%;
  }
  .kern-col-md-6 {
    width: 50%;
  }
  .kern-col-md-offset-6 {
    margin-left: 50%;
  }
  .kern-col-md-7 {
    width: 58.3333333333%;
  }
  .kern-col-md-offset-7 {
    margin-left: 58.3333333333%;
  }
  .kern-col-md-8 {
    width: 66.6666666667%;
  }
  .kern-col-md-offset-8 {
    margin-left: 66.6666666667%;
  }
  .kern-col-md-9 {
    width: 75%;
  }
  .kern-col-md-offset-9 {
    margin-left: 75%;
  }
  .kern-col-md-10 {
    width: 83.3333333333%;
  }
  .kern-col-md-offset-10 {
    margin-left: 83.3333333333%;
  }
  .kern-col-md-11 {
    width: 91.6666666667%;
  }
  .kern-col-md-offset-11 {
    margin-left: 91.6666666667%;
  }
  .kern-col-md-12 {
    width: 100%;
  }
  .kern-col-md-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 992px) {
  .kern-container {
    max-width: 96%;
  }
  .kern-col-lg-offset-0 {
    margin-left: 0;
  }
  .kern-col-lg-1 {
    width: 8.3333333333%;
  }
  .kern-col-lg-offset-1 {
    margin-left: 8.3333333333%;
  }
  .kern-col-lg-2 {
    width: 16.6666666667%;
  }
  .kern-col-lg-offset-2 {
    margin-left: 16.6666666667%;
  }
  .kern-col-lg-3 {
    width: 25%;
  }
  .kern-col-lg-offset-3 {
    margin-left: 25%;
  }
  .kern-col-lg-4 {
    width: 33.3333333333%;
  }
  .kern-col-lg-offset-4 {
    margin-left: 33.3333333333%;
  }
  .kern-col-lg-5 {
    width: 41.6666666667%;
  }
  .kern-col-lg-offset-5 {
    margin-left: 41.6666666667%;
  }
  .kern-col-lg-6 {
    width: 50%;
  }
  .kern-col-lg-offset-6 {
    margin-left: 50%;
  }
  .kern-col-lg-7 {
    width: 58.3333333333%;
  }
  .kern-col-lg-offset-7 {
    margin-left: 58.3333333333%;
  }
  .kern-col-lg-8 {
    width: 66.6666666667%;
  }
  .kern-col-lg-offset-8 {
    margin-left: 66.6666666667%;
  }
  .kern-col-lg-9 {
    width: 75%;
  }
  .kern-col-lg-offset-9 {
    margin-left: 75%;
  }
  .kern-col-lg-10 {
    width: 83.3333333333%;
  }
  .kern-col-lg-offset-10 {
    margin-left: 83.3333333333%;
  }
  .kern-col-lg-11 {
    width: 91.6666666667%;
  }
  .kern-col-lg-offset-11 {
    margin-left: 91.6666666667%;
  }
  .kern-col-lg-12 {
    width: 100%;
  }
  .kern-col-lg-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 1200px) {
  .kern-container {
    max-width: 96%;
  }
  .kern-col-xl-offset-0 {
    margin-left: 0;
  }
  .kern-col-xl-1 {
    width: 8.3333333333%;
  }
  .kern-col-xl-offset-1 {
    margin-left: 8.3333333333%;
  }
  .kern-col-xl-2 {
    width: 16.6666666667%;
  }
  .kern-col-xl-offset-2 {
    margin-left: 16.6666666667%;
  }
  .kern-col-xl-3 {
    width: 25%;
  }
  .kern-col-xl-offset-3 {
    margin-left: 25%;
  }
  .kern-col-xl-4 {
    width: 33.3333333333%;
  }
  .kern-col-xl-offset-4 {
    margin-left: 33.3333333333%;
  }
  .kern-col-xl-5 {
    width: 41.6666666667%;
  }
  .kern-col-xl-offset-5 {
    margin-left: 41.6666666667%;
  }
  .kern-col-xl-6 {
    width: 50%;
  }
  .kern-col-xl-offset-6 {
    margin-left: 50%;
  }
  .kern-col-xl-7 {
    width: 58.3333333333%;
  }
  .kern-col-xl-offset-7 {
    margin-left: 58.3333333333%;
  }
  .kern-col-xl-8 {
    width: 66.6666666667%;
  }
  .kern-col-xl-offset-8 {
    margin-left: 66.6666666667%;
  }
  .kern-col-xl-9 {
    width: 75%;
  }
  .kern-col-xl-offset-9 {
    margin-left: 75%;
  }
  .kern-col-xl-10 {
    width: 83.3333333333%;
  }
  .kern-col-xl-offset-10 {
    margin-left: 83.3333333333%;
  }
  .kern-col-xl-11 {
    width: 91.6666666667%;
  }
  .kern-col-xl-offset-11 {
    margin-left: 91.6666666667%;
  }
  .kern-col-xl-12 {
    width: 100%;
  }
  .kern-col-xl-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 1600px) {
  .kern-container {
    max-width: 1536px;
  }
  .kern-col-xxl-offset-0 {
    margin-left: 0;
  }
  .kern-col-xxl-1 {
    width: 8.3333333333%;
  }
  .kern-col-xxl-offset-1 {
    margin-left: 8.3333333333%;
  }
  .kern-col-xxl-2 {
    width: 16.6666666667%;
  }
  .kern-col-xxl-offset-2 {
    margin-left: 16.6666666667%;
  }
  .kern-col-xxl-3 {
    width: 25%;
  }
  .kern-col-xxl-offset-3 {
    margin-left: 25%;
  }
  .kern-col-xxl-4 {
    width: 33.3333333333%;
  }
  .kern-col-xxl-offset-4 {
    margin-left: 33.3333333333%;
  }
  .kern-col-xxl-5 {
    width: 41.6666666667%;
  }
  .kern-col-xxl-offset-5 {
    margin-left: 41.6666666667%;
  }
  .kern-col-xxl-6 {
    width: 50%;
  }
  .kern-col-xxl-offset-6 {
    margin-left: 50%;
  }
  .kern-col-xxl-7 {
    width: 58.3333333333%;
  }
  .kern-col-xxl-offset-7 {
    margin-left: 58.3333333333%;
  }
  .kern-col-xxl-8 {
    width: 66.6666666667%;
  }
  .kern-col-xxl-offset-8 {
    margin-left: 66.6666666667%;
  }
  .kern-col-xxl-9 {
    width: 75%;
  }
  .kern-col-xxl-offset-9 {
    margin-left: 75%;
  }
  .kern-col-xxl-10 {
    width: 83.3333333333%;
  }
  .kern-col-xxl-offset-10 {
    margin-left: 83.3333333333%;
  }
  .kern-col-xxl-11 {
    width: 91.6666666667%;
  }
  .kern-col-xxl-offset-11 {
    margin-left: 91.6666666667%;
  }
  .kern-col-xxl-12 {
    width: 100%;
  }
  .kern-col-xxl-offset-12 {
    margin-left: 100%;
  }
}
/**
 * @file _colors.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 17.04.2025
 * @modified 23.05.2025
 * 2.3.0
 * @brief Tokens für die Colors.
 *
 * Diese Datei enthält die Tokens für die Colors
 * Colors sind als OKLCH-Eizelwerte (lightness, chroma, und hue) bereitgestellt.
 */
:root {
  /* Dark Blue 025 */
  --kern-darkblue-025-lightness: 97.29%;
  --kern-darkblue-025-chroma: 0.0081;
  --kern-darkblue-025-hue: 261.5;
  /* Dark Blue 050 */
  --kern-darkblue-050-lightness: 95.28%;
  --kern-darkblue-050-chroma: 0.0144;
  --kern-darkblue-050-hue: 267.3;
  /* Dark Blue 100 */
  --kern-darkblue-100-lightness: 90.65%;
  --kern-darkblue-100-chroma: 0.0284;
  --kern-darkblue-100-hue: 265.8;
  /* Dark Blue 150 */
  --kern-darkblue-150-lightness: 87.02%;
  --kern-darkblue-150-chroma: 0.0397;
  --kern-darkblue-150-hue: 264.3;
  /* Dark Blue 200 */
  --kern-darkblue-200-lightness: 82.15%;
  --kern-darkblue-200-chroma: 0.0557;
  --kern-darkblue-200-hue: 265.6;
  /* Dark Blue 250 */
  --kern-darkblue-250-lightness: 78.4%;
  --kern-darkblue-250-chroma: 0.0671;
  --kern-darkblue-250-hue: 265.4;
  /* Dark Blue 300 */
  --kern-darkblue-300-lightness: 73.65%;
  --kern-darkblue-300-chroma: 0.083;
  --kern-darkblue-300-hue: 265.2;
  /* Dark Blue 350 */
  --kern-darkblue-350-lightness: 69.99%;
  --kern-darkblue-350-chroma: 0.0926;
  --kern-darkblue-350-hue: 265;
  /* Dark Blue 400 */
  --kern-darkblue-400-lightness: 66.28%;
  --kern-darkblue-400-chroma: 0.1035;
  --kern-darkblue-400-hue: 264.7;
  /* Dark Blue 450 */
  --kern-darkblue-450-lightness: 61.27%;
  --kern-darkblue-450-chroma: 0.1195;
  --kern-darkblue-450-hue: 265.5;
  /* Dark Blue 500 */
  --kern-darkblue-500-lightness: 57.58%;
  --kern-darkblue-500-chroma: 0.1302;
  --kern-darkblue-500-hue: 265.1;
  /* Dark Blue 550 */
  --kern-darkblue-550-lightness: 52.55%;
  --kern-darkblue-550-chroma: 0.1462;
  --kern-darkblue-550-hue: 265.4;
  /* Dark Blue 600 */
  --kern-darkblue-600-lightness: 48.97%;
  --kern-darkblue-600-chroma: 0.1552;
  --kern-darkblue-600-hue: 264.9;
  /* Dark Blue 650 */
  --kern-darkblue-650-lightness: 45%;
  --kern-darkblue-650-chroma: 0.166;
  --kern-darkblue-650-hue: 265.1;
  /* Dark Blue 700 */
  --kern-darkblue-700-lightness: 40.4%;
  --kern-darkblue-700-chroma: 0.1713;
  --kern-darkblue-700-hue: 265.1;
  /* Dark Blue 750 */
  --kern-darkblue-750-lightness: 36.29%;
  --kern-darkblue-750-chroma: 0.1831;
  --kern-darkblue-750-hue: 265;
  /* Dark Blue 800 */
  --kern-darkblue-800-lightness: 32.18%;
  --kern-darkblue-800-chroma: 0.1841;
  --kern-darkblue-800-hue: 265;
  /* Dark Blue 850 */
  --kern-darkblue-850-lightness: 28.85%;
  --kern-darkblue-850-chroma: 0.1905;
  --kern-darkblue-850-hue: 264.9;
  /* Dark Blue 900 */
  --kern-darkblue-900-lightness: 24.13%;
  --kern-darkblue-900-chroma: 0.1635;
  --kern-darkblue-900-hue: 266.4;
  /* Dark Blue 950 */
  --kern-darkblue-950-lightness: 19.3%;
  --kern-darkblue-950-chroma: 0.1283;
  --kern-darkblue-950-hue: 268.4;
}

:root {
  /* Light Blue 025 */
  --kern-lightblue-025-lightness: 97.93%;
  --kern-lightblue-025-chroma: 0.0112;
  --kern-lightblue-025-hue: 225.1;
  /* Light Blue 050 */
  --kern-lightblue-050-lightness: 95.27%;
  --kern-lightblue-050-chroma: 0.0248;
  --kern-lightblue-050-hue: 223.4;
  /* Light Blue 100 */
  --kern-lightblue-100-lightness: 90.47%;
  --kern-lightblue-100-chroma: 0.0495;
  --kern-lightblue-100-hue: 225.8;
  /* Light Blue 150 */
  --kern-lightblue-150-lightness: 86.16%;
  --kern-lightblue-150-chroma: 0.0716;
  --kern-lightblue-150-hue: 224.5;
  /* Light Blue 200 */
  --kern-lightblue-200-lightness: 82.29%;
  --kern-lightblue-200-chroma: 0.0929;
  --kern-lightblue-200-hue: 223.5;
  /* Light Blue 250 */
  --kern-lightblue-250-lightness: 77.87%;
  --kern-lightblue-250-chroma: 0.1157;
  --kern-lightblue-250-hue: 223.4;
  /* Light Blue 300 */
  --kern-lightblue-300-lightness: 72.6%;
  --kern-lightblue-300-chroma: 0.1365;
  --kern-lightblue-300-hue: 224.1;
  /* Light Blue 350 */
  --kern-lightblue-350-lightness: 69.31%;
  --kern-lightblue-350-chroma: 0.1331;
  --kern-lightblue-350-hue: 226.5;
  /* Light Blue 400 */
  --kern-lightblue-400-lightness: 65.7%;
  --kern-lightblue-400-chroma: 0.126;
  --kern-lightblue-400-hue: 226.3;
  /* Light Blue 450 */
  --kern-lightblue-450-lightness: 60.49%;
  --kern-lightblue-450-chroma: 0.1218;
  --kern-lightblue-450-hue: 230.9;
  /* Light Blue 500 */
  --kern-lightblue-500-lightness: 56.36%;
  --kern-lightblue-500-chroma: 0.1102;
  --kern-lightblue-500-hue: 228.3;
  /* Light Blue 550 */
  --kern-lightblue-550-lightness: 51.87%;
  --kern-lightblue-550-chroma: 0.1098;
  --kern-lightblue-550-hue: 234.8;
  /* Light Blue 600 */
  --kern-lightblue-600-lightness: 47.63%;
  --kern-lightblue-600-chroma: 0.1034;
  --kern-lightblue-600-hue: 236.6;
  /* Light Blue 650 */
  --kern-lightblue-650-lightness: 42.88%;
  --kern-lightblue-650-chroma: 0.0984;
  --kern-lightblue-650-hue: 240.1;
  /* Light Blue 700 */
  --kern-lightblue-700-lightness: 39.45%;
  --kern-lightblue-700-chroma: 0.0961;
  --kern-lightblue-700-hue: 243.4;
  /* Light Blue 750 */
  --kern-lightblue-750-lightness: 34.98%;
  --kern-lightblue-750-chroma: 0.0901;
  --kern-lightblue-750-hue: 246.1;
  /* Light Blue 800 */
  --kern-lightblue-800-lightness: 31%;
  --kern-lightblue-800-chroma: 0.0905;
  --kern-lightblue-800-hue: 251.1;
  /* Light Blue 850 */
  --kern-lightblue-850-lightness: 26.58%;
  --kern-lightblue-850-chroma: 0.0837;
  --kern-lightblue-850-hue: 253.7;
  /* Light Blue 900 */
  --kern-lightblue-900-lightness: 22.62%;
  --kern-lightblue-900-chroma: 0.0845;
  --kern-lightblue-900-hue: 258.2;
  /* Light Blue 950 */
  --kern-lightblue-950-lightness: 18.48%;
  --kern-lightblue-950-chroma: 0.0867;
  --kern-lightblue-950-hue: 262.2;
}

:root {
  /* Turquoise 025 */
  --kern-turquoise-025-lightness: 97.64%;
  --kern-turquoise-025-chroma: 0.0123;
  --kern-turquoise-025-hue: 172.2;
  /* Turquoise 050 */
  --kern-turquoise-050-lightness: 95.45%;
  --kern-turquoise-050-chroma: 0.0269;
  --kern-turquoise-050-hue: 171.7;
  /* Turquoise 100 */
  --kern-turquoise-100-lightness: 90.68%;
  --kern-turquoise-100-chroma: 0.0593;
  --kern-turquoise-100-hue: 170.5;
  /* Turquoise 150 */
  --kern-turquoise-150-lightness: 85.52%;
  --kern-turquoise-150-chroma: 0.0888;
  --kern-turquoise-150-hue: 171;
  /* Turquoise 200 */
  --kern-turquoise-200-lightness: 81.34%;
  --kern-turquoise-200-chroma: 0.1071;
  --kern-turquoise-200-hue: 170.7;
  /* Turquoise 250 */
  --kern-turquoise-250-lightness: 77.21%;
  --kern-turquoise-250-chroma: 0.1209;
  --kern-turquoise-250-hue: 170.3;
  /* Turquoise 300 */
  --kern-turquoise-300-lightness: 72.07%;
  --kern-turquoise-300-chroma: 0.1298;
  --kern-turquoise-300-hue: 170.4;
  /* Turquoise 350 */
  --kern-turquoise-350-lightness: 68.64%;
  --kern-turquoise-350-chroma: 0.1341;
  --kern-turquoise-350-hue: 170;
  /* Turquoise 400 */
  --kern-turquoise-400-lightness: 63.71%;
  --kern-turquoise-400-chroma: 0.1258;
  --kern-turquoise-400-hue: 170.2;
  /* Turquoise 450 */
  --kern-turquoise-450-lightness: 59.21%;
  --kern-turquoise-450-chroma: 0.1187;
  --kern-turquoise-450-hue: 168.9;
  /* Turquoise 500 */
  --kern-turquoise-500-lightness: 54.7%;
  --kern-turquoise-500-chroma: 0.1094;
  --kern-turquoise-500-hue: 169.1;
  /* Turquoise 550 */
  --kern-turquoise-550-lightness: 51.64%;
  --kern-turquoise-550-chroma: 0.1031;
  --kern-turquoise-550-hue: 169.3;
  /* Turquoise 600 */
  --kern-turquoise-600-lightness: 46.91%;
  --kern-turquoise-600-chroma: 0.0948;
  --kern-turquoise-600-hue: 168.1;
  /* Turquoise 650 */
  --kern-turquoise-650-lightness: 42.12%;
  --kern-turquoise-650-chroma: 0.0848;
  --kern-turquoise-650-hue: 168.5;
  /* Turquoise 700 */
  --kern-turquoise-700-lightness: 38.81%;
  --kern-turquoise-700-chroma: 0.079;
  --kern-turquoise-700-hue: 167.5;
  /* Turquoise 750 */
  --kern-turquoise-750-lightness: 33.77%;
  --kern-turquoise-750-chroma: 0.0682;
  --kern-turquoise-750-hue: 168.2;
  /* Turquoise 800 */
  --kern-turquoise-800-lightness: 30.31%;
  --kern-turquoise-800-chroma: 0.0608;
  --kern-turquoise-800-hue: 168.9;
  /* Turquoise 850 */
  --kern-turquoise-850-lightness: 26.7%;
  --kern-turquoise-850-chroma: 0.0545;
  --kern-turquoise-850-hue: 167.3;
  /* Turquoise 900 */
  --kern-turquoise-900-lightness: 21.11%;
  --kern-turquoise-900-chroma: 0.0425;
  --kern-turquoise-900-hue: 168.5;
  /* Turquoise 950 */
  --kern-turquoise-950-lightness: 17.16%;
  --kern-turquoise-950-chroma: 0.0342;
  --kern-turquoise-950-hue: 169.5;
}

:root {
  /* Green 025 */
  --kern-green-025-lightness: 97.95%;
  --kern-green-025-chroma: 0.0066;
  --kern-green-025-hue: 151.9;
  /* Green 050 */
  --kern-green-050-lightness: 95.9%;
  --kern-green-050-chroma: 0.0151;
  --kern-green-050-hue: 148.4;
  /* Green 100 */
  --kern-green-100-lightness: 90.51%;
  --kern-green-100-chroma: 0.0375;
  --kern-green-100-hue: 148.6;
  /* Green 150 */
  --kern-green-150-lightness: 86.51%;
  --kern-green-150-chroma: 0.0556;
  --kern-green-150-hue: 148.3;
  /* Green 200 */
  --kern-green-200-lightness: 81.85%;
  --kern-green-200-chroma: 0.074;
  --kern-green-200-hue: 149;
  /* Green 250 */
  --kern-green-250-lightness: 77.04%;
  --kern-green-250-chroma: 0.092;
  --kern-green-250-hue: 148.1;
  /* Green 300 */
  --kern-green-300-lightness: 72.45%;
  --kern-green-300-chroma: 0.1087;
  --kern-green-300-hue: 148.5;
  /* Green 350 */
  --kern-green-350-lightness: 68.55%;
  --kern-green-350-chroma: 0.1228;
  --kern-green-350-hue: 148.4;
  /* Green 400 */
  --kern-green-400-lightness: 63.71%;
  --kern-green-400-chroma: 0.1312;
  --kern-green-400-hue: 148.6;
  /* Green 450 */
  --kern-green-450-lightness: 59.26%;
  --kern-green-450-chroma: 0.1414;
  --kern-green-450-hue: 148.4;
  /* Green 500 */
  --kern-green-500-lightness: 54.55%;
  --kern-green-500-chroma: 0.1469;
  --kern-green-500-hue: 148.4;
  /* Green 550 */
  --kern-green-550-lightness: 50.64%;
  --kern-green-550-chroma: 0.1479;
  --kern-green-550-hue: 147.7;
  /* Green 600 */
  --kern-green-600-lightness: 45.99%;
  --kern-green-600-chroma: 0.1381;
  --kern-green-600-hue: 146.6;
  /* Green 650 */
  --kern-green-650-lightness: 42.82%;
  --kern-green-650-chroma: 0.1318;
  --kern-green-650-hue: 145.7;
  /* Green 700 */
  --kern-green-700-lightness: 38.01%;
  --kern-green-700-chroma: 0.118;
  --kern-green-700-hue: 145.4;
  /* Green 750 */
  --kern-green-750-lightness: 34.7%;
  --kern-green-750-chroma: 0.1103;
  --kern-green-750-hue: 144.6;
  /* Green 800 */
  --kern-green-800-lightness: 29.62%;
  --kern-green-800-chroma: 0.095;
  --kern-green-800-hue: 144.4;
  /* Green 850 */
  --kern-green-850-lightness: 26.11%;
  --kern-green-850-chroma: 0.0844;
  --kern-green-850-hue: 144.1;
  /* Green 900 */
  --kern-green-900-lightness: 20.63%;
  --kern-green-900-chroma: 0.0664;
  --kern-green-900-hue: 144.2;
  /* Green 950 */
  --kern-green-950-lightness: 16.76%;
  --kern-green-950-chroma: 0.0542;
  --kern-green-950-hue: 144.1;
}

:root {
  /* Limette 025 */
  --kern-limette-025-lightness: 97.02%;
  --kern-limette-025-chroma: 0.0694;
  --kern-limette-025-hue: 120.6;
  /* Limette 050 */
  --kern-limette-050-lightness: 95.09%;
  --kern-limette-050-chroma: 0.1155;
  --kern-limette-050-hue: 120.8;
  /* Limette 100 */
  --kern-limette-100-lightness: 90.24%;
  --kern-limette-100-chroma: 0.1656;
  --kern-limette-100-hue: 120.8;
  /* Limette 150 */
  --kern-limette-150-lightness: 86.02%;
  --kern-limette-150-chroma: 0.1845;
  --kern-limette-150-hue: 121.2;
  /* Limette 200 */
  --kern-limette-200-lightness: 81.36%;
  --kern-limette-200-chroma: 0.1887;
  --kern-limette-200-hue: 120.7;
  /* Limette 250 */
  --kern-limette-250-lightness: 77.69%;
  --kern-limette-250-chroma: 0.1864;
  --kern-limette-250-hue: 121;
  /* Limette 300 */
  --kern-limette-300-lightness: 73.21%;
  --kern-limette-300-chroma: 0.1755;
  --kern-limette-300-hue: 120.9;
  /* Limette 350 */
  --kern-limette-350-lightness: 68.65%;
  --kern-limette-350-chroma: 0.1645;
  --kern-limette-350-hue: 120.9;
  /* Limette 400 */
  --kern-limette-400-lightness: 65.38%;
  --kern-limette-400-chroma: 0.1582;
  --kern-limette-400-hue: 121.8;
  /* Limette 450 */
  --kern-limette-450-lightness: 60.7%;
  --kern-limette-450-chroma: 0.1467;
  --kern-limette-450-hue: 121.7;
  /* Limette 500 */
  --kern-limette-500-lightness: 55.93%;
  --kern-limette-500-chroma: 0.135;
  --kern-limette-500-hue: 121.6;
  /* Limette 550 */
  --kern-limette-550-lightness: 51.06%;
  --kern-limette-550-chroma: 0.1231;
  --kern-limette-550-hue: 121.4;
  /* Limette 600 */
  --kern-limette-600-lightness: 47.75%;
  --kern-limette-600-chroma: 0.115;
  --kern-limette-600-hue: 121.3;
  /* Limette 650 */
  --kern-limette-650-lightness: 42.55%;
  --kern-limette-650-chroma: 0.1032;
  --kern-limette-650-hue: 122;
  /* Limette 700 */
  --kern-limette-700-lightness: 39.09%;
  --kern-limette-700-chroma: 0.0946;
  --kern-limette-700-hue: 121.8;
  /* Limette 750 */
  --kern-limette-750-lightness: 35.55%;
  --kern-limette-750-chroma: 0.0858;
  --kern-limette-750-hue: 121.6;
  /* Limette 800 */
  --kern-limette-800-lightness: 30%;
  --kern-limette-800-chroma: 0.0727;
  --kern-limette-800-hue: 121.9;
  /* Limette 850 */
  --kern-limette-850-lightness: 26.21%;
  --kern-limette-850-chroma: 0.0631;
  --kern-limette-850-hue: 121.3;
  /* Limette 900 */
  --kern-limette-900-lightness: 22.14%;
  --kern-limette-900-chroma: 0.0541;
  --kern-limette-900-hue: 122.7;
  /* Limette 950 */
  --kern-limette-950-lightness: 18.08%;
  --kern-limette-950-chroma: 0.0434;
  --kern-limette-950-hue: 121.1;
}

:root {
  /* Yellow 025 */
  --kern-yellow-025-lightness: 97.15%;
  --kern-yellow-025-chroma: 0.1207;
  --kern-yellow-025-hue: 106.7;
  /* Yellow 050 */
  --kern-yellow-050-lightness: 94.9%;
  --kern-yellow-050-chroma: 0.1515;
  --kern-yellow-050-hue: 104.1;
  /* Yellow 100 */
  --kern-yellow-100-lightness: 90.5%;
  --kern-yellow-100-chroma: 0.1776;
  --kern-yellow-100-hue: 98.18;
  /* Yellow 150 */
  --kern-yellow-150-lightness: 86.85%;
  --kern-yellow-150-chroma: 0.1781;
  --kern-yellow-150-hue: 94.26;
  /* Yellow 200 */
  --kern-yellow-200-lightness: 82.83%;
  --kern-yellow-200-chroma: 0.1699;
  --kern-yellow-200-hue: 94.33;
  /* Yellow 250 */
  --kern-yellow-250-lightness: 78.01%;
  --kern-yellow-250-chroma: 0.1597;
  --kern-yellow-250-hue: 92.52;
  /* Yellow 300 */
  --kern-yellow-300-lightness: 73.93%;
  --kern-yellow-300-chroma: 0.1513;
  --kern-yellow-300-hue: 92.61;
  /* Yellow 350 */
  --kern-yellow-350-lightness: 69.79%;
  --kern-yellow-350-chroma: 0.1428;
  --kern-yellow-350-hue: 92.72;
  /* Yellow 400 */
  --kern-yellow-400-lightness: 65.58%;
  --kern-yellow-400-chroma: 0.1343;
  --kern-yellow-400-hue: 92.85;
  /* Yellow 450 */
  --kern-yellow-450-lightness: 61.31%;
  --kern-yellow-450-chroma: 0.1255;
  --kern-yellow-450-hue: 92.99;
  /* Yellow 500 */
  --kern-yellow-500-lightness: 56.96%;
  --kern-yellow-500-chroma: 0.1166;
  --kern-yellow-500-hue: 93.17;
  /* Yellow 550 */
  --kern-yellow-550-lightness: 52.05%;
  --kern-yellow-550-chroma: 0.1064;
  --kern-yellow-550-hue: 91.55;
  /* Yellow 600 */
  --kern-yellow-600-lightness: 47.57%;
  --kern-yellow-600-chroma: 0.0973;
  --kern-yellow-600-hue: 91.85;
  /* Yellow 650 */
  --kern-yellow-650-lightness: 44.52%;
  --kern-yellow-650-chroma: 0.0911;
  --kern-yellow-650-hue: 92.09;
  /* Yellow 700 */
  --kern-yellow-700-lightness: 39.84%;
  --kern-yellow-700-chroma: 0.0815;
  --kern-yellow-700-hue: 92.54;
  /* Yellow 750 */
  --kern-yellow-750-lightness: 34.74%;
  --kern-yellow-750-chroma: 0.071;
  --kern-yellow-750-hue: 91.44;
  /* Yellow 800 */
  --kern-yellow-800-lightness: 31.21%;
  --kern-yellow-800-chroma: 0.0638;
  --kern-yellow-800-hue: 90.35;
  /* Yellow 850 */
  --kern-yellow-850-lightness: 25.99%;
  --kern-yellow-850-chroma: 0.0531;
  --kern-yellow-850-hue: 90.14;
  /* Yellow 900 */
  --kern-yellow-900-lightness: 22.55%;
  --kern-yellow-900-chroma: 0.0461;
  --kern-yellow-900-hue: 91.64;
  /* Yellow 950 */
  --kern-yellow-950-lightness: 18.61%;
  --kern-yellow-950-chroma: 0.038;
  --kern-yellow-950-hue: 89.88;
}

:root {
  /* Orange 025 */
  --kern-orange-025-lightness: 98%;
  --kern-orange-025-chroma: 0.0188;
  --kern-orange-025-hue: 81.5;
  /* Orange 050 */
  --kern-orange-050-lightness: 95.85%;
  --kern-orange-050-chroma: 0.0433;
  --kern-orange-050-hue: 84.57;
  /* Orange 100 */
  --kern-orange-100-lightness: 91.5%;
  --kern-orange-100-chroma: 0.0891;
  --kern-orange-100-hue: 84.2;
  /* Orange 150 */
  --kern-orange-150-lightness: 87.38%;
  --kern-orange-150-chroma: 0.1245;
  --kern-orange-150-hue: 81.4;
  /* Orange 200 */
  --kern-orange-200-lightness: 83.3%;
  --kern-orange-200-chroma: 0.1517;
  --kern-orange-200-hue: 77.01;
  /* Orange 250 */
  --kern-orange-250-lightness: 79.67%;
  --kern-orange-250-chroma: 0.1689;
  --kern-orange-250-hue: 71.24;
  /* Orange 300 */
  --kern-orange-300-lightness: 74.41%;
  --kern-orange-300-chroma: 0.1646;
  --kern-orange-300-hue: 66.86;
  /* Orange 350 */
  --kern-orange-350-lightness: 70.85%;
  --kern-orange-350-chroma: 0.1565;
  --kern-orange-350-hue: 67.04;
  /* Orange 400 */
  --kern-orange-400-lightness: 66.63%;
  --kern-orange-400-chroma: 0.1493;
  --kern-orange-400-hue: 65.13;
  /* Orange 450 */
  --kern-orange-450-lightness: 61.81%;
  --kern-orange-450-chroma: 0.1382;
  --kern-orange-450-hue: 65.47;
  /* Orange 500 */
  --kern-orange-500-lightness: 57.6%;
  --kern-orange-500-chroma: 0.1306;
  --kern-orange-500-hue: 63.7;
  /* Orange 550 */
  --kern-orange-550-lightness: 52.64%;
  --kern-orange-550-chroma: 0.1189;
  --kern-orange-550-hue: 64.21;
  /* Orange 600 */
  --kern-orange-600-lightness: 48.42%;
  --kern-orange-600-chroma: 0.1108;
  --kern-orange-600-hue: 62.67;
  /* Orange 650 */
  --kern-orange-650-lightness: 44.59%;
  --kern-orange-650-chroma: 0.1015;
  --kern-orange-650-hue: 63.27;
  /* Orange 700 */
  --kern-orange-700-lightness: 40.32%;
  --kern-orange-700-chroma: 0.0927;
  --kern-orange-700-hue: 62.06;
  /* Orange 750 */
  --kern-orange-750-lightness: 36.35%;
  --kern-orange-750-chroma: 0.0829;
  --kern-orange-750-hue: 63.06;
  /* Orange 800 */
  --kern-orange-800-lightness: 32.01%;
  --kern-orange-800-chroma: 0.0733;
  --kern-orange-800-hue: 62.53;
  /* Orange 850 */
  --kern-orange-850-lightness: 27.62%;
  --kern-orange-850-chroma: 0.0632;
  --kern-orange-850-hue: 62.68;
  /* Orange 900 */
  --kern-orange-900-lightness: 22.99%;
  --kern-orange-900-chroma: 0.0528;
  --kern-orange-900-hue: 62.35;
  /* Orange 950 */
  --kern-orange-950-lightness: 18.36%;
  --kern-orange-950-chroma: 0.0413;
  --kern-orange-950-hue: 64.82;
}

:root {
  /* Red 025 */
  --kern-red-025-lightness: 98.03%;
  --kern-red-025-chroma: 0.0083;
  --kern-red-025-hue: 25.06;
  /* Red 050 */
  --kern-red-050-lightness: 95.36%;
  --kern-red-050-chroma: 0.0217;
  --kern-red-050-hue: 32.68;
  /* Red 100 */
  --kern-red-100-lightness: 91.24%;
  --kern-red-100-chroma: 0.0436;
  --kern-red-100-hue: 28.25;
  /* Red 150 */
  --kern-red-150-lightness: 87.71%;
  --kern-red-150-chroma: 0.0621;
  --kern-red-150-hue: 29.89;
  /* Red 200 */
  --kern-red-200-lightness: 83.28%;
  --kern-red-200-chroma: 0.0854;
  --kern-red-200-hue: 30.18;
  /* Red 250 */
  --kern-red-250-lightness: 79.59%;
  --kern-red-250-chroma: 0.1043;
  --kern-red-250-hue: 29.15;
  /* Red 300 */
  --kern-red-300-lightness: 75.15%;
  --kern-red-300-chroma: 0.1265;
  --kern-red-300-hue: 28.4;
  /* Red 350 */
  --kern-red-350-lightness: 71.18%;
  --kern-red-350-chroma: 0.143;
  --kern-red-350-hue: 28.92;
  /* Red 400 */
  --kern-red-400-lightness: 67.04%;
  --kern-red-400-chroma: 0.1611;
  --kern-red-400-hue: 28.5;
  /* Red 450 */
  --kern-red-450-lightness: 63.35%;
  --kern-red-450-chroma: 0.1717;
  --kern-red-450-hue: 29.1;
  /* Red 500 */
  --kern-red-500-lightness: 58.93%;
  --kern-red-500-chroma: 0.1871;
  --kern-red-500-hue: 29.12;
  /* Red 550 */
  --kern-red-550-lightness: 54.9%;
  --kern-red-550-chroma: 0.1972;
  --kern-red-550-hue: 29.28;
  /* Red 600 */
  --kern-red-600-lightness: 50.78%;
  --kern-red-600-chroma: 0.202;
  --kern-red-600-hue: 29.22;
  /* Red 650 */
  --kern-red-650-lightness: 46%;
  --kern-red-650-chroma: 0.1888;
  --kern-red-650-hue: 29.23;
  /* Red 700 */
  --kern-red-700-lightness: 41.84%;
  --kern-red-700-chroma: 0.1717;
  --kern-red-700-hue: 29.23;
  /* Red 750 */
  --kern-red-750-lightness: 37.56%;
  --kern-red-750-chroma: 0.1541;
  --kern-red-750-hue: 29.23;
  /* Red 800 */
  --kern-red-800-lightness: 32.04%;
  --kern-red-800-chroma: 0.1315;
  --kern-red-800-hue: 29.23;
  /* Red 850 */
  --kern-red-850-lightness: 28.62%;
  --kern-red-850-chroma: 0.1174;
  --kern-red-850-hue: 29.23;
  /* Red 900 */
  --kern-red-900-lightness: 23.88%;
  --kern-red-900-chroma: 0.098;
  --kern-red-900-hue: 29.23;
  /* Red 950 */
  --kern-red-950-lightness: 18.89%;
  --kern-red-950-chroma: 0.0775;
  --kern-red-950-hue: 29.23;
}

:root {
  /* Violet 025 */
  --kern-violet-025-lightness: 97.97%;
  --kern-violet-025-chroma: 0.0094;
  --kern-violet-025-hue: 311;
  /* Violet 050 */
  --kern-violet-050-lightness: 95.12%;
  --kern-violet-050-chroma: 0.0215;
  --kern-violet-050-hue: 312.8;
  /* Violet 100 */
  --kern-violet-100-lightness: 91.07%;
  --kern-violet-100-chroma: 0.0444;
  --kern-violet-100-hue: 314;
  /* Violet 150 */
  --kern-violet-150-lightness: 88%;
  --kern-violet-150-chroma: 0.0602;
  --kern-violet-150-hue: 313.2;
  /* Violet 200 */
  --kern-violet-200-lightness: 83.03%;
  --kern-violet-200-chroma: 0.0861;
  --kern-violet-200-hue: 313;
  /* Violet 250 */
  --kern-violet-250-lightness: 79.26%;
  --kern-violet-250-chroma: 0.106;
  --kern-violet-250-hue: 313.5;
  /* Violet 300 */
  --kern-violet-300-lightness: 75.52%;
  --kern-violet-300-chroma: 0.123;
  --kern-violet-300-hue: 313.3;
  /* Violet 350 */
  --kern-violet-350-lightness: 71.06%;
  --kern-violet-350-chroma: 0.1442;
  --kern-violet-350-hue: 313.8;
  /* Violet 400 */
  --kern-violet-400-lightness: 67.51%;
  --kern-violet-400-chroma: 0.1583;
  --kern-violet-400-hue: 313.6;
  /* Violet 450 */
  --kern-violet-450-lightness: 63.1%;
  --kern-violet-450-chroma: 0.1778;
  --kern-violet-450-hue: 313.2;
  /* Violet 500 */
  --kern-violet-500-lightness: 59.14%;
  --kern-violet-500-chroma: 0.1931;
  --kern-violet-500-hue: 313.6;
  /* Violet 550 */
  --kern-violet-550-lightness: 55.43%;
  --kern-violet-550-chroma: 0.2052;
  --kern-violet-550-hue: 313.9;
  /* Violet 600 */
  --kern-violet-600-lightness: 50.94%;
  --kern-violet-600-chroma: 0.2144;
  --kern-violet-600-hue: 313.2;
  /* Violet 650 */
  --kern-violet-650-lightness: 47.11%;
  --kern-violet-650-chroma: 0.2224;
  --kern-violet-650-hue: 313.7;
  /* Violet 700 */
  --kern-violet-700-lightness: 42.44%;
  --kern-violet-700-chroma: 0.2119;
  --kern-violet-700-hue: 312.4;
  /* Violet 750 */
  --kern-violet-750-lightness: 38.09%;
  --kern-violet-750-chroma: 0.1911;
  --kern-violet-750-hue: 311.5;
  /* Violet 800 */
  --kern-violet-800-lightness: 32.98%;
  --kern-violet-800-chroma: 0.1651;
  --kern-violet-800-hue: 311.9;
  /* Violet 850 */
  --kern-violet-850-lightness: 28.25%;
  --kern-violet-850-chroma: 0.1427;
  --kern-violet-850-hue: 310.2;
  /* Violet 900 */
  --kern-violet-900-lightness: 23.95%;
  --kern-violet-900-chroma: 0.1205;
  --kern-violet-900-hue: 311;
  /* Violet 950 */
  --kern-violet-950-lightness: 19.14%;
  --kern-violet-950-chroma: 0.0967;
  --kern-violet-950-hue: 310.2;
}

:root {
  /* Neutral 000 */
  --kern-neutral-000-lightness: 100%;
  --kern-neutral-000-chroma: 0;
  --kern-neutral-000-hue: 0;
  /* Neutral 025 */
  --kern-neutral-025-lightness: 97.46%;
  --kern-neutral-025-chroma: 0.0028;
  --kern-neutral-025-hue: 286.3;
  /* Neutral 050 */
  --kern-neutral-050-lightness: 95.79%;
  --kern-neutral-050-chroma: 0.0053;
  --kern-neutral-050-hue: 275;
  /* Neutral 100 */
  --kern-neutral-100-lightness: 91.42%;
  --kern-neutral-100-chroma: 0.012;
  --kern-neutral-100-hue: 276;
  /* Neutral 150 */
  --kern-neutral-150-lightness: 87.05%;
  --kern-neutral-150-chroma: 0.0183;
  --kern-neutral-150-hue: 275.9;
  /* Neutral 200 */
  --kern-neutral-200-lightness: 82.73%;
  --kern-neutral-200-chroma: 0.0236;
  --kern-neutral-200-hue: 275.8;
  /* Neutral 250 */
  --kern-neutral-250-lightness: 78.2%;
  --kern-neutral-250-chroma: 0.0305;
  --kern-neutral-250-hue: 276.7;
  /* Neutral 300 */
  --kern-neutral-300-lightness: 74.59%;
  --kern-neutral-300-chroma: 0.0358;
  --kern-neutral-300-hue: 276.5;
  /* Neutral 350 */
  --kern-neutral-350-lightness: 70.15%;
  --kern-neutral-350-chroma: 0.042;
  --kern-neutral-350-hue: 275.3;
  /* Neutral 400 */
  --kern-neutral-400-lightness: 65.51%;
  --kern-neutral-400-chroma: 0.0464;
  --kern-neutral-400-hue: 278.2;
  /* Neutral 450 */
  --kern-neutral-450-lightness: 61.18%;
  --kern-neutral-450-chroma: 0.0496;
  --kern-neutral-450-hue: 277;
  /* Neutral 500 */
  --kern-neutral-500-lightness: 56.84%;
  --kern-neutral-500-chroma: 0.0521;
  --kern-neutral-500-hue: 275.8;
  /* Neutral 550 */
  --kern-neutral-550-lightness: 52.32%;
  --kern-neutral-550-chroma: 0.054;
  --kern-neutral-550-hue: 276.6;
  /* Neutral 600 */
  --kern-neutral-600-lightness: 48.66%;
  --kern-neutral-600-chroma: 0.0561;
  --kern-neutral-600-hue: 276.4;
  /* Neutral 650 */
  --kern-neutral-650-lightness: 44.06%;
  --kern-neutral-650-chroma: 0.0569;
  --kern-neutral-650-hue: 277.1;
  /* Neutral 700 */
  --kern-neutral-700-lightness: 39.76%;
  --kern-neutral-700-chroma: 0.0529;
  --kern-neutral-700-hue: 277;
  /* Neutral 750 */
  --kern-neutral-750-lightness: 35.13%;
  --kern-neutral-750-chroma: 0.0511;
  --kern-neutral-750-hue: 277.7;
  /* Neutral 800 */
  --kern-neutral-800-lightness: 30.72%;
  --kern-neutral-800-chroma: 0.0459;
  --kern-neutral-800-hue: 276.7;
  /* Neutral 850 */
  --kern-neutral-850-lightness: 27%;
  --kern-neutral-850-chroma: 0.0409;
  --kern-neutral-850-hue: 277.5;
  /* Neutral 900 */
  --kern-neutral-900-lightness: 22.43%;
  --kern-neutral-900-chroma: 0.0333;
  --kern-neutral-900-hue: 275.7;
  /* Neutral 950 */
  --kern-neutral-950-lightness: 18.2%;
  --kern-neutral-950-chroma: 0.0301;
  --kern-neutral-950-hue: 277.2;
  /* Neutral 1000 */
  --kern-neutral-1000-lightness: 0%;
  --kern-neutral-1000-chroma: 0;
  --kern-neutral-1000-hue: 0;
}

:root {
  /* Dataport Red 025 */
  --kern-dataport-red-025-lightness: 97.36%;
  --kern-dataport-red-025-chroma: 0.0077;
  --kern-dataport-red-025-hue: 29.5;
  /* Dataport Red 050 */
  --kern-dataport-red-050-lightness: 95.43%;
  --kern-dataport-red-050-chroma: 0.0159;
  --kern-dataport-red-050-hue: 28.02;
  /* Dataport Red 100 */
  --kern-dataport-red-100-lightness: 91.44%;
  --kern-dataport-red-100-chroma: 0.0306;
  --kern-dataport-red-100-hue: 22.62;
  /* Dataport Red 150 */
  --kern-dataport-red-150-lightness: 86.8%;
  --kern-dataport-red-150-chroma: 0.0473;
  --kern-dataport-red-150-hue: 22.9;
  /* Dataport Red 200 */
  --kern-dataport-red-200-lightness: 83.04%;
  --kern-dataport-red-200-chroma: 0.0631;
  --kern-dataport-red-200-hue: 23.22;
  /* Dataport Red 250 */
  --kern-dataport-red-250-lightness: 79.69%;
  --kern-dataport-red-250-chroma: 0.0735;
  --kern-dataport-red-250-hue: 24.72;
  /* Dataport Red 300 */
  --kern-dataport-red-300-lightness: 75.31%;
  --kern-dataport-red-300-chroma: 0.0892;
  --kern-dataport-red-300-hue: 25.13;
  /* Dataport Red 350 */
  --kern-dataport-red-350-lightness: 70.75%;
  --kern-dataport-red-350-chroma: 0.106;
  --kern-dataport-red-350-hue: 24.48;
  /* Dataport Red 400 */
  --kern-dataport-red-400-lightness: 67.43%;
  --kern-dataport-red-400-chroma: 0.1144;
  --kern-dataport-red-400-hue: 24.87;
  /* Dataport Red 450 */
  --kern-dataport-red-450-lightness: 63.04%;
  --kern-dataport-red-450-chroma: 0.1271;
  --kern-dataport-red-450-hue: 24.44;
  /* Dataport Red 500 */
  --kern-dataport-red-500-lightness: 58.21%;
  --kern-dataport-red-500-chroma: 0.1391;
  --kern-dataport-red-500-hue: 25.34;
  /* Dataport Red 550 */
  --kern-dataport-red-550-lightness: 53.77%;
  --kern-dataport-red-550-chroma: 0.1479;
  --kern-dataport-red-550-hue: 24.4;
  /* Dataport Red 600 */
  --kern-dataport-red-600-lightness: 49.64%;
  --kern-dataport-red-600-chroma: 0.1499;
  --kern-dataport-red-600-hue: 24.41;
  /* Dataport Red 650 */
  --kern-dataport-red-650-lightness: 45.16%;
  --kern-dataport-red-650-chroma: 0.1509;
  --kern-dataport-red-650-hue: 24.05;
  /* Dataport Red 700 */
  --kern-dataport-red-700-lightness: 41.55%;
  --kern-dataport-red-700-chroma: 0.1502;
  --kern-dataport-red-700-hue: 24.71;
  /* Dataport Red 750 */
  --kern-dataport-red-750-lightness: 37%;
  --kern-dataport-red-750-chroma: 0.1412;
  --kern-dataport-red-750-hue: 24.71;
  /* Dataport Red 800 */
  --kern-dataport-red-800-lightness: 32.96%;
  --kern-dataport-red-800-chroma: 0.1314;
  --kern-dataport-red-800-hue: 24.33;
  /* Dataport Red 850 */
  --kern-dataport-red-850-lightness: 27.54%;
  --kern-dataport-red-850-chroma: 0.1116;
  --kern-dataport-red-850-hue: 24.96;
  /* Dataport Red 900 */
  --kern-dataport-red-900-lightness: 23.93%;
  --kern-dataport-red-900-chroma: 0.0973;
  --kern-dataport-red-900-hue: 26.03;
  /* Dataport Red 950 */
  --kern-dataport-red-950-lightness: 18.91%;
  --kern-dataport-red-950-chroma: 0.0772;
  --kern-dataport-red-950-hue: 27.71;
}

:root {
  /* --kern-gray-025 */
  --kern-gray-025-lightness: 97.72%;
  --kern-gray-025-chroma: 0;
  --kern-gray-025-hue: none;
  /* --kern-grey-050 */
  --kern-grey-050-lightness: 96.19%;
  --kern-grey-050-chroma: 0;
  --kern-grey-050-hue: none;
  /* --kern-grey-100 */
  --kern-grey-100-lightness: 91.57%;
  --kern-grey-100-chroma: 0;
  --kern-grey-100-hue: none;
  /* --kern-grey-150 */
  --kern-grey-150-lightness: 86.89%;
  --kern-grey-150-chroma: 0;
  --kern-grey-150-hue: none;
  /* --kern-grey-200 */
  --kern-grey-200-lightness: 82.94%;
  --kern-grey-200-chroma: 0;
  --kern-grey-200-hue: none;
  /* --kern-grey-250 */
  --kern-grey-250-lightness: 78.94%;
  --kern-grey-250-chroma: 0;
  --kern-grey-250-hue: none;
  /* --kern-grey-300 */
  --kern-grey-300-lightness: 74.07%;
  --kern-grey-300-chroma: 0;
  --kern-grey-300-hue: none;
  /* --kern-grey-350 */
  --kern-grey-350-lightness: 69.96%;
  --kern-grey-350-chroma: 0;
  --kern-grey-350-hue: none;
  /* --kern-grey-400 */
  --kern-grey-400-lightness: 65.78%;
  --kern-grey-400-chroma: 0;
  --kern-grey-400-hue: none;
  /* --kern-grey-450 */
  --kern-grey-450-lightness: 61.54%;
  --kern-grey-450-chroma: 0;
  --kern-grey-450-hue: none;
  /* --kern-grey-500 */
  --kern-grey-500-lightness: 56.34%;
  --kern-grey-500-chroma: 0;
  --kern-grey-500-hue: none;
  /* --kern-grey-550 */
  --kern-grey-550-lightness: 52.81%;
  --kern-grey-550-chroma: 0;
  --kern-grey-550-hue: none;
  /* --kern-grey-600 */
  --kern-grey-600-lightness: 48.32%;
  --kern-grey-600-chroma: 0;
  --kern-grey-600-hue: none;
  /* --kern-grey-650 */
  --kern-grey-650-lightness: 43.71%;
  --kern-grey-650-chroma: 0;
  --kern-grey-650-hue: none;
  /* --kern-grey-700 */
  --kern-grey-700-lightness: 39.94%;
  --kern-grey-700-chroma: 0;
  --kern-grey-700-hue: none;
  /* --kern-grey-750 */
  --kern-grey-750-lightness: 35.1%;
  --kern-grey-750-chroma: 0;
  --kern-grey-750-hue: none;
  /* --kern-grey-800 */
  --kern-grey-800-lightness: 31.1%;
  --kern-grey-800-chroma: 0;
  --kern-grey-800-hue: none;
  /* --kern-grey-850 */
  --kern-grey-850-lightness: 26.97%;
  --kern-grey-850-chroma: 0;
  --kern-grey-850-hue: none;
  /* --kern-grey-900 */
  --kern-grey-900-lightness: 22.67%;
  --kern-grey-900-chroma: 0;
  --kern-grey-900-hue: none;
  /* --kern-grey-950 */
  --kern-grey-950-lightness: 18.15%;
  --kern-grey-950-chroma: 0;
  --kern-grey-950-hue: none;
}

/**
 * @file _font.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 17.04.2025
 * @modified 23.05.2025
 * 2.3.0
 * @brief Tokens für die Font.
 *
 * Diese Datei enthält die Tokens für die Font
 */
:root {
  /* primitive-font-familiy */
  --kern-typography-font-family-fira-sans: Fira Sans;
  --kern-typography-font-family-fira-mono: Fira Mono;
  /* primitive-font-size */
  --kern-font-size-12: 0.75rem;
  --kern-font-size-16: 1rem;
  --kern-font-size-18: 1.125rem;
  --kern-font-size-20: 1.25rem;
  --kern-font-size-21: 1.3125rem;
  --kern-font-size-24: 1.5rem;
  --kern-font-size-26: 1.625rem;
  --kern-font-size-32: 2rem;
  --kern-font-size-40: 2.5rem;
  --kern-font-size-48: 3rem;
  --kern-font-size-56: 3.5rem;
  --kern-font-size-72: 4.5rem;
  --kern-font-size-80: 5rem;
}

/**
 * @file _sizes.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 17.04.2025
 * @modified 23.05.2025
 * 2.3.0
 * @brief Tokens für die Sizes.
 *
 * Diese Datei enthält die Tokens für die Sizes
 */
:root {
  /* primitive-number */
  --kern-0: 0rem;
  --kern-1: 0.0625rem;
  --kern-2: 0.125rem;
  --kern-3: 0.1875rem;
  --kern-4: 0.25rem;
  --kern-5: 0.3125rem;
  --kern-6: 0.375rem;
  --kern-7: 0.4375rem;
  --kern-8: 0.5rem;
  --kern-9: 0.5625rem;
  --kern-10: 0.625rem;
  --kern-14: 0.875rem;
  --kern-12: 0.75rem;
  --kern-16: 1rem;
  --kern-18: 1.125rem;
  --kern-20: 1.25rem;
  --kern-24: 1.5rem;
  --kern-32: 2rem;
  --kern-40: 2.5rem;
  --kern-48: 3rem;
  --kern-56: 3.5rem;
  --kern-64: 4rem;
  --kern-80: 5rem;
  --kern-96: 6rem;
  --kern-128: 8rem;
  --kern-160: 10rem;
  --kern-192: 12rem;
  --kern-224: 14rem;
  --kern-240: 15rem;
  --kern-256: 16rem;
  --kern-352: 22rem;
  --kern-360: 22.5rem;
  --kern-384: 24rem;
  --kern-480: 30rem;
  --kern-512: 32rem;
  --kern-736: 46rem;
  --kern-768: 48rem;
  --kern-992: 62rem;
  --kern-1024: 64rem;
  --kern-1140: 71.25rem;
  --kern-1248: 78rem;
  --kern-1280: 80rem;
  --kern-1504: 94rem;
  --kern-1536: 96rem;
  --kern-1600: 100rem;
  --kern-1920: 120rem;
}

/**
 * @file _variables.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 26.05.2025
 * 2.3.0
 * @brief Tokens für mertics, components, typography.
 *
 * Diese Datei enthält Tokens, um die Sizes zu definieren.
 * Variationen (Mobile und Desktop).
 */
:root {
  --kern-metric-border-width-none: var(--kern-0);
  --kern-metric-border-width-light: var(--kern-1);
  --kern-metric-border-width-default: var(--kern-2);
  --kern-metric-border-width-bold: var(--kern-4);
  --kern-metric-border-width-heavy: var(--kern-8);
  --kern-metric-border-radius-none: var(--kern-0);
  --kern-metric-border-radius-small: var(--kern-2);
  --kern-metric-border-radius-default: var(--theme-border-radius);
  --kern-metric-border-radius-large: var(--kern-8);
  --kern-metric-border-radius-circle: 50%;
  --kern-component-badge-space-left: var(--kern-12);
  --kern-component-description-list-term-max-width: var(--kern-352);
  --kern-component-alert-icon-size: var(--kern-32);
  --kern-component-kopfzeile-font-family: "Fira Sans", "Fira Sans Regular", "Noto Sans", "Noto Sans Regular", "SF Pro Text", "Segoe UI", SegoeUI, Roboto, Arial, Helvetica, sans-serif;
  --kern-component-kopfzeile-font-size: var(--kern-font-size-14);
  --kern-component-kopfzeile-line-height: var(--kern-font-size-16);
  --kern-component-kopfzeile-padding: var(--kern-7);
  --kern-metric-dimension-2x-small: var(--kern-8);
  --kern-metric-dimension-x-small: var(--kern-16);
  --kern-metric-dimension-small: var(--kern-20);
  --kern-metric-dimension-default: var(--kern-24);
  --kern-metric-dimension-large: var(--kern-32);
  --kern-metric-dimension-x-large: var(--kern-48);
  --kern-metric-dimension-2x-large: var(--kern-56);
  --kern-metric-dimension-3x-large: var(--kern-64);
  --kern-metric-dimension-4x-large: var(--kern-80);
  --kern-metric-dimension-5x-large: var(--kern-96);
  --kern-metric-dimension-media-small: var(--kern-96);
  --kern-metric-dimension-media-default: var(--kern-160);
  --kern-metric-dimension-media-large: var(--kern-240);
  --kern-metric-screen-size: var(--kern-360);
  --kern-metric-space-none: var(--kern-0);
  --kern-metric-space-2x-small: var(--kern-2);
  --kern-metric-space-x-small: var(--kern-4);
  --kern-metric-space-small: var(--kern-8);
  --kern-metric-space-default: var(--kern-16);
  --kern-metric-space-large: var(--kern-24);
  --kern-metric-space-x-large: var(--kern-32);
  --kern-typography-font-family-default: var(--kern-typography-font-family-fira-sans);
  --kern-typography-line-height-static-medium: var(--kern-font-size-24);
  --kern-typography-line-height-static-large: var(--kern-font-size-32);
  --kern-typography-line-height-adaptive-medium: var(--kern-font-size-24);
  --kern-typography-line-height-adaptive-large: var(--kern-font-size-32);
  --kern-typography-line-height-adaptive-x-large: var(--kern-font-size-40);
  --kern-typography-line-height-adaptive-2x-large: var(--kern-font-size-56);
  --kern-typography-font-size-static-small: var(--kern-font-size-16);
  --kern-typography-font-size-static-medium: var(--kern-font-size-18);
  --kern-typography-font-size-static-large: var(--kern-font-size-21);
  --kern-typography-font-size-adaptive-medium: var(--kern-font-size-21);
  --kern-typography-font-size-adaptive-large: var(--kern-font-size-26);
  --kern-typography-font-size-adaptive-x-large: var(--kern-font-size-32);
  --kern-typography-font-size-adaptive-2x-large: var(--kern-font-size-48);
  --kern-metric-baseline-body-default-padding-top: var(--kern-6);
  --kern-metric-baseline-body-default-padding-bottom: var(--kern-2);
  --kern-metric-baseline-body-large-padding-top: var(--kern-1);
  --kern-metric-baseline-body-large-padding-bottom: var(--kern-7);
  --kern-metric-baseline-body-small-padding-top: var(--kern-7);
  --kern-metric-baseline-body-small-padding-bottom: var(--kern-1);
  --kern-metric-baseline-heading-display-padding-top: var(--kern-12);
  --kern-metric-baseline-heading-display-padding-bottom: var(--kern-12);
  --kern-metric-baseline-heading-x-large-padding-top: var(--kern-9);
  --kern-metric-baseline-heading-x-large-padding-bottom: var(--kern-7);
  --kern-metric-baseline-heading-large-padding-top: var(--kern-7);
  --kern-metric-baseline-heading-large-padding-bottom: var(--kern-9);
  --kern-metric-baseline-heading-medium-padding-top: var(--kern-5);
  --kern-metric-baseline-heading-medium-padding-bottom: var(--kern-3);
  --kern-metric-baseline-heading-small-padding-top: var(--kern-6);
  --kern-metric-baseline-heading-small-padding-bottom: var(--kern-2);
  --kern-metric-baseline-title-large-padding-top: var(--kern-7);
  --kern-metric-baseline-title-large-padding-bottom: var(--kern-9);
  --kern-metric-baseline-title-default-padding-top: var(--kern-5);
  --kern-metric-baseline-title-default-padding-bottom: var(--kern-3);
  --kern-metric-baseline-title-small-padding-top: var(--kern-6);
  --kern-metric-baseline-title-small-padding-bottom: var(--kern-2);
  --kern-metric-baseline-preline-large-padding-top: var(--kern-1);
  --kern-metric-baseline-preline-large-padding-bottom: var(--kern-7);
  --kern-metric-baseline-preline-default-padding-top: var(--kern-6);
  --kern-metric-baseline-preline-default-padding-bottom: var(--kern-2);
  --kern-metric-baseline-preline-small-padding-top: var(--kern-7);
  --kern-metric-baseline-preline-small-padding-bottom: var(--kern-1);
  --kern-metric-baseline-subline-large-padding-top: var(--kern-1);
  --kern-metric-baseline-subline-large-padding-bottom: var(--kern-7);
  --kern-metric-baseline-subline-default-padding-top: var(--kern-6);
  --kern-metric-baseline-subline-default-padding-bottom: var(--kern-2);
  --kern-metric-baseline-subline-small-padding-top: var(--kern-7);
  --kern-metric-baseline-subline-small-padding-bottom: var(--kern-9);
  --kern-metric-baseline-label-large-padding-top: var(--kern-1);
  --kern-metric-baseline-label-large-padding-bottom: var(--kern-7);
  --kern-metric-baseline-label-default-padding-top: var(--kern-6);
  --kern-metric-baseline-label-default-padding-bottom: var(--kern-2);
  --kern-metric-baseline-label-small-padding-top: var(--kern-7);
  --kern-metric-baseline-label-small-padding-bottom: var(--kern-1);
  --kern-typography-font-weight-regular: 400;
  --kern-typography-font-weight-medium: 500;
  --kern-typography-font-weight-semi-bold: 600;
}
@media (min-width: 768px) {
  :root {
    --kern-component-kopfzeile-padding: var(--kern-7);
    --kern-component-alert-icon-size: var(--kern-40);
    --kern-component-kopfzeile-font-size: var(--kern-font-size-16);
    --kern-component-kopfzeile-line-height: var(--kern-font-size-20);
    --kern-component-kopfzeile-padding: var(--kern-5);
    --kern-metric-dimension-media-small: var(--kern-128);
    --kern-metric-dimension-media-default: var(--kern-192);
    --kern-metric-dimension-media-large: var(--kern-360);
    --kern-metric-screen-size: var(--kern-1920);
    --kern-typography-line-height-adaptive-medium: var(--kern-font-size-32);
    --kern-typography-line-height-adaptive-large: var(--kern-font-size-40);
    --kern-typography-line-height-adaptive-x-large: var(--kern-font-size-56);
    --kern-typography-line-height-adaptive-2x-large: var(--kern-font-size-80);
    --kern-typography-font-size-adaptive-medium: var(--kern-font-size-24);
    --kern-typography-font-size-adaptive-large: var(--kern-font-size-32);
    --kern-typography-font-size-adaptive-x-large: var(--kern-font-size-48);
    --kern-typography-font-size-adaptive-2x-large: var(--kern-font-size-72);
    --kern-metric-baseline-heading-x-large-padding-top: var(--kern-12);
    --kern-metric-baseline-heading-x-large-padding-bottom: var(--kern-12);
    --kern-metric-baseline-heading-large-padding-top: var(--kern-9);
    --kern-metric-baseline-heading-large-padding-bottom: var(--kern-7);
    --kern-metric-baseline-heading-medium-padding-top: var(--kern-8);
    --kern-metric-baseline-heading-medium-padding-bottom: var(--kern-8);
    --kern-metric-baseline-heading-display-padding-top: var(--kern-16);
    --kern-metric-baseline-heading-display-padding-bottom: var(--kern-16);
    --kern-metric-baseline-title-large-padding-top: var(--kern-9);
    --kern-metric-baseline-title-large-padding-bottom: var(--kern-7);
    --kern-metric-baseline-title-default-padding-top: var(--kern-8);
    --kern-metric-baseline-title-default-padding-bottom: var(--kern-8);
  }
}

/**
 * @file _themes.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * 2.3.0
 * @brief Tokens für Color-Themes.
 *
 * Diese Datei enthält Tokens, um die Colors zu definieren.
 * Variationen (Light und Dark).
 */
@media (prefers-color-scheme: dark) {
  :root {
    /* action */
    --kern-color-action-default: oklch(var(--theme-action-default));
    --kern-color-action-on-default: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
    --kern-color-action-visited: oklch(var(--kern-violet-300-lightness) var(--kern-violet-300-chroma) var(--kern-violet-300-hue));
    /* action-focus */
    --kern-color-action-focus-background: oklch(var(--kern-neutral-400-lightness) var(--kern-neutral-400-chroma) var(--kern-neutral-400-hue));
    --kern-color-action-focus-border-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
    --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-800-lightness) var(--kern-neutral-800-chroma) var(--kern-neutral-800-hue));
    /* action-state */
    /* action-state-indicator */
    --kern-color-action-state-indicator-default: var(--kern-color-action-default);
    --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);
    --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
    /* action-state-opacity */
    --kern-color-action-state-opacity-hover: 0.12;
    --kern-color-action-state-opacity-pressed: 0.32;
    --kern-color-action-state-opacity-selected: 0.16;
    --kern-color-action-state-opacity-disabled: 0.4;
    --kern-color-action-state-opacity-active: 0.24;
    --kern-color-action-state-opacity-overlay: 0.72;
    /* feedback */
    --kern-color-feedback-danger: oklch(var(--kern-red-400-lightness) var(--kern-red-400-chroma) var(--kern-red-400-hue));
    --kern-color-feedback-danger-background: oklch(var(--kern-red-900-lightness) var(--kern-red-900-chroma) var(--kern-red-900-hue));
    --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
    --kern-color-feedback-success: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
    --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
    --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
    /* feedback-loader */
    --kern-color-feedback-loader: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
    --kern-color-feedback-loader-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
    /* form-inputs */
    --kern-color-form-input-background: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
    --kern-color-form-input-background-inverted: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
    --kern-color-form-input-border: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
    /* layout */
    --kern-color-layout-border: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
    /* layout-text */
    --kern-color-layout-text-default: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
    --kern-color-layout-text-inverse: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
    --kern-color-layout-text-muted: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
    /* layout-background */
    --kern-color-layout-background-default: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
    --kern-color-layout-background-hued: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
    --kern-color-layout-background-overlay: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue) / var(--kern-color-action-state-opacity-overlay));
    --kern-color-layout-background-inverted: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
    --kern-color-action-state-indicator-shade-hover: oklch(var(--kern-darkblue-200-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
    --kern-color-action-state-indicator-shade-active: oklch(var(--kern-darkblue-100-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
    --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-950-lightness) var(--kern-darkblue-950-chroma) var(--kern-darkblue-950-hue));
    --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
    --kern-color-action-state-indicator-tint-hover-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-hover));
    --kern-color-action-state-indicator-tint-active-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-active));
  }
}
@media (prefers-color-scheme: light) {
  :root {
    /* action */
    --kern-color-action-default: oklch(var(--theme-action-default));
    --kern-color-action-on-default: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
    --kern-color-action-visited: oklch(var(--kern-violet-700-lightness) var(--kern-violet-700-chroma) var(--kern-violet-700-hue));
    /* action-focus */
    --kern-color-action-focus-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
    --kern-color-action-focus-border-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
    --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-200-lightness) var(--kern-neutral-200-chroma) var(--kern-neutral-200-hue));
    /* action-state */
    /* action-state-indicator */
    --kern-color-action-state-indicator-default: var(--kern-color-action-default);
    --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);
    --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
    /* action-state-opacity */
    --kern-color-action-state-opacity-hover: 0.08;
    --kern-color-action-state-opacity-pressed: 0.32;
    --kern-color-action-state-opacity-selected: 0.12;
    --kern-color-action-state-opacity-disabled: 0.4;
    --kern-color-action-state-opacity-active: 0.16;
    --kern-color-action-state-opacity-overlay: 0.72;
    /* feedback */
    --kern-color-feedback-danger: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
    --kern-color-feedback-danger-background: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
    --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
    --kern-color-feedback-success: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
    --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
    --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
    /* feedback-loader */
    --kern-color-feedback-loader: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
    --kern-color-feedback-loader-background: oklch(var(--kern-neutral-100-lightness) var(--kern-neutral-100-chroma) var(--kern-neutral-100-hue));
    /* form-inputs */
    --kern-color-form-input-background: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
    --kern-color-form-input-background-inverted: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
    --kern-color-form-input-border: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
    /* layout */
    --kern-color-layout-border: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
    /* layout-text */
    --kern-color-layout-text-default: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
    --kern-color-layout-text-inverse: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
    --kern-color-layout-text-muted: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
    /* layout-background */
    --kern-color-layout-background-default: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
    --kern-color-layout-background-hued: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
    --kern-color-layout-background-overlay: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue) / var(--kern-color-action-state-opacity-overlay));
    --kern-color-layout-background-inverted: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
    --kern-color-action-state-indicator-shade-hover: oklch(var(--kern-darkblue-600-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
    --kern-color-action-state-indicator-shade-active: oklch(var(--kern-darkblue-500-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
    --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-050-lightness) var(--kern-darkblue-050-chroma) var(--kern-darkblue-050-hue));
    --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-100-lightness) var(--kern-darkblue-100-chroma) var(--kern-darkblue-100-hue));
    --kern-color-action-state-indicator-tint-hover-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-hover));
    --kern-color-action-state-indicator-tint-active-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-active));
  }
}
[data-kern-theme=light],
.kern-light {
  /* action */
  --kern-color-action-default: oklch(var(--theme-action-default));
  --kern-color-action-on-default: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
  --kern-color-action-visited: oklch(var(--kern-violet-700-lightness) var(--kern-violet-700-chroma) var(--kern-violet-700-hue));
  /* action-focus */
  --kern-color-action-focus-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
  --kern-color-action-focus-border-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
  --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-200-lightness) var(--kern-neutral-200-chroma) var(--kern-neutral-200-hue));
  /* action-state */
  /* action-state-indicator */
  --kern-color-action-state-indicator-default: var(--kern-color-action-default);
  --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);
  --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
  /* action-state-opacity */
  --kern-color-action-state-opacity-hover: 0.08;
  --kern-color-action-state-opacity-pressed: 0.32;
  --kern-color-action-state-opacity-selected: 0.12;
  --kern-color-action-state-opacity-disabled: 0.4;
  --kern-color-action-state-opacity-active: 0.16;
  --kern-color-action-state-opacity-overlay: 0.72;
  /* feedback */
  --kern-color-feedback-danger: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
  --kern-color-feedback-danger-background: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
  --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
  --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
  --kern-color-feedback-success: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
  --kern-color-feedback-success-background: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
  --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
  --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
  /* feedback-loader */
  --kern-color-feedback-loader: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
  --kern-color-feedback-loader-background: oklch(var(--kern-neutral-100-lightness) var(--kern-neutral-100-chroma) var(--kern-neutral-100-hue));
  /* form-inputs */
  --kern-color-form-input-background: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
  --kern-color-form-input-background-inverted: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
  --kern-color-form-input-border: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
  /* layout */
  --kern-color-layout-border: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
  /* layout-text */
  --kern-color-layout-text-default: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
  --kern-color-layout-text-inverse: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
  --kern-color-layout-text-muted: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
  /* layout-background */
  --kern-color-layout-background-default: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
  --kern-color-layout-background-hued: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
  --kern-color-layout-background-overlay: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue) / var(--kern-color-action-state-opacity-overlay));
  --kern-color-layout-background-inverted: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
  --kern-color-action-state-indicator-shade-hover: oklch(var(--kern-darkblue-600-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
  --kern-color-action-state-indicator-shade-active: oklch(var(--kern-darkblue-500-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
  --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-050-lightness) var(--kern-darkblue-050-chroma) var(--kern-darkblue-050-hue));
  --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-100-lightness) var(--kern-darkblue-100-chroma) var(--kern-darkblue-100-hue));
  --kern-color-action-state-indicator-tint-hover-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-hover));
  --kern-color-action-state-indicator-tint-active-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-active));
}

[data-kern-theme=dark],
.kern-dark {
  /* action */
  --kern-color-action-default: oklch(var(--theme-action-default));
  --kern-color-action-on-default: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
  --kern-color-action-visited: oklch(var(--kern-violet-300-lightness) var(--kern-violet-300-chroma) var(--kern-violet-300-hue));
  /* action-focus */
  --kern-color-action-focus-background: oklch(var(--kern-neutral-400-lightness) var(--kern-neutral-400-chroma) var(--kern-neutral-400-hue));
  --kern-color-action-focus-border-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
  --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-800-lightness) var(--kern-neutral-800-chroma) var(--kern-neutral-800-hue));
  /* action-state */
  /* action-state-indicator */
  --kern-color-action-state-indicator-default: var(--kern-color-action-default);
  --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);
  --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
  /* action-state-opacity */
  --kern-color-action-state-opacity-hover: 0.12;
  --kern-color-action-state-opacity-pressed: 0.32;
  --kern-color-action-state-opacity-selected: 0.16;
  --kern-color-action-state-opacity-disabled: 0.4;
  --kern-color-action-state-opacity-active: 0.24;
  --kern-color-action-state-opacity-overlay: 0.72;
  /* feedback */
  --kern-color-feedback-danger: oklch(var(--kern-red-400-lightness) var(--kern-red-400-chroma) var(--kern-red-400-hue));
  --kern-color-feedback-danger-background: oklch(var(--kern-red-900-lightness) var(--kern-red-900-chroma) var(--kern-red-900-hue));
  --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
  --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
  --kern-color-feedback-success: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
  --kern-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
  --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
  --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
  /* feedback-loader */
  --kern-color-feedback-loader: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
  --kern-color-feedback-loader-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
  /* form-inputs */
  --kern-color-form-input-background: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
  --kern-color-form-input-background-inverted: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
  --kern-color-form-input-border: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
  /* layout */
  --kern-color-layout-border: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
  /* layout-text */
  --kern-color-layout-text-default: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
  --kern-color-layout-text-inverse: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
  --kern-color-layout-text-muted: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
  /* layout-background */
  --kern-color-layout-background-default: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
  --kern-color-layout-background-hued: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
  --kern-color-layout-background-overlay: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue) / var(--kern-color-action-state-opacity-overlay));
  --kern-color-layout-background-inverted: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
  --kern-color-action-state-indicator-shade-hover: oklch(var(--kern-darkblue-200-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
  --kern-color-action-state-indicator-shade-active: oklch(var(--kern-darkblue-100-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
  --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-950-lightness) var(--kern-darkblue-950-chroma) var(--kern-darkblue-950-hue));
  --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
  --kern-color-action-state-indicator-tint-hover-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-hover));
  --kern-color-action-state-indicator-tint-active-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-active));
}

:root {
  --theme-border-radius: var(--kern-4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-action-default: var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue);
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --theme-action-default: var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue);
  }
}
[data-kern-theme=light],
.kern-light {
  --theme-action-default: var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue);
}

[data-kern-theme=dark],
.kern-dark {
  --theme-action-default: var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue);
}