/* Document
 * ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

:where(html) {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  text-size-adjust: 100%; /* 2 */
}

/* Sections
 * ========================================================================== */

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

:where(h1) {
  font-size: 2em;
  margin-block-end: 0.67em;
  margin-block-start: 0.67em;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */

:where(hr) {
  box-sizing: content-box; /* 1 */
  color: inherit; /* 2 */
  height: 0; /* 1 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Add the correct text decoration in Safari.
 */

:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

:where(b, strong) {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

:where(code, kbd, pre, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

:where(small) {
  font-size: 80%;
}

/* Tabular data
 * ========================================================================== */

/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

:where(table) {
  border-color: currentColor; /* 1 */
  text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

:where(button, input, select) {
  margin: 0;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(button) {
  text-transform: none;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
  -webkit-appearance: button;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

:where(progress) {
  vertical-align: baseline;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(select) {
  text-transform: none;
}

/**
 * Remove the margin in Firefox and Safari.
 */

:where(textarea) {
  margin: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

:where(input[type="search" i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:where(:-moz-ui-invalid) {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct styles in Safari.
 */

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

:where(summary) {
  display: list-item;
}

* {
  box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 10rem;
}

body {
  margin: 0;
  padding: 0;
}

[data-jumptarget] {
    scroll-padding-inline: 2.5rem;
}

@font-face {
    src: local("GillSansMTPro-Medium.otf"),
        url("/_astro/GillSansMTPro-Medium.jI7gpJlk.otf");
    font-family: "Gill Sans";
}

@font-face {
    src: local("GillSansMTPro-MediumItalic.otf"),
        url("/_astro/GillSansMTPro-MediumItalic.uayd3byC.otf");
    font-family: "Gill Sans";
    font-style: italic;
}

@font-face {
    src: local("GillSansMTPro-Bold.otf"), url("/_astro/GillSansMTPro-Bold.GoVuSCde.otf");
    font-family: "Gill Sans";
    font-weight: 600;
}

@font-face {
    src: local("DMSerifDisplay-Regular.ttf"),
        url("/_astro/DMSerifDisplay-Regular.BB3xDZ4A.ttf");
    font-family: "DM Serif Display";
}

:root {
    /* Factor for spacing corrections due to issues with Gill Sans Fontface (Baseline) */
    --gill-sans-delta: 0.1875rem;
}

body {
    font-family: "Gill Sans", sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1rem;
    letter-spacing: 0;
    background-color: rgb(var(--color-joka-white));
    color: rgb(var(--color-joka-black));
}

/* SEE: https://www.figma.com/file/dLXzoNSdbFlGZOs4lGxsZT/JOKA-Relaunch?type=design&node-id=9-99&mode=design&t=p6rXNfYE6pUX0UBe-0 */

:root {
    /* color format: R, G, B */
    --color-joka-black: 0, 0, 0;
    --color-joka-black-80: 51, 51, 51;
    --color-joka-black-60: 102, 102, 102;
    --color-joka-black-40: 153, 153, 153;
    --color-joka-black-20: 204, 204, 204;

    --color-future-green: 0, 165, 81;
    --color-future-green-pressed: 2, 148, 73;
    --color-future-green-visited: 2, 125, 62;

    --color-future-green-20: 204, 237, 220;
    --color-future-green-10: 233, 246, 239;

    --color-warm-grey-base: 238, 236, 230;
    --color-warm-grey-light: 245, 244, 240;
    --color-warm-grey-lighter: 248, 247, 245;

    --color-joka-white: 255, 255, 255;

    --color-cinnamon: 164, 89, 41;

    --color-red: 190, 67, 67;
    --color-red-20: 245, 218, 218;
    --color-red-10: 252, 244, 244;

    --color-orange: 192, 150, 0;
    --color-orange-20: 249, 240, 209;
    --color-orange-10: 253, 248, 230;

    /* INKU only: */
    --color-inku-red: 227, 6, 19;
}

:root {
  --spacing-base-unit: 0.125rem; /* 2px */

  --spacing-1: var(--spacing-base-unit);
  --spacing-2: calc(var(--spacing-base-unit) * 2);
  --spacing-3: calc(var(--spacing-base-unit) * 3);
  --spacing-4: calc(var(--spacing-base-unit) * 4);
  --spacing-5: calc(var(--spacing-base-unit) * 5);
  --spacing-6: calc(var(--spacing-base-unit) * 6);
  --spacing-7: calc(var(--spacing-base-unit) * 7);
  --spacing-8: calc(var(--spacing-base-unit) * 8);
  --spacing-9: calc(var(--spacing-base-unit) * 9);
  --spacing-10: calc(var(--spacing-base-unit) * 10);
  --spacing-11: calc(var(--spacing-base-unit) * 11);
  --spacing-12: calc(var(--spacing-base-unit) * 12);
  --spacing-13: calc(var(--spacing-base-unit) * 13);
  --spacing-14: calc(var(--spacing-base-unit) * 14);
  --spacing-15: calc(var(--spacing-base-unit) * 15);
  --spacing-16: calc(var(--spacing-base-unit) * 16);
  --spacing-17: calc(var(--spacing-base-unit) * 17);
  --spacing-18: calc(var(--spacing-base-unit) * 18);
  --spacing-19: calc(var(--spacing-base-unit) * 19);
  --spacing-20: calc(var(--spacing-base-unit) * 20);
  --spacing-21: calc(var(--spacing-base-unit) * 21);
  --spacing-22: calc(var(--spacing-base-unit) * 22);
  --spacing-23: calc(var(--spacing-base-unit) * 23);
  --spacing-24: calc(var(--spacing-base-unit) * 24);
  --spacing-25: calc(var(--spacing-base-unit) * 25);
  --spacing-26: calc(var(--spacing-base-unit) * 26);
  --spacing-27: calc(var(--spacing-base-unit) * 27);
  --spacing-28: calc(var(--spacing-base-unit) * 28);
  --spacing-29: calc(var(--spacing-base-unit) * 29);
  --spacing-30: calc(var(--spacing-base-unit) * 30);
  --spacing-31: calc(var(--spacing-base-unit) * 31);
  --spacing-32: calc(var(--spacing-base-unit) * 32);
  --spacing-33: calc(var(--spacing-base-unit) * 33);
  --spacing-34: calc(var(--spacing-base-unit) * 34);
  --spacing-35: calc(var(--spacing-base-unit) * 35);
  --spacing-36: calc(var(--spacing-base-unit) * 36);
  --spacing-40: calc(var(--spacing-base-unit) * 40);
}

:root {
  /* GENERAL */
  --disabled-color: var(--color-joka-black-40);

  /* PRIMARY */
  --primary-border-color: var(--color-joka-black);
  --primary-bg-color: var(--color-joka-black);
  --primary-color: var(--color-joka-white);

  --primary-hover-color: var(--color-future-green);

  --primary-active-color: var(--color-future-green-pressed);

  --primary-focus-color: var(--color-joka-black);

  /* SECONDARY */
  --secondary-border-color: var(--color-joka-black);
  --secondary-bg-color: var(--color-joka-white);
  --secondary-color: var(--color-joka-black);

  --secondary-hover-color: var(--color-future-green);

  --secondary-active-color: var(--color-future-green-pressed);

  --secondary-focus-color: var(--color-joka-black);

  /* PLAIN */

  --plain-color: var(--color-joka-black);

  --plain-hover-color: var(--color-future-green);

  --plain-active-color: var(--color-future-green-pressed);

  --plain-focus-color: var(--color-joka-black);

  /* ICON ONLY - PRIMARY */
  --primary-icon-border-color: var(--color-joka-black);
  --primary-icon-bg-color: var(--color-joka-black);
  --primary-icon-color: var(--color-joka-white);

  --primary-icon-hover-color: var(--color-future-green);

  --primary-icon-active-color: var(--color-future-green-pressed);

  --primary-icon-focus-color: var(--color-joka-black);

  /* ICON ONLY - SECONDARY */
  --secondary-icon-border-color: var(--color-joka-black);
  --secondary-icon-bg-color: var(--color-joka-black);
  --secondary-icon-color: var(--color-joka-black);

  --secondary-icon-hover-color: var(--color-future-green);

  --secondary-icon-active-color: var(--color-future-green-pressed);

  --secondary-icon-focus-color: var(--color-joka-black);
}

section {
  padding-bottom: var(--spacing-12);
  padding-top: var(--spacing-12);
}

@media screen and (min-width: 62em) {

section {
    padding-bottom: var(--spacing-40);
    padding-top: var(--spacing-40);
}
  }

header {
  position: sticky;
  top: 0;
  z-index: 999;
}

svg#flags,
svg#icons {
    display: none;
}

.flag {
    --default-width: 1.5rem;
    --default-height: 1rem;

    width: var(--flag-width, var(--default-width));
    height: var(--flag-height, var(--default-height));
}

@media screen and (min-width: 62em) {

.flag {
        --default-width: 2.25rem;
        --default-height: 1.5rem;
}
    }

.icon {
    --default-size: 1.25rem;

    width: var(--icon-size, var(--default-size));
    height: var(--icon-size, var(--default-size));
    stroke: rgb(var(--icon-color, var(--color-joka-black)));
    stroke-width: var(--icon-stroke-width, 2);
    fill: var(--icon-fill, none);
}

@media screen and (min-width: 62em) {

.icon {
        --default-size: 1.5rem;
}
    }

.table {
    width: 100%;
    margin-top: var(--spacing-8);
    overflow-x: scroll;
    margin: 0;
}

.table table {
        width: 100%;
        border-collapse: collapse;
    }

.table th, .table td {
        padding-top: calc(var(--spacing-3) + var(--gill-sans-delta));
        padding-bottom: calc(var(--spacing-3) - var(--gill-sans-delta));
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
        border-width: 1px;
        border-style: solid;
        border-color: rgb(var(--color-warm-grey-base));
        max-width: 343px;
        min-width: 86px;
        width: fit-content;
    }

.table th:empty, .table td:empty {
        border: none;
    }

.table .td-jk01 {
        --text-color: var(--color-joka-white);
        background-color: #b7a364;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk02 {
        --text-color: var(--color-joka-white);
        background-color: #5c4e44;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk03 {
        --text-color: var(--color-joka-white);
        background-color: #c1972a;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk10 {
        --text-color: var(--color-joka-white);
        background-color: #235799;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk11 {
        --text-color: var(--color-joka-white);
        background-color: #2d5e6b;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk13 {
        --text-color: var(--color-joka-white);
        background-color: #43712B;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk15 {
        --text-color: var(--color-joka-white);
        background-color: #a22234;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk16 {
        --text-color: var(--color-joka-white);
        background-color: #d48329;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk17 {
        --text-color: var(--color-joka-white);
        background-color: #a29839;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk19-fix {
        --text-color: var(--color-joka-white);
        background-color: #2f6e4f;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk20 {
        --text-color: var(--color-joka-white);
        background-color: #e6bf25;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk21 {
        --text-color: var(--color-joka-white);
        background-color: #421f69;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk22 {
        --text-color: var(--color-joka-white);
        background-color: #7c0155;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk24 {
        --text-color: var(--color-joka-white);
        background-color: #aaba28;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk26 {
        --text-color: var(--color-joka-white);
        background-color: #5399d7;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk27 {
        --text-color: var(--color-joka-white);
        background-color: #6c8098;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-jk32 {
        --text-color: var(--color-joka-white);
        background-color: #656569;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-grey {
        --text-color: var(--color-joka-white);
        background-color: #6b6b6a;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-future-green {
        --text-color: var(--color-joka-white);
        background-color: #00a551;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-green {
        --text-color: var(--color-joka-white);
        background-color: #007a4d;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-brown {
        --text-color: var(--color-joka-white);
        background-color: #4a3716;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-joka-black {
        --text-color: var(--color-joka-white);
        background-color: #000;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-joka-black-80 {
        --text-color: var(--color-joka-white);
        background-color: #333;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-joka-black-60 {
        --text-color: var(--color-joka-white);
        background-color: #666;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-joka-black-40 {
        --text-color: var(--color-joka-white);
        background-color: #999;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-joka-black-20 {
        --text-color: var(--color-joka-white);
        background-color: #ccc;
        border-color: rgb(var(--color-joka-black));
    }

.table .td-warm-grey-1 {
        background-color: #eeece6;
    }

.table .td-warm-grey-2 {
        background-color: #f5f4f0;
    }

.table .td-warm-grey-3 {
        background-color: #f8f7f5;
    }

.table .td-joka-white {
        background-color: #fff;
    }

.table .td-cinnamon {
        background-color: #a45929;
        --text-color: var(--color-joka-white);
    }

.table .td-red {
        background-color: #be4343;
        --text-color: var(--color-joka-white);
    }

.table .td-orange {
        background-color: #e18518;
        --text-color: var(--color-joka-white);
    }
._inku_kiesr_1 {
    --inku-meta-bg-color: var(--color-inku-red);
    --inku-meta-active-cta-bg-color: var(--color-joka-black);
    --inku-navbar-border-top-color: var(--color-inku-red);
    --inku-footer-bg-color: var(--color-joka-white);
    --inku-footer-text-color: var(--color-joka-black);
    --inku-footer-border-top-color: var(--color-inku-red);
    --inku-footer-social-media-bg-color: var(--color-joka-black);
    --inku-footer-social-media-color: var(--color-joka-white);
    --inku-footer-meta-border-top-color: var(--color-warm-grey-base);
}
._inku_kiesr_1 button,
    ._inku_kiesr_1 a {
        /* GENERAL */
        --disabled-color: var(--color-joka-black-40);

        /* PRIMARY */
        --primary-border-color: var(--color-inku-red);
        --primary-bg-color: var(--color-inku-red);
        --primary-color: var(--color-joka-white);

        --primary-hover-color: var(--color-joka-black);

        --primary-active-color: var(--color-joka-black-80);

        --primary-focus-color: var(--color-joka-black);

        /* SECONDARY */
        --secondary-border-color: var(--color-inku-red);
        --secondary-bg-color: var(--color-joka-white);
        --secondary-color: var(--color-inku-red);

        --secondary-hover-color: var(--color-joka-black);

        --secondary-active-color: var(--color-joka-black-80);

        --secondary-focus-color: var(--color-joka-black);

        /* PLAIN */
        --plain-color: var(--color-joka-black);

        --plain-hover-color: var(--color-inku-red);

        --plain-active-color: var(--color-joka-black-80);

        --plain-focus-color: var(--color-joka-black);

        /* ICON ONLY - PRIMARY */
        --primary-icon-border-color: var(--color-joka-black);
        --primary-icon-bg-color: var(--color-joka-black);
        --primary-icon-color: var(--color-joka-white);

        --primary-icon-hover-color: var(--color-inku-red);

        --primary-icon-active-color: var(--color-joka-black-80);

        --primary-icon-focus-color: var(--color-joka-black);

        /* ICON ONLY - SECONDARY */
        --secondary-icon-border-color: var(--color-joka-black);
        --secondary-icon-bg-color: var(--color-joka-black);
        --secondary-icon-color: var(--color-joka-black);

        --secondary-icon-hover-color: var(--color-inku-red);

        --secondary-icon-active-color: var(--color-joka-black-80);

        --secondary-icon-focus-color: var(--color-joka-black);
    }