:root {
  --4gewinnt-path: '';
  --red-chip-url: '';
  --purple-chip-url: '';
  --checkmark-url: '';

  --animation-timeout-1: 1s;
  --animation-timeout-2: 1.2s;

  
  // OTTO Brand Colors
  --otto-red: #BC001D;
  --otto-red-kampagne: #F00020;
  --otto-red-button: #DC001D;

  // mobile responsive width (for docu purposes)
  --mobile: 609.5px;

  // input colors
  --default-border: #949494;

  // Blue Colors
  --blue-90: #A5D8F5;
  --blue-70: #F0FAFF;

  // Purple Colors
  --purple-130: #6C49CF;
  --purple-130-darken-10: #5A3EAF;
  --purple-130-darken-20: #48338F;

  // Text Colors
  --text-default: #212121;

  // Basic Colors
  --white: #FFFFFF;

  // Error Colors
  --error: #BC3339;

  // Hasbro Colors
  --hasbro-blau: #173354;

  // Buttons
  --button-secondary-background-color: #E5E5E5;
  --button-secondary-background-color-hover: #D6D6D6;

  --button-primary-hover: #BD0019;

  --button-purple-hover: rgba(88, 51, 192);


  // Campaign Colors
  --campaign-primary: var(--otto-red-kampagne);
  --campaign-secondary: var(--purple-130);

  // Shadows
  --shadow-large: -10px 10px 16px rgba(0,0,0,0.4);
  --shadow-small: -4px 4px 4px rgba(0,0,0,0.4);
  --shadow-mini: -0.8px 0.8px 1.6px rgba(0,0,0,0.4);


  --oc-base-color-white: var(--oc-base-color-white-100, #ffffff);
  --oc-base-breakpoint-l: 48rem;
  --oc-base-breakpoint-m: 28rem;
  --oc-base-breakpoint-s: 22.5rem;
  --oc-base-breakpoint-xl: 62rem;
  --oc-base-breakpoint-xxl: 77rem;
  --oc-base-color-beige-100: #e9d4bf;
  --oc-base-color-beige-110: #d8bda4;
  --oc-base-color-beige-70: #fff9f0;
  --oc-base-color-beige-80: #fff5e6;
  --oc-base-color-beige-90: #f5e6d7;
  --oc-base-color-black-100: #212121;
  --oc-base-color-black-lighten-10: #3a3a3a;
  --oc-base-color-black-lighten-15: #474747;
  --oc-base-color-black-lighten-20: #545454;
  --oc-base-color-black-lighten-25: #616161;
  --oc-base-color-black-lighten-30: #6d6d6d;
  --oc-base-color-black-lighten-45: #949494;
  --oc-base-color-black-lighten-5: #2e2e2e;
  --oc-base-color-black-lighten-61: #bdbdbd;
  --oc-base-color-black-lighten-67: #cccccc;
  --oc-base-color-black-lighten-71: #d6d6d6;
  --oc-base-color-black-lighten-77: #e5e5e5;
  --oc-base-color-black-lighten-81: #f0f0f0;
  --oc-base-color-black-lighten-84: #f7f7f7;
  --oc-base-color-black-opacity-0: rgba(33, 33, 33, 0);
  --oc-base-color-black-opacity-10: rgba(33, 33, 33, .1);
  --oc-base-color-black-opacity-3: rgba(33, 33, 33, .03);
  --oc-base-color-black-opacity-40: rgba(33, 33, 33, .4);
  --oc-base-color-black-opacity-5: rgba(33, 33, 33, .05);
  --oc-base-color-black-opacity-50: rgba(33, 33, 33, .5);
  --oc-base-color-black-opacity-70: rgba(33, 33, 33, .7);
  --oc-base-color-blue-100: #6ea0eb;
  --oc-base-color-blue-110: #266bd3;
  --oc-base-color-blue-120: #2e5aae;
  --oc-base-color-blue-130: #1e5a78;
  --oc-base-color-blue-140: #14374b;
  --oc-base-color-blue-70: #f0faff;
  --oc-base-color-blue-80: #dcf0fa;
  --oc-base-color-blue-90: #c5eaff;
  --oc-base-color-corporate-color-spectrum-coral-100: #ff9196;
  --oc-base-color-corporate-color-spectrum-coral-150: #d25a5f;
  --oc-base-color-corporate-color-spectrum-coral-200: #bc3339;
  --oc-base-color-corporate-color-spectrum-coral-25: #ffe2e2;
  --oc-base-color-corporate-color-spectrum-coral-50: #ffafaf;
  --oc-base-color-corporate-color-spectrum-cozy-pink-100: #ffbef5;
  --oc-base-color-corporate-color-spectrum-cozy-pink-150: #f578cd;
  --oc-base-color-corporate-color-spectrum-cozy-pink-50: #ffd7f5;
  --oc-base-color-corporate-color-spectrum-deep-navy-100: #1e5a78;
  --oc-base-color-corporate-color-spectrum-deep-navy-150: #14374b;
  --oc-base-color-corporate-color-spectrum-deep-navy-50: #287396;
  --oc-base-color-corporate-color-spectrum-denim-100: #6ea0eb;
  --oc-base-color-corporate-color-spectrum-denim-125: #4a88e6;
  --oc-base-color-corporate-color-spectrum-denim-150: #374bc8;
  --oc-base-color-corporate-color-spectrum-denim-25: #deedff;
  --oc-base-color-corporate-color-spectrum-denim-50: #78b4ff;
  --oc-base-color-corporate-color-spectrum-natural-beige-100: #f5e6d7;
  --oc-base-color-corporate-color-spectrum-natural-beige-150: #dcbe96;
  --oc-base-color-corporate-color-spectrum-natural-beige-50: #fff5e6;
  --oc-base-color-corporate-color-spectrum-positive-green-100: #64c8b9;
  --oc-base-color-corporate-color-spectrum-positive-green-150: #00aa9b;
  --oc-base-color-corporate-color-spectrum-positive-green-175: #009b8d;
  --oc-base-color-corporate-color-spectrum-positive-green-200: #007268;
  --oc-base-color-corporate-color-spectrum-positive-green-25: #d1ede7;
  --oc-base-color-corporate-color-spectrum-positive-green-50: #b4e1d7;
  --oc-base-color-corporate-color-spectrum-sky-blue-100: #dcf0fa;
  --oc-base-color-corporate-color-spectrum-sky-blue-150: #98c9f1;
  --oc-base-color-corporate-color-spectrum-sky-blue-50: #f0faff;
  --oc-base-color-corporate-color-spectrum-sunny-yellow-100: #fffaaf;
  --oc-base-color-corporate-color-spectrum-sunny-yellow-125: #ffeb91;
  --oc-base-color-corporate-color-spectrum-sunny-yellow-150: #ffdc73;
  --oc-base-color-corporate-color-spectrum-sunny-yellow-50: #ffffcd;
  --oc-base-color-corporate-color-spectrum-warm-red-100: #8c2d4b;
  --oc-base-color-corporate-color-spectrum-warm-red-150: #6e1937;
  --oc-base-color-corporate-color-spectrum-warm-red-50: #c82864;
  --oc-base-color-error-red-100: #b30023;
  --oc-base-color-error-red-25: #ffe2e2;
  --oc-base-color-error-red-50: #f78ca1;
  --oc-base-color-error-red-75: #e7516e;
  --oc-base-color-gray-100: var(--oc-base-color-black-lighten-77);
  --oc-base-color-gray-150: var(--oc-base-color-black-lighten-67);
  --oc-base-color-gray-200: var(--oc-base-color-black-lighten-45);
  --oc-base-color-gray-25: var(--oc-base-color-black-lighten-81);
  --oc-base-color-gray-400: var(--oc-base-color-black-lighten-30);
  --oc-base-color-green-100: #a9e034;
  --oc-base-color-green-110: #8abc20;
  --oc-base-color-green-120: #6a9807;
  --oc-base-color-green-130: #5e8114;
  --oc-base-color-green-140: #456501;
  --oc-base-color-green-70: #e7ffb5;
  --oc-base-color-green-80: #dbfb98;
  --oc-base-color-green-90: #c5ef6c;
  --oc-base-color-hint-purple-100: #7d00ea;
  --oc-base-color-hint-purple-25: #f4eeff;
  --oc-base-color-hint-purple-50: #cb96fa;
  --oc-base-color-hint-purple-75: #ae69ea;
  --oc-base-color-interactive-blue-100: #256ad2;
  --oc-base-color-interactive-blue-25: #dcf2ff;
  --oc-base-color-interactive-blue-50: #b9e5ff;
  --oc-base-color-interactive-blue-75: #418ade;
  --oc-base-color-interactive-blue-darken-10: #1d54a7;
  --oc-base-color-interactive-blue-darken-15: #1a4991;
  --oc-base-color-interactive-blue-darken-20: #163e7b;
  --oc-base-color-interactive-blue-darken-5: #215fbc;
  --oc-base-color-interactive-blue-lighten-10: #4b86df;
  --oc-base-color-interactive-blue-lighten-25: #53bfff;
  --oc-base-color-interactive-blue-lighten-35: #86d2ff;
  --oc-base-color-interactive-blue-lighten-45: #b9e5ff;
  --oc-base-color-interactive-blue-lighten-55: #dcf2ff;
  --oc-base-color-mint-100: #64c8b9;
  --oc-base-color-mint-110: #099f91;
  --oc-base-color-mint-120: #028a7e;
  --oc-base-color-mint-130: #006058;
  --oc-base-color-mint-140: #194743;
  --oc-base-color-mint-70: #d1ede7;
  --oc-base-color-mint-80: #b4e1d7;
  --oc-base-color-mint-90: #7dd4c7;
  --oc-base-color-orange-100: #f8a171;
  --oc-base-color-orange-110: #eb8f5c;
  --oc-base-color-orange-120: #e77433;
  --oc-base-color-orange-130: #e95d21;
  --oc-base-color-orange-140: #bf430d;
  --oc-base-color-orange-70: #ffc5a5;
  --oc-base-color-orange-80: #ffc5a5;
  --oc-base-color-orange-90: #ffb084;
  --oc-base-color-otto-red-100: #eb001f;
  --oc-base-color-otto-red-125: var(--oc-base-color-otto-red-darken-3);
  --oc-base-color-otto-red-darken-10: #b80018;
  --oc-base-color-otto-red-darken-20: #850012;
  --oc-base-color-otto-red-darken-3: #dc001d;
  --oc-base-color-otto-red-darken-4: #dc001d;
  --oc-base-color-pink-100: #e89fdd;
  --oc-base-color-pink-110: #b060b7;
  --oc-base-color-pink-120: #93319c;
  --oc-base-color-pink-130: #801489;
  --oc-base-color-pink-140: #63056b;
  --oc-base-color-pink-70: #ffeffb;
  --oc-base-color-pink-80: #ffd7f5;
  --oc-base-color-pink-90: #ffbef5;
  --oc-base-color-purple-100: #b198db;
  --oc-base-color-purple-110: #9c7fcb;
  --oc-base-color-purple-120: #7e63ca;
  --oc-base-color-purple-130: #6c49cf;
  --oc-base-color-purple-140: #522eb7;
  --oc-base-color-purple-70: #f4eeff;
  --oc-base-color-purple-80: #e5d5fe;
  --oc-base-color-purple-90: #c5afe9;
  --oc-base-color-success-green-100: #237a44;
  --oc-base-color-success-green-25: #d3eedd;
  --oc-base-color-success-green-50: #67bd88;
  --oc-base-color-success-green-75: #419a63;
  --oc-base-color-sustainable-green-100: #7ea87b;
  --oc-base-color-sustainable-green-110: #7ea87b;
  --oc-base-color-sustainable-green-120: #658c62;
  --oc-base-color-sustainable-green-125: #63915f;
  --oc-base-color-sustainable-green-130: #50734d;
  --oc-base-color-sustainable-green-140: #3c5939;
  --oc-base-color-sustainable-green-70: #e5fbe3;
  --oc-base-color-sustainable-green-80: #bfecbb;
  --oc-base-color-sustainable-green-darken-10: #63915f;
  --oc-base-color-sustainable-green-darken-15: #588155;
  --oc-base-color-sustainable-green-darken-20: #4e724b;
  --oc-base-color-warm-red-100: #e85f80;
  --oc-base-color-warm-red-110: #de3e64;
  --oc-base-color-warm-red-120: #c82864;
  --oc-base-color-warm-red-130: #8c2d4b;
  --oc-base-color-warm-red-140: #6e1937;
  --oc-base-color-warm-red-70: #ffe2e2;
  --oc-base-color-warm-red-80: #fec5c6;
  --oc-base-color-warm-red-90: #ff9196;
  --oc-base-color-warning-orange-100: #ba4a1a;
  --oc-base-color-warning-orange-25: #fee3d3;
  --oc-base-color-warning-orange-50: #ff8e5d;
  --oc-base-color-warning-orange-75: #e95d21;
  --oc-base-color-white-100: #ffffff;
  --oc-base-color-white-opacity-0: rgba(255, 255, 255, 0);
  --oc-base-color-white-opacity-10: rgba(255, 255, 255, .1);
  --oc-base-color-white-opacity-20: rgba(255, 255, 255, .2);
  --oc-base-color-white-opacity-3: rgba(255, 255, 255, .03);
  --oc-base-color-white-opacity-5: rgba(255, 255, 255, .05);
  --oc-base-color-yellow-100: #ffdc73;
  --oc-base-color-yellow-110: #f3c640;
  --oc-base-color-yellow-120: #b4890a;
  --oc-base-color-yellow-130: #9e790d;
  --oc-base-color-yellow-140: #8d6b06;
  --oc-base-color-yellow-70: #ffffcd;
  --oc-base-color-yellow-80: #fffaaf;
  --oc-base-color-yellow-90: #ffeb91;
  --oc-base-dimension-0: 0px;
  --oc-base-dimension-12: 12px;
  --oc-base-dimension-16: 16px;
  --oc-base-dimension-2: 2px;
  --oc-base-dimension-24: 24px;
  --oc-base-dimension-32: 32px;
  --oc-base-dimension-4: 4px;
  --oc-base-dimension-40: 40px;
  --oc-base-dimension-48: 48px;
  --oc-base-dimension-56: 56px;
  --oc-base-dimension-64: 64px;
  --oc-base-dimension-72: 72px;
  --oc-base-dimension-8: 8px;
  --oc-base-dimension-80: 80px;
  --oc-base-dimension-relative-0: 0rem;
  --oc-base-dimension-relative-12: .75rem;
  --oc-base-dimension-relative-16: 1rem;
  --oc-base-dimension-relative-2: .125rem;
  --oc-base-dimension-relative-24: 1.5rem;
  --oc-base-dimension-relative-32: 2rem;
  --oc-base-dimension-relative-4: .25rem;
  --oc-base-dimension-relative-40: 2.5rem;
  --oc-base-dimension-relative-48: 3rem;
  --oc-base-dimension-relative-56: 3.5rem;
  --oc-base-dimension-relative-64: 4rem;
  --oc-base-dimension-relative-72: 4.5rem;
  --oc-base-dimension-relative-8: .5rem;
  --oc-base-dimension-relative-80: 5rem;
  --oc-base-font-line-height-100: 1rem;
  --oc-base-font-line-height-125: 1.25rem;
  --oc-base-font-line-height-150: 1.5rem;
  --oc-base-font-line-height-175: 1.75rem;
  --oc-base-font-line-height-200: 2rem;
  --oc-base-font-line-height-225: 2.25rem;
  --oc-base-font-line-height-300: 3rem;
  --oc-base-font-line-height-450: 4.5rem;
  --oc-base-font-line-height-75: .75rem;
  --oc-base-font-otto-play: "OTTOPlay", serif;
  --oc-base-font-otto-sans: "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-base-font-size-100: 1rem;
  --oc-base-font-size-125: 1.25rem;
  --oc-base-font-size-150: 1.5rem;
  --oc-base-font-size-175: 1.75rem;
  --oc-base-font-size-200: 2rem;
  --oc-base-font-size-300: 3rem;
  --oc-base-font-size-62: .625rem;
  --oc-base-font-size-75: .75rem;
  --oc-base-font-size-87: .875rem;
  --oc-base-font-weight-black: 800;
  --oc-base-font-weight-bold: 700;
  --oc-base-font-weight-regular: 400;
  --oc-base-shadow-0: unset;
  --oc-base-shadow-100: drop-shadow(0px 1px 1px rgba(0, 0, 0, .25)) drop-shadow(0px 1px 3px rgba(0, 0, 0, .07));
  --oc-base-shadow-200: drop-shadow(0px 1px 2px rgba(0, 0, 0, .25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, .1));
  --oc-base-shadow-300: drop-shadow(0px 3px 5px rgba(0, 0, 0, .3)) drop-shadow(0px 9px 10px rgba(0, 0, 0, .1));
  --oc-semantic-border-radius-0: var(--oc-base-dimension-relative-0);
  --oc-semantic-border-radius-100: var(--oc-base-dimension-relative-8);
  --oc-semantic-border-radius-150: var(--oc-base-dimension-relative-12);
  --oc-semantic-border-radius-200: var(--oc-base-dimension-relative-16);
  --oc-semantic-border-radius-25: var(--oc-base-dimension-relative-2);
  --oc-semantic-border-radius-300: var(--oc-base-dimension-relative-24);
  --oc-semantic-border-radius-50: var(--oc-base-dimension-relative-4);
  --oc-semantic-border-width-0: 0px;
  --oc-semantic-border-width-100: 1px;
  --oc-semantic-border-width-200: 2px;
  --oc-semantic-border-width-400: 4px;
  --oc-semantic-color-above-background: var(--oc-base-color-white-100);
  --oc-semantic-color-background-block-beige: var(--oc-base-color-beige-90);
  --oc-semantic-color-background-block-blue: var(--oc-base-color-blue-90);
  --oc-semantic-color-background-block-green: var(--oc-base-color-green-80);
  --oc-semantic-color-background-block-mint: var(--oc-base-color-mint-80);
  --oc-semantic-color-background-block-orange: var(--oc-base-color-orange-80);
  --oc-semantic-color-background-block-pink: var(--oc-base-color-pink-80);
  --oc-semantic-color-background-block-purple: var(--oc-base-color-purple-80);
  --oc-semantic-color-background-block-warm-red: var(--oc-base-color-warm-red-80);
  --oc-semantic-color-background-block-yellow: var(--oc-base-color-yellow-80);
  --oc-semantic-color-background-card-blue: var(--oc-base-color-blue-130);
  --oc-semantic-color-background-card-green: var(--oc-base-color-green-130);
  --oc-semantic-color-background-card-mint: var(--oc-base-color-mint-130);
  --oc-semantic-color-background-card-orange: var(--oc-base-color-orange-130);
  --oc-semantic-color-background-card-pink: var(--oc-base-color-pink-130);
  --oc-semantic-color-background-card-purple: var(--oc-base-color-purple-130);
  --oc-semantic-color-background-card-warm-red: var(--oc-base-color-warm-red-130);
  --oc-semantic-color-background-card-yellow: var(--oc-base-color-yellow-130);
  --oc-semantic-color-brand: var(--oc-base-color-otto-red-100);
  --oc-semantic-color-canvas-background: var(--oc-base-color-white-100);
  --oc-semantic-color-disabled-background: var(--oc-base-color-gray-100);
  --oc-semantic-color-disabled-border: var(--oc-base-color-gray-150);
  --oc-semantic-color-disabled-overlay: rgba(214, 214, 214, .64);
  --oc-semantic-color-disabled-text: var(--oc-base-color-gray-200);
  --oc-semantic-color-divider: var(--oc-base-color-black-opacity-10);
  --oc-semantic-color-error-100: var(--oc-base-color-corporate-color-spectrum-coral-200);
  --oc-semantic-color-error-25: var(--oc-base-color-corporate-color-spectrum-coral-25);
  --oc-semantic-color-error-50: var(--oc-base-color-corporate-color-spectrum-coral-100);
  --oc-semantic-color-error-75: var(--oc-base-color-corporate-color-spectrum-coral-150);
  --oc-semantic-color-frame-background: var(--oc-base-color-gray-25);
  --oc-semantic-color-hint-100: var(--oc-base-color-corporate-color-spectrum-denim-150);
  --oc-semantic-color-hint-25: var(--oc-base-color-corporate-color-spectrum-denim-25);
  --oc-semantic-color-hint-50: var(--oc-base-color-corporate-color-spectrum-denim-50);
  --oc-semantic-color-hint-75: var(--oc-base-color-corporate-color-spectrum-denim-125);
  --oc-semantic-color-inverted-background: var(--oc-base-color-black-100);
  --oc-semantic-color-overlay-active: var(--oc-base-color-black-opacity-10);
  --oc-semantic-color-overlay-default: var(--oc-base-color-black-opacity-0);
  --oc-semantic-color-overlay-hover: var(--oc-base-color-black-opacity-3);
  --oc-semantic-color-primary-background: var(--oc-base-color-otto-red-125);
  --oc-semantic-color-sale-background: var(--oc-base-color-otto-red-125);
  --oc-semantic-color-scrim: var(--oc-base-color-black-opacity-40);
  --oc-semantic-color-stacked-background: var(--oc-base-color-gray-25);
  --oc-semantic-color-sticky-background: var(--oc-base-color-white-100);
  --oc-semantic-color-success-100: var(--oc-base-color-corporate-color-spectrum-positive-green-200);
  --oc-semantic-color-success-25: var(--oc-base-color-corporate-color-spectrum-positive-green-25);
  --oc-semantic-color-success-50: var(--oc-base-color-corporate-color-spectrum-positive-green-100);
  --oc-semantic-color-success-75: var(--oc-base-color-corporate-color-spectrum-positive-green-175);
  --oc-semantic-color-sustainable-100: var(--oc-base-color-sustainable-green-darken-20);
  --oc-semantic-color-sustainable-75: var(--oc-base-color-sustainable-green-120);
  --oc-semantic-color-text-brand: var(--oc-base-color-otto-red-100);
  --oc-semantic-color-text-default: var(--oc-base-color-black-100);
  --oc-semantic-color-text-interactive: var(--oc-base-color-interactive-blue-100);
  --oc-semantic-color-text-inverted: var(--oc-base-color-white-100);
  --oc-semantic-color-text-sale: var(--oc-base-color-otto-red-125);
  --oc-semantic-color-text-secondary: var(--oc-base-color-gray-400);
  --oc-semantic-color-warning-25: var(--oc-base-color-corporate-color-spectrum-sunny-yellow-100);
  --oc-semantic-color-warning-50: var(--oc-base-color-corporate-color-spectrum-sunny-yellow-150);
  --oc-semantic-focus-outline-color: var(--oc-base-color-interactive-blue-lighten-10);
  --oc-semantic-focus-outline-offset: var(--oc-semantic-spacing-12);
  --oc-semantic-focus-outline-radius-100: calc(.5rem + 2px);
  --oc-semantic-focus-outline-radius-12: calc(0rem + 2px);
  --oc-semantic-focus-outline-radius-150: calc(.75rem + 2px);
  --oc-semantic-focus-outline-radius-200: calc(1rem + 2px);
  --oc-semantic-focus-outline-radius-25: calc(.125rem + 2px);
  --oc-semantic-focus-outline-radius-50: calc(.25rem + 2px);
  --oc-semantic-focus-outline-style: solid;
  --oc-semantic-focus-outline-width: var(--oc-semantic-border-width-200);
  --oc-semantic-font-copy-100: 400 .875rem / 1.5rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-copy-125: 400 1rem / 1.5rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-copy-50: 400 .625rem / 1rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-copy-75: 400 .75rem / 1rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-copy-font-family: var(--oc-base-font-otto-sans);
  --oc-semantic-font-copy-font-weight: var(--oc-base-font-weight-regular);
  --oc-semantic-font-display-100: 800 2rem / 3rem "OTTOPlay", serif;
  --oc-semantic-font-display-200: 800 3rem / 4.5rem "OTTOPlay", serif;
  --oc-semantic-font-display-font-family: var(--oc-base-font-otto-play);
  --oc-semantic-font-display-font-weight: var(--oc-base-font-weight-black);
  --oc-semantic-font-headline-10: 700 .625rem / .75rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-100: 700 1rem / 1.5rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-200: 700 1.25rem / 1.75rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-25: 700 .75rem / 1rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-300: 700 1.5rem / 2rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-400: 700 1.75rem / 2.25rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-50: 700 .875rem / 1.25rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-font-family: var(--oc-base-font-otto-sans);
  --oc-semantic-font-headline-font-weight: var(--oc-base-font-weight-bold);
  --oc-semantic-font-row-headline-100-default-color: var(--oc-semantic-color-text-secondary);
  --oc-semantic-font-row-headline-100-font-family: var(--oc-base-font-otto-sans);
  --oc-semantic-font-row-headline-100-font-size: var(--oc-base-font-size-75);
  --oc-semantic-font-row-headline-100-font-weight: var(--oc-base-font-weight-regular);
  --oc-semantic-font-row-headline-100-line-height: var(--oc-base-font-line-height-100);
  --oc-semantic-font-row-headline-100-text-transform: uppercase;
  --oc-semantic-shadow-above: var(--oc-base-shadow-200);
  --oc-semantic-shadow-canvas: var(--oc-base-shadow-0);
  --oc-semantic-shadow-stacked: var(--oc-base-shadow-0);
  --oc-semantic-shadow-sticky: var(--oc-base-shadow-300);
  --oc-semantic-spacing-0: var(--oc-base-dimension-0);
  --oc-semantic-spacing-100: var(--oc-base-dimension-16);
  --oc-semantic-spacing-12: var(--oc-base-dimension-2);
  --oc-semantic-spacing-150: var(--oc-base-dimension-24);
  --oc-semantic-spacing-200: var(--oc-base-dimension-32);
  --oc-semantic-spacing-25: var(--oc-base-dimension-4);
  --oc-semantic-spacing-250: var(--oc-base-dimension-40);
  --oc-semantic-spacing-50: var(--oc-base-dimension-8);
  --oc-semantic-spacing-75: var(--oc-base-dimension-12);
  --oc-semantic-spacing-cinema-gap: var(--oc-semantic-spacing-100);
  --oc-semantic-spacing-content-layout-gap: var(--oc-semantic-spacing-100);
  --oc-semantic-spacing-content-layout-outer: var(--oc-semantic-spacing-100);
  --oc-semantic-spacing-default-between-blocks: var(--oc-semantic-spacing-25);
  --oc-semantic-spacing-form-checkbox-radio-button-horizontal: var(--oc-base-dimension-24);
  --oc-semantic-spacing-form-checkbox-radio-button-vertical: var(--oc-base-dimension-24);
  --oc-semantic-spacing-form-hint-vertical: var(--oc-base-dimension-4);
  --oc-semantic-spacing-form-horizontal: var(--oc-base-dimension-8);
  --oc-semantic-spacing-form-vertical: var(--oc-base-dimension-24);
  --oc-semantic-spacing-page-layout-gap: var(--oc-semantic-spacing-25);
  --oc-semantic-spacing-page-layout-outer: var(--oc-semantic-spacing-0);
  --oc-semantic-spacing-relative-0: var(--oc-base-dimension-relative-0);
  --oc-semantic-spacing-relative-100: var(--oc-base-dimension-relative-16);
  --oc-semantic-spacing-relative-12: var(--oc-base-dimension-relative-2);
  --oc-semantic-spacing-relative-150: var(--oc-base-dimension-relative-24);
  --oc-semantic-spacing-relative-200: var(--oc-base-dimension-relative-32);
  --oc-semantic-spacing-relative-25: var(--oc-base-dimension-relative-4);
  --oc-semantic-spacing-relative-250: var(--oc-base-dimension-relative-40);
  --oc-semantic-spacing-relative-50: var(--oc-base-dimension-relative-8);
  --oc-semantic-spacing-relative-75: var(--oc-base-dimension-relative-12);
  --oc-component-banner-info-background-color: var(--oc-semantic-color-disabled-background);
  --oc-component-button-50-spacing-y: var(--oc-semantic-spacing-25);
  --oc-component-button-secondary-background-color: var(--oc-base-color-gray-100);
  --oc-component-button-secondary-background-color-active: var(--oc-base-color-black-lighten-67);
  --oc-component-button-secondary-background-color-hover: var(--oc-base-color-black-lighten-71);
  --oc-component-button-success-background-color-active: #88d0c1;
  --oc-component-button-success-background-color-hover: #acdfd4;
  --oc-component-button-tertiary-background-color: var(--oc-base-color-black-opacity-0);
  --oc-component-button-tertiary-background-color-active: var(--oc-base-color-black-opacity-10);
  --oc-component-button-tertiary-background-color-hover: var(--oc-base-color-black-opacity-5);
  --oc-component-chip-default-background-color-active: var(--oc-base-color-black-lighten-61);
  --oc-component-chip-default-background-color-hover: var(--oc-base-color-black-lighten-71);
  --oc-component-chip-inverted-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-chip-inverted-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-chip-selected-background-color: var(--oc-base-color-interactive-blue-50);
  --oc-component-chip-selected-background-color-active: var(--oc-base-color-interactive-blue-lighten-25);
  --oc-component-chip-selected-background-color-hover: var(--oc-base-color-interactive-blue-lighten-35);
  --oc-component-expander-fade-color: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 50%, #fff 100%);
  --oc-component-expander-fade-stop-0: rgba(255, 255, 255, 0);
  --oc-component-expander-fade-stop-100: #ffffff;
  --oc-component-expander-fade-stop-50: rgba(255, 255, 255, .75);
  --oc-component-form-checkbox-icon-size: var(--oc-base-dimension-relative-16);
  --oc-component-form-default-border-color: var(--oc-base-color-gray-200);
  --oc-component-form-default-border-color-focus: var(--oc-base-color-black-100);
  --oc-component-form-warning-icon-color: var(--oc-semantic-color-text-secondary);
  --oc-component-icon-button-default-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-icon-button-default-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-icon-button-elevation-level-100-background-color: var(--oc-semantic-color-canvas-background);
  --oc-component-icon-button-elevation-level-100-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-icon-button-elevation-level-100-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-icon-button-elevation-level-200-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-icon-button-elevation-level-200-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-icon-button-elevation-level-300-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-icon-button-elevation-level-300-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-icon-button-inverted-background-color: rgba(255, 255, 255, 0);
  --oc-component-icon-button-inverted-background-color-active: rgba(255, 255, 255, .1);
  --oc-component-icon-button-inverted-background-color-hover: rgba(255, 255, 255, .03);
  --oc-component-link-primary-text-color-active: var(--oc-base-color-interactive-blue-darken-20);
  --oc-component-link-primary-text-color-hover: var(--oc-base-color-interactive-blue-darken-10);
  --oc-component-link-secondary-text-color-active: var(--oc-base-color-black-lighten-10);
  --oc-component-link-secondary-text-color-hover: var(--oc-base-color-black-lighten-20);
  --oc-component-pagination-dot-active: var(--oc-base-color-black-lighten-30);
  --oc-component-pagination-dot-default: var(--oc-base-color-gray-150);
  --oc-component-pagination-dot-selected: var(--oc-base-color-black-100);
  --oc-component-progress-bar-50-height: var(--oc-base-dimension-4);
  --oc-component-row-background-color: var(--oc-base-color-white-opacity-0);
  --oc-component-row-background-color-selected: var(--oc-base-color-interactive-blue-lighten-55);
  --oc-component-row-background-color-selected-active: var(--oc-base-color-interactive-blue-lighten-35);
  --oc-component-row-background-color-selected-hover: var(--oc-base-color-interactive-blue-lighten-45);
  --oc-component-search-field-border-color-focused: var(--oc-base-color-black-100);
  --oc-component-search-field-border-color-hover: var(--oc-base-color-gray-200);
  --oc-component-selection-tile-border-color-active: var(--oc-base-color-black-lighten-20);
  --oc-component-selection-tile-border-color-hover: var(--oc-base-color-gray-200);
  --oc-component-selection-tile-border-color-selected: var(--oc-base-color-black-100);
  --oc-component-selection-tile-border-color-selected-active: var(--oc-base-color-black-lighten-30);
  --oc-component-selection-tile-border-color-selected-hover: var(--oc-base-color-black-lighten-30);
  --oc-component-selection-tile-inner-border-color-selected: var(--oc-base-color-white-100);
  --oc-component-selection-tile-strike-through-outline-color: rgba(255, 255, 255, .9);
  --oc-component-sheet-action-bar-background-color: var(--oc-semantic-color-canvas-background);
  --oc-component-sheet-action-bar-conditional-border-top-color: var(--oc-semantic-color-frame-background);
  --oc-component-sheet-drag-indicator-color: var(--oc-base-color-black-opacity-40);
  --oc-component-sheet-header-background-color: var(--oc-semantic-color-canvas-background);
  --oc-component-sheet-header-conditional-border-bottom-color: var(--oc-semantic-color-frame-background);
  --oc-component-skeleton-background-color: var(--oc-base-color-gray-100);
  --oc-component-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%);
  --oc-component-skeleton-wave-stop-0: rgba(255, 255, 255, 0);
  --oc-component-skeleton-wave-stop-100: rgba(255, 255, 255, 0);
  --oc-component-skeleton-wave-stop-50: rgba(254, 254, 254, .5);
  --oc-component-snackbar-border-radius: var(--oc-semantic-border-radius-50);
  --oc-component-snackbar-shadow: var(--oc-semantic-shadow-sticky);
  --oc-component-spinner-default-fill-color: var(--oc-base-color-gray-400);
  --oc-component-spinner-inverted-fill-color: var(--oc-base-color-white-100);
  --oc-component-switch-checked-background-color-active: var(--oc-base-color-corporate-color-spectrum-positive-green-200);
  --oc-component-switch-checked-background-color-hover: #008176;
  --oc-component-switch-default-background-color: var(--oc-base-color-gray-200);
  --oc-component-switch-default-background-color-active: var(--oc-base-color-black-lighten-20);
  --oc-component-tab-item-background-color-active: var(--oc-base-color-black-opacity-10);
  --oc-component-tab-item-background-color-hover: var(--oc-base-color-black-opacity-3);
  --oc-component-tag-info-secondary-background-color: var(--oc-base-color-gray-100);
  --oc-component-toggletip-shadow: var(--oc-semantic-shadow-above);
}

html {
  min-height  : 100vH;
  width: 100vW;
  overflow: hidden;
  overflow-y:auto;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing: antialiased;
}

body{
  height:100vH;
  position: relative;
  font-size: 15px;
  margin: 0;

  font-family: 'OTTO Sans', sans-serif;

  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: none;

  div, img, p, h1, h2, span {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
}

fieldset {
  border: none;
  outline: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.p_form__label {
  text-align:left;
}

.button {
  align-items: center;
  border-radius: var(--oc-semantic-border-radius-100);
  border: none;
  box-sizing: border-box;
  display: inline-flex;
  font: var(--oc-semantic-font-copy-125);
  font-weight: var(--oc-base-font-weight-bold);
  justify-content: center;
  margin: 0;
  outline: none;
  outline-offset: 0;
  padding: var(--oc-semantic-spacing-75) var(--oc-semantic-spacing-100);
  position: relative;
  -webkit-text-decoration: none;
  text-decoration: none;
  width: 100%;
}

.button--has-icon-left,
.button--has-icon-right {
  padding: var(--oc-semantic-spacing-75) var(--oc-semantic-spacing-75);
}

.button--has-icon-left>span,
.button--has-icon-right>span {
  padding: 0 calc(var(--oc-base-dimension-relative-24) + var(--oc-semantic-spacing-75));
}

.button--fit-content {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.button--fit-content.button--has-icon-left>span {
  padding: 0 var(--oc-semantic-spacing-75) 0 calc(var(--oc-base-dimension-relative-24) + var(--oc-semantic-spacing-75));
}

.button--fit-content.button--has-icon-right>span {
  padding: 0 calc(var(--oc-base-dimension-relative-24) + var(--oc-semantic-spacing-75)) 0 var(--oc-semantic-spacing-75);
}

.button--fit-content.button--has-icon-left.button--has-icon-right>span {
  padding: 0 calc(var(--oc-base-dimension-relative-24) + var(--oc-semantic-spacing-75));
}

.button>.button__icon {
  pointer-events: none;
  height: var(--oc-base-dimension-relative-24);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--oc-base-dimension-relative-24);
}

.button>.button__icon--left {
  left: var(--oc-semantic-spacing-75);
}

.button>.button__icon--right {
  left: auto;
  right: var(--oc-semantic-spacing-75);
}

.button>span {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.button--variant-primary {
  background-color: var(--oc-semantic-color-primary-background);
  color: var(--oc-base-color-white-100);
}

.button--variant-primary>.button__icon {
  --color: var(--oc-base-color-white-100);
}

@media (hover: hover) {
  .button--variant-primary:not(.button--is-loading):hover:not(:disabled):not(.button--disabled) {
    background-color: var(--oc-base-color-otto-red-darken-10);
    cursor: pointer;
  }
}

.button--variant-primary:not(.button--is-loading):active:not(:disabled):not(.button--disabled) {
  background-color: var(--oc-base-color-otto-red-darken-20);
  cursor: pointer;
}

.button--variant-secondary {
  background-color: var(--oc-component-button-secondary-background-color);
  color: var(--oc-semantic-color-text-default);
  font: var(--oc-semantic-font-copy-125);
}

.button--variant-secondary>.button__icon {
  --color: var(--oc-semantic-color-text-default);
}

@media (hover: hover) {
  .button--variant-secondary:not(.button--is-loading):hover:not(:disabled):not(.button--disabled) {
    background-color: var(--oc-component-button-secondary-background-color-hover);
    cursor: pointer;
  }
}

.button--variant-secondary:not(.button--is-loading):active:not(:disabled):not(.button--disabled) {
  background-color: var(--oc-component-button-secondary-background-color-active);
  cursor: pointer;
}

.button--variant-tertiary {
  background-color: var(--oc-component-button-tertiary-background-color);
  color: var(--oc-semantic-color-text-interactive);
  font: var(--oc-semantic-font-copy-125);
}

.button--variant-tertiary>.button__icon {
  --color: var(--oc-semantic-color-text-interactive);
}

@media (hover: hover) {
  .button--variant-tertiary:not(.button--is-loading):hover:not(:disabled):not(.button--disabled) {
    background-color: var(--oc-component-button-tertiary-background-color-hover);
    cursor: pointer;
  }
}

.button--variant-tertiary:not(.button--is-loading):active:not(:disabled):not(.button--disabled) {
  background-color: var(--oc-component-button-tertiary-background-color-active);
  cursor: pointer;
}

.button:disabled,
.button.button--disabled {
  background-color: var(--oc-semantic-color-disabled-background);
  color: var(--oc-semantic-color-disabled-text);
  font: var(--oc-semantic-font-copy-125);
}

.button:disabled>.button__icon,
.button.button--disabled>.button__icon {
  --color: var(--oc-semantic-color-disabled-text);
}

.button.button--success,
.button.button--success.button--disabled,
.button.button--success:disabled {
  background-color: var(--oc-semantic-color-success-25);
  color: var(--oc-semantic-color-success-100);
  font-weight: var(--oc-base-font-weight-bold);
}

.button.button--success>.button__icon,
.button.button--success.button--disabled>.button__icon,
.button.button--success:disabled>.button__icon {
  --color: var(--oc-semantic-color-success-100);
}

@media (hover: hover) {

  .button.button--success:not(.button--is-loading):hover:not(:disabled):not(.button--disabled),
  .button.button--success.button--disabled:not(.button--is-loading):hover:not(:disabled):not(.button--disabled),
  .button.button--success:disabled:not(.button--is-loading):hover:not(:disabled):not(.button--disabled) {
    background-color: var(--oc-component-button-success-background-color-hover);
    cursor: pointer;
  }
}

.button.button--success:not(.button--is-loading):active:not(:disabled):not(.button--disabled),
.button.button--success.button--disabled:not(.button--is-loading):active:not(:disabled):not(.button--disabled),
.button.button--success:disabled:not(.button--is-loading):active:not(:disabled):not(.button--disabled) {
  background-color: var(--oc-component-button-success-background-color-active);
  cursor: pointer;
}

.button--size-50 {
  border-radius: var(--oc-semantic-border-radius-100);
  padding: var(--oc-component-button-50-spacing-y) var(--oc-semantic-spacing-100);
}

.button--size-50.button--has-icon-left {
  padding-top: var(--oc-component-button-50-spacing-y);
  padding-right: var(--oc-semantic-spacing-100);
  padding-bottom: var(--oc-component-button-50-spacing-y);
  padding-left: calc(var(--oc-semantic-spacing-100) / 2);
}

.button--size-50.button--has-icon-left>span {
  padding: 0 0 0 calc(var(--oc-base-dimension-relative-12) + var(--oc-semantic-spacing-50));
}

.button--size-50.button--has-icon-right {
  padding-top: var(--oc-component-button-50-spacing-y);
  padding-right: calc(var(--oc-semantic-spacing-100) / 2);
  padding-bottom: var(--oc-component-button-50-spacing-y);
  padding-left: var(--oc-semantic-spacing-100);
}

.button--size-50.button--has-icon-right>span {
  padding: 0 calc(var(--oc-base-dimension-relative-12) + var(--oc-semantic-spacing-50)) 0 0;
}

.button--size-50.button--has-icon-left.button--has-icon-right {
  padding: var(--oc-component-button-50-spacing-y) calc(var(--oc-semantic-spacing-100) / 2);
}

.button--size-50.button--has-icon-left.button--has-icon-right>span {
  padding: 0 calc(var(--oc-base-dimension-relative-12) + var(--oc-semantic-spacing-50));
}

.button--size-50.button--has-icon-left:not(.button--fit-content),
.button--size-50.button--has-icon-right:not(.button--fit-content) {
  padding: var(--oc-component-button-50-spacing-y) calc(var(--oc-semantic-spacing-100) / 2);
}

.button--size-50.button--has-icon-left:not(.button--fit-content) span,
.button--size-50.button--has-icon-right:not(.button--fit-content) span {
  padding: 0 calc(var(--oc-base-dimension-relative-12) + var(--oc-semantic-spacing-50));
}

.button--size-50>.button__icon {
  height: var(--oc-base-dimension-relative-12);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--oc-base-dimension-relative-12);
}

.button--size-50>.button__icon--left {
  left: var(--oc-semantic-spacing-50);
}

.button--size-50>.button__icon--right {
  left: auto;
  right: var(--oc-semantic-spacing-50);
}

.button--size-50.button--variant-primary {
  font: var(--oc-semantic-font-copy-100);
  font-weight: var(--oc-base-font-weight-bold);
}

.button--size-50.button--variant-secondary {
  font: var(--oc-semantic-font-copy-100);
}

.button--size-50.button--variant-tertiary {
  font: var(--oc-semantic-font-copy-100);
}

.button--size-50:disabled,
.button--size-50.button--disabled {
  font: var(--oc-semantic-font-copy-100);
}

.button--size-50.button--success,
.button--size-50.button--success.button--disabled,
.button--size-50.button--success:disabled {
  background-color: var(--oc-semantic-color-success-25);
  color: var(--oc-semantic-color-success-100);
  font-weight: var(--oc-base-font-weight-bold);
}

.button--size-50.button--success>.button__icon,
.button--size-50.button--success.button--disabled>.button__icon,
.button--size-50.button--success:disabled>.button__icon {
  --color: var(--oc-semantic-color-success-100);
}

@media (hover: hover) {

  .button--size-50.button--success:not(.button--is-loading):hover:not(:disabled):not(.button--disabled),
  .button--size-50.button--success.button--disabled:not(.button--is-loading):hover:not(:disabled):not(.button--disabled),
  .button--size-50.button--success:disabled:not(.button--is-loading):hover:not(:disabled):not(.button--disabled) {
    background-color: var(--oc-component-button-success-background-color-hover);
    cursor: pointer;
  }
}

.button--size-50.button--success:not(.button--is-loading):active:not(:disabled):not(.button--disabled),
.button--size-50.button--success.button--disabled:not(.button--is-loading):active:not(:disabled):not(.button--disabled),
.button--size-50.button--success:disabled:not(.button--is-loading):active:not(:disabled):not(.button--disabled) {
  background-color: var(--oc-component-button-success-background-color-active);
  cursor: pointer;
}

.button--is-loading {
  cursor: progress;
}

.tooltip--fit-content {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.button--variant-purple {
  background-color: var(--purple-130);
  color: var(--oc-base-color-white-100);
}

@media (hover: hover) {
  .button--variant-purple:not(.button--is-loading):hover:not(:disabled):not(.button--disabled) {
    background-color: var(--purple-130-darken-10);
    cursor: pointer;
  }
}

.button--variant-purple:not(.button--is-loading):active:not(:disabled):not(.button--disabled) {
  background-color: var(--purple-130-darken-20);
  cursor: pointer;
}

.condition-link {
  color: var(--text-default) !important;
}

.sr-only {
  position: absolute !important;
  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;
}

.button-purple{
  cursor: pointer;
  text-align: center;
  color: white;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  background-color: var(--purple-130);
  border: transparent;
  border-radius: 8px;
}

.button-purple:hover {
  background-color: var(--button-purple-hover);
}