@font-face {
  font-family: 'PublicSans Bold';
  src: local('PublicSans Bold'),
    url('../fonts/PublicSans-Bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 800;
}

@font-face {
  font-family: 'PublicSans Regular';
  src: local('PublicSans Regular'),
    url('../fonts/PublicSans-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'PublicSans ExtraBold';
  src: local('PublicSans ExtraBold'),
    url('../fonts/PublicSans-ExtraBold.woff2') format('woff2');
  font-display: swap;
  font-weight: 900;
} 

:root {
	--color1: #032D67; 			
	--color2: #00A7E7;			
	--color3: #FFE000; 			
	--hoverColor: #043C8B; 
	--hoverColor3: #FFD230; 	

	--grey: #D5DDEC;
	--hoverGrey: #ABB8D0;
	--tint: #E1F4FC;
	--fff:  #FFF;
	--000: #000;

  --section-grey: #F8F9FA;
  --text-color: #252525;
  
  --content-width: 1280px;
	--content-width-node: 840px;

	--font: 'PublicSans Bold';
	--font-heading: 'PublicSans ExtraBold';
	--font-regular: 'PublicSans Regular';

	--color-filter: brightness(0) saturate(100%) invert(10%) sepia(93%) saturate(4129%) hue-rotate(209deg) brightness(94%) contrast(96%);

  --line-height-normal: 1.3333;
} 

/* 
	position: relative;
	color: var(--text-color);
	background-image: linear-gradient(var(--color2), var(--color2));
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: bottom;
	transition: background 180ms cubic-bezier(.2, .6, .2, 1), color 180ms cubic-bezier(.2, .6, .2, 1);

	&:hover, &:focus, &:active {
	  color: var(--color1);
	  text-decoration: none;
	  box-shadow: 0 0 0 2px var(--color3);
	  background-color: var(--color3);
	  background-image: linear-gradient(var(--color1), var(--color1));
    transition: background 180ms cubic-bezier(.2, .6, .2, 1), color 180ms cubic-bezier(.2, .6, .2, 1);
	} 
	*/

/* BOLD */
.sliding-popup-bottom .agree-button,
#edit-amount-range label,
#edit-amount-summary,
.form-item-amount label,
button.button:not(#edit-choose-payment-amount):not(#edit-payment-additional-information):not(.edit-choose-default),
.path-spenden #uv-spenden-form button.button:not(#edit-payment-additional-information):not(.edit-choose-default),
div.form-item-amount::after,
.uv-spenden-form.receiver-07000000 #edit-amount-range .form-item label,
.path-spenden h1,
.path-spenden .fieldset-legend,
div#edit-amount-range label {
	font-family: var(--font);
}

/* regular */
body {
	font-family:  var(--font-regular);
}

.form-item-intro a,
.form-item-legal-intro a {
	position: relative;
	color: var(--text-color);
	background-image: linear-gradient(var(--color2), var(--color2));
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: bottom;
	transition: background 180ms cubic-bezier(.2, .6, .2, 1), color 180ms cubic-bezier(.2, .6, .2, 1);

	&:hover, &:focus, &:active {
	  color: var(--color1);
	  text-decoration: none;
	  box-shadow: 0 0 0 2px var(--color3);
	  background-color: var(--color3);
	  background-image: linear-gradient(var(--color1), var(--color1));
    transition: background 180ms cubic-bezier(.2, .6, .2, 1), color 180ms cubic-bezier(.2, .6, .2, 1);
	}
}

div#edit-amount-range label {
	border-radius: 6px;
	background-color: var(--color3);
	color:  var(--color1);

	&:hover, &:focus, &:active {
		background-color: var(--color2);
		color:  var(--fff);
	}
}

#edit-amount-range .form-radio:checked {
	+ label {
		color: var(--fff);
	}
}

div.form-item-amount .form-text {
	background-color: var(--fff);
	border: 2px solid #D5DDEC;
	border-radius: 6px;
}

legend {
	margin-bottom: 10px;
}

.path-spenden #uv-spenden-form button.button:not(#edit-payment-additional-information):not(.edit-choose-default) {
	border-radius: 6px;

	&:hover, &:focus, &:active {
		background-color: var(--hoverColor);
	}
}

.path-spenden h1 {
	color: var(--color1);
}

#paypment-method-wrapper {
	.form-wrapper {
		button {
			border-bottom: 1px solid #D5DDEC;
			color: var(--color1);
			cursor: pointer;

			&:hover, &:focus, &:active {
				border-color:  var(--color1);
			}
		}
	}
}

.path-spenden .form-item-headline-email h1 {
	font-family:  var(--font-regular);
	font-size: 17px;
	color:  #333;
}