@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=8dfb30ae-a8e8-4c75-ac9c-21be4990b3ab");
:root {
  --clr-white: hsl(0 0% 100%);
  --clr-black: hsl(0 0% 0%);
  --clr-gray: hsl(0 0% 20%);
  --clr-gray--light: hsl(0 0% 60%);
  --clr-gray--darker: hsl(0 0% 7%);
  --clr-blue: hsl(199 100% 43%);
  --clr-blue--darker: hsl(199 100% 33%);
  --clr-red: hsl(357 90% 45%);
}

@font-face {
  font-family: "Texta W00";
  src: url("../fonts/c8f0576d-0c8a-4ddb-b85b-cff9a45d6a2a.woff2") format("woff2"), url("../fonts/64a625b8-7a7e-4d32-8d08-3a2e7f083eb6.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Texta W00";
  src: url("../fonts/2cdcea13-980e-41af-a651-1e997db88e67.woff2") format("woff2"), url("../fonts/dd6b6de3-f704-453f-ac6b-c5e2b202a4d7.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Texta W00";
  src: url("../fonts/429d58ce-0b31-4869-b879-b71c2024a05f.woff2") format("woff2"), url("../fonts/06bd5c2b-12d1-4ad4-b23f-0c70142155a2.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Texta W00";
  src: url("../fonts/34a6bc31-ca3a-4845-9a7a-7b5172c34f24.woff2") format("woff2"), url("../fonts/7e0d9a45-6e94-4741-8d3f-a15b3392bdae.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Texta W00";
  src: url("../fonts/7f181530-6e16-4134-859d-1764c04d35c9.woff2") format("woff2"), url("../fonts/a2387200-b32f-46af-8049-1527274118bd.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}
:root {
  --ff-primary: "Texta W00",sans-serif;
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 500;
  --fw-bold: 700;
  --fw-black: 800;
}

.btn, input[type=submit] {
  display: inline-block;
  margin: 1.25rem 0;
  padding: 0.25em 0.75em;
  font-weight: var(--fw-bold);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  color: #fff;
  border: none;
  border-radius: 8px;
  background-color: var(--clr-blue);
  text-decoration: none;
  transition: background-color 250ms ease;
}
.btn:hover, input[type=submit]:hover {
  background-color: var(--clr-blue--darker);
}
@media screen and (min-width: 30rem) {
  .btn, input[type=submit] {
    font-size: 1.125rem;
    margin: 2rem 0;
    padding: 0.5em 1.25em;
  }
}

.form-checkboxes {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
.form-checkboxes .form-type-checkbox {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.75em;
  font-size: 1.25rem;
  line-height: 1.1;
}
.form-checkboxes .form-type-checkbox input {
  display: grid;
  place-content: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 1px solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
}
.form-checkboxes .form-type-checkbox input::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--clr-blue);
}
.form-checkboxes .form-type-checkbox input:checked::before {
  transform: scale(1);
}

.kontaktdaten {
  display: grid;
  grid-template-columns: 4fr 6fr;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 1rem;
  margin-top: 2rem;
}
.kontaktdaten label {
  display: none;
}
.kontaktdaten input, .kontaktdaten textarea {
  width: 100%;
  height: 100%;
  font-family: var(--ff-primary);
  padding: 0.75rem;
  font-size: 1.125rem;
  color: var(--clr-white);
  background-color: var(--clr-black);
  border: 1px solid var(--clr-white);
}
.kontaktdaten input::-moz-placeholder, .kontaktdaten textarea::-moz-placeholder {
  color: var(--clr-gray);
}
.kontaktdaten input:-ms-input-placeholder, .kontaktdaten textarea:-ms-input-placeholder {
  color: var(--clr-gray);
}
.kontaktdaten input::placeholder, .kontaktdaten textarea::placeholder {
  color: var(--clr-gray);
}
.kontaktdaten input:focus, .kontaktdaten textarea:focus {
  outline: none;
  border: 1px solid var(--clr-blue);
}
.kontaktdaten .form-textarea-wrapper {
  height: 100%;
}
.kontaktdaten .textfelder {
  display: grid;
  grid-gap: 1rem;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  font-family: var(--ff-primary);
  font-size: 1.125rem;
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: #fff;
  background: #000;
  background-image: url("../img/sigor-led.png");
  background-size: 12rem auto;
  background-repeat: no-repeat;
  background-position: right -4rem top -4rem;
}
@media screen and (min-width: 40rem) {
  body {
    background-size: 22rem auto;
    background-position: right -8rem top -4rem;
  }
}

h1 {
  font-size: 3rem;
  line-height: 1;
  font-weight: var(--fw-light);
}
@media screen and (min-width: 40rem) {
  h1 {
    font-size: 5rem;
  }
}

h2 {
  font-size: 2.5rem;
  line-height: 1;
  font-weight: var(--fw-black);
}
@media screen and (min-width: 30rem) {
  h2 {
    font-size: 3.5rem;
  }
}

h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: var(--fw-regular);
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 30rem) {
  h3 {
    font-size: 2rem;
  }
}

.container {
  display: grid;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Logo ---------------*/
.logo {
  margin-top: 2rem;
  max-width: 16rem;
}
@media screen and (min-width: 30rem) {
  .logo {
    margin-top: 4rem;
    max-width: 24rem;
  }
}

/* Lead ---------------*/
.lead {
  margin: 4rem 0 6rem 0;
}
@media screen and (min-width: 25rem) {
  .lead {
    margin: 4rem 20% 6rem 0;
  }
}
@media screen and (min-width: 35rem) {
  .lead {
    margin: 4rem 20% 6rem;
  }
}
.lead p {
  margin-top: 1.25rem;
  font-size: 1.25rem;
  font-weight: var(--fw-light);
}
@media screen and (min-width: 40rem) {
  .lead p {
    font-size: 1.5rem;
    margin-right: 20%;
  }
}

/* Textblock -----------*/
.textblock {
  margin-bottom: 6rem;
}
@media screen and (min-width: 35rem) {
  .textblock {
    display: grid;
    gap: 2rem;
  }
}
.textblock .text {
  grid-area: text;
}
.textblock .image {
  grid-area: image;
}
@media screen and (min-width: 35rem) {
  .textblock__right {
    grid-template-columns: 4.2fr 5.8fr;
    grid-template-areas: "text image";
  }
}
@media screen and (min-width: 35rem) {
  .textblock__left {
    grid-template-columns: 3fr 7fr;
    grid-template-areas: "image text";
  }
}
.textblock__center {
  margin: 0 20% 6rem;
  text-align: center;
}
@media screen and (max-width: 44rem) {
  .textblock__center {
    margin: 0 auto 6rem;
  }
}
.textblock__center .image-wrapper {
  margin: 3rem auto 1rem;
}
@media screen and (min-width: 30rem) {
  .textblock__center .image-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
}

footer {
  width: 100%;
  margin-top: 8rem;
  font-size: 1rem;
  color: var(--clr-gray--light);
  background-color: var(--clr-gray--darker);
}
footer .container {
  padding: 1.25rem;
}
@media screen and (min-width: 50em) {
  footer .container {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: center;
  }
}
footer .footer--logo {
  margin-bottom: 1rem;
}
footer .footer--logo img {
  width: 12rem;
}
footer a {
  color: var(--clr-gray--light);
  text-decoration: none;
}
footer a:hover {
  color: var(--clr-white);
}
/*# sourceMappingURL=sourcemap/styles.css.map */