* {
  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 {
  /* Primitives */
  --color-red-100: #FCE5E5;
  --color-red-400: #FF0000;
  --color-red-500: #E20000;
  --color-red-900: #A70000;

  --color-green-100: #EFF5E8;
  --color-green-500: #62A01A;
  --color-green-700: #508216;
  --color-green-900: #385912;
  --color-green-950: #181B11;

  --color-yellow-500: #FFCE00;

  --color-white: #FFFFFF;

  --color-grey-100: #F5F5F5;
  --color-grey-200: #E1E0E0;
  --color-grey-300: #C8C6C6;
  --color-grey-400: #A5A1A1;
  --color-grey-500: #837C7C;
  --color-grey-600: #6A6262;
  --color-grey-700: #504949;
  --color-grey-800: #3B3535;
  --color-grey-900: #292424;
  --color-grey-950: #1E1A1A;

  --color-black: #121010;

  --color-success: #29CC49;

  --color-alpha-black-0: rgba(18, 16, 16, 0);
  --color-alpha-black-10: rgba(18, 16, 16, 0.1);
  --color-alpha-black-20: rgba(18, 16, 16, 0.2);
  --color-alpha-black-30: rgba(18, 16, 16, 0.3);
  --color-alpha-black-40: rgba(18, 16, 16, 0.4);
  --color-alpha-black-50: rgba(18, 16, 16, 0.5);
  --color-alpha-black-60: rgba(18, 16, 16, 0.6);
  --color-alpha-black-70: rgba(18, 16, 16, 0.7);
  --color-alpha-black-80: rgba(18, 16, 16, 0.8);
  --color-alpha-black-90: rgba(18, 16, 16, 0.9);

  /* Semantic Colors */

  --color-text-default: var(--is-light-theme, var(--color-black)) var(--is-dark-theme, var(--color-grey-100));
  --color-text-default_hover: var(--is-light-theme, var(--color-grey-900)) var(--is-dark-theme, var(--color-grey-200));
  --color-text-default_disabled: var(--is-light-theme, var(--color-grey-400)) var(--is-dark-theme, var(--color-grey-700));
  --color-text-weak: var(--is-light-theme, var(--color-grey-600)) var(--is-dark-theme, var(--color-grey-400));
  --color-text-inverse: var(--is-light-theme, var(--color-white)) var(--is-dark-theme, var(--color-black));
  --color-text-brand: var(--is-light-theme, var(--color-red-500)) var(--is-dark-theme, var(--color-red-400));
  --color-text-brand_hover: var(--is-light-theme, var(--color-red-900)) var(--is-dark-theme, var(--color-red-900));
  --color-text-sport: var(--is-light-theme, var(--color-green-700)) var(--is-dark-theme, var(--color-green-500));
  --color-text-sport_hover: var(--is-light-theme, var(--color-green-900)) var(--is-dark-theme, var(--color-green-900));

  --color-stroke-default: var(--is-light-theme, var(--color-grey-600)) var(--is-dark-theme, var(--color-grey-400));
  --color-stroke-default_disabled: var(--is-light-theme, var(--color-grey-300)) var(--is-dark-theme, var(--color-grey-800));
  --color-stroke-weak: var(--is-light-theme, var(--color-grey-300)) var(--is-dark-theme, var(--color-grey-800));
  --color-stroke-strong: var(--is-light-theme, var(--color-black)) var(--is-dark-theme, var(--color-white));
  --color-stroke-strong_hover: var(--is-light-theme, var(--color-grey-900)) var(--is-dark-theme, var(--color-grey-200));
  --color-stroke-inverse: var(--is-light-theme, var(--color-white)) var(--is-dark-theme, var(--color-black));
  --color-stroke-brand: var(--is-light-theme, var(--color-red-500)) var(--is-dark-theme, var(--color-red-400));
  --color-stroke-brand_hover: var(--is-light-theme, var(--color-red-900)) var(--is-dark-theme, var(--color-red-900));
  --color-stroke-sport: var(--is-light-theme, var(--color-green-500)) var(--is-dark-theme, var(--color-green-500));
  --color-stroke-sport_hover: var(--is-light-theme, var(--color-green-900)) var(--is-dark-theme, var(--color-green-900));

  --color-fill-default: var(--is-light-theme, var(--color-white)) var(--is-dark-theme, var(--color-black));
  --color-fill-default_disabled: var(--is-light-theme, var(--color-grey-200)) var(--is-dark-theme, var(--color-grey-900));
  --color-fill-weak: var(--is-light-theme, var(--color-grey-100)) var(--is-dark-theme, var(--color-grey-950));
  --color-fill-strong: var(--is-light-theme, var(--color-grey-200)) var(--is-dark-theme, var(--color-grey-800));
  --color-fill-strongest: var(--is-light-theme, var(--color-grey-600)) var(--is-dark-theme, var(--color-grey-400));
  --color-fill-brand: var(--is-light-theme, var(--color-red-500)) var(--is-dark-theme, var(--color-red-400));
  --color-fill-brand_hover: var(--is-light-theme, var(--color-red-900)) var(--is-dark-theme, var(--color-red-900));
  --color-fill-sport: var(--is-light-theme, var(--color-green-500)) var(--is-dark-theme, var(--color-green-500));
  --color-fill-sport_hover: var(--is-light-theme, var(--color-green-900)) var(--is-dark-theme, var(--color-green-900));
  --color-fill-sport-weak: var(--is-light-theme, var(--color-green-100)) var(--is-dark-theme, var(--color-green-950));
  --color-fill-inverse: var(--is-light-theme, var(--color-black)) var(--is-dark-theme, var(--color-white));
  --color-fill-inverse_hover: var(--is-light-theme, var(--color-grey-900)) var(--is-dark-theme, var(--color-grey-200));
  --color-fill-video: var(--is-light-theme, var(--color-black)) var(--is-dark-theme, var(--color-grey-900));

  --color-static-white: var(--color-white);
  --color-static-neutral-100: var(--color-grey-100);
  --color-static-neutral-200: var(--color-grey-200);
  --color-static-neutral-300: var(--color-grey-300);
  --color-static-neutral-400: var(--color-grey-400);
  --color-static-neutral-700: var(--color-grey-700);
  --color-static-neutral-800: var(--color-grey-800);
  --color-static-neutral-900: var(--color-grey-900);
  --color-static-neutral-950: var(--color-grey-950);
  --color-static-black: var(--color-black);
  --color-static-green-500: var(--color-green-500);
  --color-static-green-700: var(--color-green-700);
  --color-static-green-900: var(--color-green-900);
  --color-static-red-400: var(--color-red-400);
  --color-static-red-500: var(--color-red-500);
  --color-static-red-900: var(--color-red-900);
  --color-static-yellow-500: var(--color-yellow-500);

  --color-overlay-default: var(--is-light-theme, var(--color-alpha-black-70)) var(--is-dark-theme, var(--color-alpha-black-70));
  
  --color-icon-brand: var(--is-light-theme, var(--color-red-500)) var(--is-dark-theme, var(--color-red-400));
  --color-icon-brand_hover: var(--is-light-theme, var(--color-red-900)) var(--is-dark-theme, var(--color-red-900));
  --color-icon-default: var(--is-light-theme, var(--color-black)) var(--is-dark-theme, var(--color-grey-100));
  --color-icon-default_disabled: var(--is-light-theme, var(--color-grey-400)) var(--is-dark-theme, var(--color-grey-700));
  --color-icon-inverse: var(--is-light-theme, var(--color-white)) var(--is-dark-theme, var(--color-black));
  --color-icon-sport: var(--is-light-theme, var(--color-green-700)) var(--is-dark-theme, var(--color-green-500));
  --color-icon-sport_hover: var(--is-light-theme, var(--color-green-900)) var(--is-dark-theme, var(--color-green-900));
  --color-icon-weak: var(--is-light-theme, var(--color-grey-600)) var(--is-dark-theme, var(--color-grey-400));
}

body {
  padding-bottom: 16px;
}

a {
  color: inherit;
  text-decoration: underline;
}

.signupBox {
  position: relative;
  background: var(--is-light-theme, var(--color-fill-default)) var(--is-dark-theme, var(--color-grey-950));
  border: 4px solid var(--color-theme-main, var(--color-stroke-brand));
  border-width: 4px 0 0 4px;
  overflow: hidden;
  padding: 16px 16px 24px;
  margin: 0 16px 16px 0;
  box-shadow: 16px 16px var(--color-theme-main, var(--color-fill-brand));

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

  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.nl-title {
  color: var(--color-text-default);
  font-size: 22px;
  font-family: "BlickVariable", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 0.7em;
  line-height: 1.2;
}

.nl-name {
  color: var(--color-theme-main, var(--color-text-brand));
}

.box-body-content {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
}

p {
  color: var(--color-text-default);
  line-height: 1.6;
  width: 100%;
}

.form {
  position: relative;
  align-self: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
  max-width: 640px;
  align-items: center;
}

.input-group {
  display: flex;
  gap: 16px;
}

.input-group, #name, #email {
  width: 100%;
  max-width: 390px;
}

input[type='text'],
input[type='email'] {
  color: var(--color-text-default);
  background: var(--color-fill-default);
  border: 1px solid var(--color-stroke-default);
  border-radius: 22px;
  height: 44px;
  width: 100%;
  font-family: 'InterVariable', Arial, Helvetica, sans-serif;
  font-size: inherit;
  padding: 8px 24px;
}
::placeholder {
  color: var(--color-text-weak);
  opacity: 1;
}

.subscribe-btn {
  border: none;
  cursor: pointer;
  background: url(https://utils.blick.ch/static/newsletter-de/v3/img/paper-plane-top-solid.svg) no-repeat 65% 50% var(--color-theme-main, var(--color-fill-brand));
  background-size: 60%;
  color: var(--color-text-inverse);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-indent: 9999px;
  transition: all 0.2s ease-out;
}

.subscribe-btn:hover,
.subscribe-btn:focus {
  background-color: var(--color-theme-hover, var(--color-fill-brand_hover));
  background-size: 70%;
}

.gdpr {
  color: var(--color-text-weak);
  font-size: 12px;
  margin-top: 4px;
}

.nl-example-link {
  color: var(--color-text-default);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  align-self: center;
  justify-self: start;
  background-color: var(--color-fill-strong);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 50px;
  transition: background-color 0.2s ease-out;
}

.nl-example-link:hover {
  background-color: var(--color-fill-strong_hover);
}

.nl-example-link::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: bottom;
  margin-left: 8px;
  background: url("https://utils.blick.ch/static/newsletter-de/v3/img/eye-solid.svg") no-repeat center;
  text-decoration: none;
  @media (prefers-color-scheme: dark) {
    filter: invert(1);
  }

}

.thankyou-state #nl-form {
  opacity: 20%;
}

.thankyou-state .thankyou {
  display: block;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  margin: 0 20px;
  box-shadow: 0 0 16px rgb( from var(--color-black) r g b / 0.5);
  z-index: 2;
}

.thankyou {
  display: none;
  font-style: italic;
  padding: 8px 8px 8px 48px;
  background: var(--color-fill-weak);
}

.thankyou:before {
  position: absolute;
  content: "";
  background: url("https://php.blick.ch/static/newsletter-de/v3/img/check-solid.svg") no-repeat, var(--color-success);
  background-position: 50% 50%;
  display: block;
  width: 36px;
  height: 100%;
  top: 0;
  left: 0;
}

.box-body-content p {
  grid-area: text;
  text-wrap: balance;
}

.box-body-content .gdpr {
  grid-area: gdpr;
}
.form {
  grid-area: form;
}

.grecaptcha-badge {
  display: none !important;
}

@media screen and (min-width: 370px) {
  .signupBox {
    font-size: 16px;
  }
}

@media screen and (min-width: 620px) {

  form {
    flex-direction: row;
  }

  .input-group {
    max-width: unset;
    display: contents;
  }

  .thankyou {
    padding-left: 80px;
  }

  .thankyou:before {
    background-size: 50%;
    width: 64px;
  }

  .box-body-content:has(.nl-example-link) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "text text"
                         "form form"
                         "example gdpr";
    & .gdpr {
      text-align: right;
    }
  }

}

@media screen and (min-width: 950px) {

.signupBox {
  text-align: unset;
  --form-width: 640px;
}
.box-body-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text form"
                       "gdpr form";
}

.box-body-content:has(.nl-example-link) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text form"
                       "example form"
                       "gdpr gdpr";
}

#nl-form {
  flex-direction: column;
}
.input-group, #name, #email {
  max-width: unset;
}
.input-group {
  display: flex;
}
.thankyou {
  max-width: 720px;
  align-self: center;
}
.gdpr {
  margin-bottom: -4px;
}

}