:root {
  --black: #1e282d;
  --blackTransparent: rgba(30, 40, 45, 0.8);
  --white: #ffffff;
  --whiteTransparent: rgba(255, 255, 255, 0.8);
  --lighterGray: #faf9f5;
  --lightGray: #f4f4f4;
  --gray: #e7e6e2;
  --menuBorder: #4b5357;
  --darkGray: #5e5c58;
  --blue: #39a5db;
  --lightBlue: #8ec1db;
  --linkColor: #3d64a3;
  --pink: #CD006E;
  --pinkText: #CD006E;
  --red: red;
  --lightRed: #ffe4e7;
  --yellow: #f5ce50;
  --lightYellow: #f5ecce;
  --fieldGray: #dfdfdf;
  --green: #08cb08;
  --lightGreen: #def8cc;
  --brownOnYellow: #40340d;
  --boxShadow: rgba(0, 0, 0, 0.3);

  /* variables prefixed --cetera are external and set  inside _publication-style.html.erb */
  --publication-color-fallback: var(--black);
  --publication-color-inverted-fallback: var(--white);

  --background-color: var(
    --cetera-background-color,
    var(--lightGray)
  );
  --header-background-color: var(
    --cetera-publication-header-background-color,
    var(--white)
  );
  --header-border-color: var(
    --cetera-publication-header-border-color,
    var(--black)
  );
  --publication-color: var(
    --cetera-publication-color,
    var(--publication-color-fallback)
  );
  --publication-color-inverted: var(
    --cetera-publication-color-inverted,
    var(--publication-color-inverted-fallback)
  );

}
    div.svelte-1kp4q51 {
        overflow: hidden;
        position: relative;
        background: var(--white);
        display: block;
        margin-bottom: 0;
        font-size: 16px;
        font-weight: bold;
        line-height: 1;
        text-align: center;
        width: 100%;
        max-width: 360px;
        box-sizing: border-box;
        cursor: pointer;
    }
    @media screen and (max-width: 500px) {
      div.svelte-1kp4q51 {
        max-width: 100%;
      }
    }
    div.svelte-1kp4q51 :where(.svelte-1kp4q51):focus-within {
        text-decoration: underline;
    }
    div.svelte-1kp4q51 button:where(.svelte-1kp4q51), div.svelte-1kp4q51 a:where(.svelte-1kp4q51) {
        color: var(--black);
        box-sizing: border-box;
        cursor: pointer;
        border: 3px solid var(--black);
        background: transparent;
        display: inline-block;
        padding: 13px 13px;
        width: 100%;
        position: relative;
        z-index: 2;
        line-height: 1;
        font-weight: 700;
        text-decoration: none;
        height: 100%;
    }
    div.svelte-1kp4q51 button:where(.svelte-1kp4q51):disabled, div.svelte-1kp4q51 a:where(.svelte-1kp4q51):disabled {
        filter: opacity(0.2);
        cursor: not-allowed;
    }
    div.svelte-1kp4q51.prio {
        background: var(--black);
        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
        border: 0 none;
    }
    div.svelte-1kp4q51 .button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    div.borderless.svelte-1kp4q51 {
        background: var(--lightGray);
    }
    div.borderless.prio.svelte-1kp4q51 {
      background: var(--black);
    }
    div.borderless.svelte-1kp4q51 button:where(.svelte-1kp4q51), div.borderless.svelte-1kp4q51 a:where(.svelte-1kp4q51) {
        border: 0;
        background: none;
        padding: 7px;
    }
    div.svelte-1kp4q51 .ripple {
        background: var(--black);
        border-radius: 100%;
        position: absolute;
        z-index: 1;
        transform: scale(0);
        animation: svelte-1kp4q51-aid-ripple 1000ms;
        opacity: 0.75;
    }
    @keyframes svelte-1kp4q51-aid-ripple {
        to {
            opacity: 0;
            transform: scale(1);
        }
    }
    div.svelte-1kp4q51.prio .ripple {
        background: var(--white);
    }
    div.prio.svelte-1kp4q51 button:where(.svelte-1kp4q51):hover, div.prio.svelte-1kp4q51 a:where(.svelte-1kp4q51):hover {
        color: var(--white);
    }
    div.svelte-1kp4q51 button:where(.svelte-1kp4q51):hover, div.svelte-1kp4q51 a:where(.svelte-1kp4q51):hover {
        color: var(--black);
    }
    div.prio.svelte-1kp4q51 button:where(.svelte-1kp4q51), div.prio.svelte-1kp4q51 a:where(.svelte-1kp4q51) {
        color: var(--white);
    }