:root {
  --color-one: rgb(0, 160, 208);
  --color-one-hover: rgb(0, 140, 198);
  --color-two: rgb(41, 38, 38);
  --color-three: rgb(187, 62, 74);
  --gradient-one: radial-gradient(at center center, var(--color-one) 0%, var(--color-one-hover) 100%);
  --bg-one: var(--color-two);
  --bg-two: var(--color-one);
  --bg-three: rgb(240, 240, 238);
  --color-white-soft: rgba(230, 230, 230, 1);
  --color-white-softer: rgba(210, 210, 210, 1);
}

:root {
  --font-headline: "Gilroy", sans-serif;
  --font-copy: "Gilroy", sans-serif;
  --font-headline-light: 300;
  --font-headline-regular: 400;
  --font-headline-medium: 500;
  --font-headline-semibold: 600;
  --font-headline-bold: 900;
  --font-copy-light: 300;
  --font-copy-regular: 400;
  --font-copy-medium: 500;
  --font-copy-semibold: 600;
  --font-copy-bold: 900;
}

:root {
  --xxs-width: 0;
  --xs-width: 321px;
  --sm-width: 576px;
  --md-width: 768px;
  --lg-width: 992px;
  --xl-width: 1200px;
  --xxl-width: 1500px;
  --xxxl-width: 1680px;
}

@media (min-width: 0) {
  :root {
    --basesize: .8;
  }
}
@media (min-width: 321px) {
  :root {
    --basesize: .8;
  }
}
@media (min-width: 576px) {
  :root {
    --basesize: .95;
  }
}
@media (min-width: 768px) {
  :root {
    --basesize: 1;
  }
}
@media (min-width: 992px) {
  :root {
    --basesize: 1;
  }
}
@media (min-width: 1200px) {
  :root {
    --basesize: 1.1;
  }
}
@media (min-width: 1500px) {
  :root {
    --basesize: 1.1;
  }
}
@media (min-width: 1680px) {
  :root {
    --basesize: 1.2;
  }
}

:root {
  --level1-factor: 4;
  --level2-factor: 1.8;
  --level3-factor: 1.4;
  --level4-factor: 1.2;
  --level1-pre-factor: 0.3;
  --level2-pre-factor: 0.5;
  --level3-pre-factor: 0.75;
  --level4-pre-factor: 0.75;
  --level1-sub-factor: 0.4;
  --level2-sub-factor: 0.6;
  --level3-sub-factor: 0.6;
  --level4-sub-factor: 0.6;
  --copy-xs-factor: .9;
  --copy-sm-factor: 1;
  --copy-md-factor: 1.1;
  --copy-lg-factor: 1.3;
}

#fourcrds-form {
  background: var(--color-two);
  padding: 2rem;
}
#fourcrds-form .form-row {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-direction: row;
}
#fourcrds-form .form-row h2 {
  color: var(--color-white);
  text-align: center;
}
#fourcrds-form .form-row .sub-level2 {
  color: var(--color-white) !important;
  margin-top: 0.25rem;
  display: block;
  text-align: center;
}
#fourcrds-form label {
  color: var(--color-white);
  font-size: var(--copy-xs-calc);
  text-transform: uppercase;
}
#fourcrds-form label input {
  background: transparent;
}
#fourcrds-form input {
  box-shadow: none;
  border: 1px solid var(--color-white);
  border-radius: 0;
  padding: 0.5rem;
  color: var(--color-white);
  font-size: var(--copy-sm-calc);
  font-weight: 400;
  outline: none;
}
#fourcrds-form input:active, #fourcrds-form input:focus, #fourcrds-form input:hover {
  border: 1px solid var(--color-white);
  color: var(--color-white);
  background: transparent;
}
#fourcrds-form button[type=submit] {
  background: var(--color-one);
  color: var(--color-white);
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-one);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

#leadmagnet-status {
  background: var(--color-two);
  color: var(--color-white);
  padding: 1rem;
}

#leadmagnet-sitemap {
  display: none;
}

#leadmagnet-result {
  display: none;
  background: var(--color-two);
  color: var(--color-one);
  padding: 2rem 0;
}
#leadmagnet-result * {
  color: var(--color-white);
  text-align: left;
}
#leadmagnet-result ul {
  list-style: none;
  padding: 0;
}
#leadmagnet-result .leadmagnet-main-point > .inner {
  display: flex;
}
#leadmagnet-result .leadmagnet-main-point > .inner .icon {
  flex: 4rem 1 0;
  margin-top: 0.75rem;
}
#leadmagnet-result .leadmagnet-main-scala {
  margin-bottom: 3rem;
}
#leadmagnet-result .leadmagnet-main-scala .scala-title {
  font-family: var(--font-headline);
  font-size: var(--copy-sm-calc);
  font-weight: var(--font-headline-light);
  text-align: center;
  margin-bottom: 0.75rem;
  padding: 0 1rem;
}
#leadmagnet-result .leadmagnet-main-scala .scala-visual {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
}
#leadmagnet-result .leadmagnet-main-scala .scala-visual * {
  border: 1px solid var(--color-one);
  height: 20px;
  flex: 1;
}
#leadmagnet-result .leadmagnet-main-scala .scala-visual *.on {
  background: var(--color-one);
}
#leadmagnet-result .leadmagnet-main-scala .scala-visual *:first-child {
  border-radius: 4px 0 0 4px;
}
#leadmagnet-result .leadmagnet-main-scala .scala-visual *:last-child {
  border-radius: 0 4px 4px 0;
}
#leadmagnet-result .leadmagnet-content-box .score-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
#leadmagnet-result .leadmagnet-content-box .score-list li {
  display: flex;
  align-items: flex-start;
}
#leadmagnet-result .leadmagnet-content-box .score-list li::before {
  display: none;
}
#leadmagnet-result .leadmagnet-content-box .score-list li img {
  width: 1.25rem;
  margin-right: 0.25rem;
  margin-top: 0.125rem;
}
#leadmagnet-result .leadmagnet-fazit {
  border: 1px solid var(--color-white);
  border-radius: 8px;
  padding: 2rem;
  margin-top: 2rem;
}

.leadmagnet-cta {
  background: var(--color-one);
  color: var(--color-white);
  padding: 2rem 6rem;
  margin-top: 2rem;
  text-align: center;
}
.leadmagnet-cta .component-inner h2 {
  color: var(--color-white);
  margin-bottom: 1rem;
}
.leadmagnet-cta .component-inner p {
  color: var(--color-white);
  margin-bottom: 1.5rem;
}
.leadmagnet-cta .component-inner button {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  margin: 0 0.5rem;
}
.leadmagnet-cta .component-inner button.btn-primary {
  background: var(--color-white);
  color: var(--color-one);
}
.leadmagnet-cta .component-inner button.btn-tertiary {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}
.leadmagnet-cta .component-inner button .label {
  display: block;
}

.leadmagnet-additional {
  background: var(--color-two);
  color: var(--color-white);
  padding: 1rem 6rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.leadmagnet-additional .component-inner p {
  color: var(--color-white);
  margin: 0;
}
.leadmagnet-additional .component-inner a {
  color: var(--color-one);
  text-decoration: underline;
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*# sourceMappingURL=leadmagnet.css.map */