* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: 'BlickVariable';
  src: url('https://utils.blick.ch/static/fonts/Blick/BlickVariable.woff2') format('woff2');
  font-display: swap;
  font-weight: 1 999; 
}
@font-face {
  font-family: 'InterVariable';
  src: url('https://utils.blick.ch/static/fonts/Inter/InterVariable.woff2') format('woff2');
  font-display: swap;
  font-weight: 1 999; 
  font-style: normal;
}
@font-face {
  font-family: 'InterVariable';
  src: url('https://utils.blick.ch/static/fonts/Inter/InterVariable-Italic.woff2') format('woff2');
  font-display: swap;
  font-weight: 1 999; 
  font-style: italic;
}

:root {
  --color-blickred: #e20000;
  --color-blickdarkred: #a70000;
  --color-blickred-100: #170400;
  --color-blicksport: #62A01A;
  --color-white: #ffffff;
  --color-grey10: #F8F8F8;
  --color-grey20: #EEEEEE;
  --color-grey40: #CDCDCD;
  --color-grey50: #BBBBBB;
  --color-grey60: #A1A1A1;
  --color-grey70: #838383;
  --color-grey80: #5C5C5C;
  --color-grey90: #494949;
  --color-grey100: #202020;
  --color-black: #111111;
  --color-success: #29CC49;
  --color-success-dark: #508216;
  --color-textcolor: #ffffff;
  --color-headertextcolor: var(--color-blickred);
  --color-theme-main: var(--color-blickred);

  --gap-size: 24px;
  --shadow-size: 16px;
}

body {
  padding-bottom: var(--shadow-size);
}

#wrapper {
  position: relative;
  background: var(--color-white);
  border: 4px solid var(--color-theme-main);
  border-width: 4px 0 0 4px;
  overflow: hidden;
  padding: 16px 16px 24px;
  margin: 0 var(--shadow-size) var(--shadow-size) 0;
  box-shadow: var(--shadow-size) var(--shadow-size) var(--color-theme-main);

  font-family: 'InterVariable', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-size)
}

.nl-intro {
  font-size: 16px;
  line-height: 1.5;
}

.nl-name {
  color: var(--color-black);
  font-size: 22px;
  font-family: "BlickVariable", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
}

.nl-name span {
  color: var(--color-blickred);
}

.buttons {
  margin: auto;
}

.primary-button {
  display: inline-block;
  background-color: var(--color-blickred);
  font-family: "InterVariable", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: white;
  padding: 12px 24px;
  border-radius: 24px;
  border: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.primary-button:hover {
  background-color: var(--color-blickdarkred);
}
.primary-button.inactive {
  background-color: var(--color-grey40);
  color: var(--color-grey20);
  cursor: initial;
}

a, a:visited, a:hover {
  color: inherit;
}

a:active {
  color: var(--color-blickred);
}