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

/* Good Cond Ultra */
@font-face {
  font-family: 'GoodCond';
  src: local(☺︎),
    url(https://php.blick.ch/static/fonts/Good/GoodW05-CondUltra.woff)
      format('woff');
  src: local(☺︎),
    url(https://php.blick.ch/static/fonts/Good/GoodW05-CondUltra.woff2)
      format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

/* Good Cond Ultra Italic */
/* @font-face {
  font-family: 'GoodCond';
  src: local(☺︎),
    url(https://php.blick.ch/static/fonts/Good/GoodW05-CondUltraItalic.woff)
      format('woff');
  src: local(☺︎),
    url(https://php.blick.ch/static/fonts/Good/GoodW05-CondUltraItalic.woff2)
      format('woff2');
  font-display: swap;
  font-style: italic;
  font-weight: 900;
} */

/* Good Regular */
@font-face {
  font-family: 'Good';
  src: local(☺︎),
    url(https://php.blick.ch/static/fonts/Good/GoodW05-Regular.woff)
      format('woff');
  src: local(☺︎),
    url(https://php.blick.ch/static/fonts/Good/GoodW05-Regular.woff2)
      format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

/* Good  Italic */
/* @font-face {
  font-family: 'Good';
  src: local(☺︎),
    url(https://php.blick.ch/static/fonts/Good/GoodW05-Italic.woff)
      format('woff');
  src: local(☺︎),
    url(https://php.blick.ch/static/fonts/Good/GoodW05-Italic.woff2)
      format('woff2');
  font-display: swap;
  font-style: italic;
  font-weight: 400;
} */

/* Good Ultra */
/* @font-face {
    font-family : "Good";
    src         : local(☺︎), url(https://php.blick.ch/static/fonts/Good/GoodW05-Ultra.woff) format("woff");
    src         : local(☺︎), url(https://php.blick.ch/static/fonts/Good/GoodW05-Ultra.woff2) format("woff2");
    font-display: swap;
    font-style  : normal;
    font-weight : 900;
  } */

/* Good Ultra Italic */
/*   @font-face {
    font-family : "Good";
    src         : local(☺︎), url(https://php.blick.ch/static/fonts/Good/GoodW05-UltraItalic.woff) format("woff");
    src         : local(☺︎), url(https://php.blick.ch/static/fonts/Good/GoodW05-UltraItalic.woff2) format("woff2");
    font-display: swap;
    font-style  : italic;
    font-weight : 900;
  } */

#wrapper {
  background: #fff;
  border: 0 solid #f1f1f1;
  border-radius: 6px;
  overflow: hidden;

  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.1;

  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-areas:
    'header text'
    'header buttons';

  border: 1px solid #797979;
  min-height: 170px;
}



.nl-header {
  width: 100%;
  background: url(./img/leserreporter.png) no-repeat 130% 10px / 60%,
    url(./img/lines.png) no-repeat 0 -20% / 20%,
    url(./img/crosses.png) no-repeat 30% 20% / 7%,
    url(./img/dots.png) no-repeat 70% 87% / 15%,
    url(./img/dots.png) no-repeat 105% 10% / 15%,
    linear-gradient(56deg, #2e363d 30%, #e20000 110%);
  display: flex;
  grid-area: header;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1em 1em 1.2em 1em;
  position: relative;
  overflow: hidden;
}


@media (max-width: 500px) {
  #wrapper {
    grid-template-areas:
      'header header'
      'text text'
      'buttons buttons';
  }

  .nl-header {
    background: url(./img/leserreporter.png) no-repeat right calc( 32px - 10vw + 16px ) / 33%,
      url(./img/lines.png) no-repeat 0 -20% / 20%,
      url(./img/crosses.png) no-repeat 32% 110% / 7%,
      url(./img/dots.png) no-repeat 70% 87% / 15%,
      url(./img/dots.png) no-repeat 105% 10% / 15%,
      linear-gradient(56deg, #2e363d 30%, #e20000 110%);
  }
}

.nl-title {
  z-index: 1;
}

.nl-name {
  font-family: 'GoodCond', 'Arial Narrow', sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 32px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nl-content {
  border-width: 0 2px 2px 2px;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  border-style: inherit;
  border-color: inherit;
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  grid-gap: 1.2em;
  justify-items: center;
  padding: 1.2em 0;
}

.nl-intro {
  grid-area: text;
  font-weight: 400;
  line-height: 1.3;
  color: #1f1f1f;
  padding: 1em;
}

.buttons {
  grid-area: buttons;
  justify-self: center;
  padding: 1em;
  margin-bottom: 0.5em;
}

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

.buttons a {
  font-family: 'Good';
  font-size: 0.8em;
  text-transform: uppercase;
  color: white;
  background-color: #1f1f1f;
  text-decoration: none;
  padding: 0.6em 1em 0.5em;
  border-radius: 1.4em;
}

.buttons a:hover,
.buttons a:active {
  background-color: #e20000;
}