@font-face {
  font-family: "Fakt Pro";
  src: url("../fonts/FaktPro-Normal.woff2") format("woff2"), url("../fonts/FaktPro-Normal.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Fakt Pro";
  src: url("../fonts/Fakt-SemiBold.woff2") format("woff2"), url("../fonts/Fakt-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: "Fakt Pro";
  src: url("../fonts/FaktPro-NormalItalic.woff");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: "Fakt Pro";
  src: url("../fonts/FaktPro-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: "Lyno Stan HKW";
  src: url("../fonts/editorial/LynoStanHKW.woff2") format("woff2"), url("../fonts/editorial/LynoStanHKW.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

body {
  font-family: "Fakt Pro", sans-serif;
  margin: 0;
  line-height: 1.4;
  font-size: 18px; }

a {
  text-decoration: none;
  color: black; }

a:hover {
  color: rgba(0, 0, 0, 0.7); }

a:active {
  color: rgba(0, 0, 0, 0.4); }

article {
  padding: 1px 1rem 3rem 1rem;
  background: white;
  position: relative;
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0);
  /* Safari z-index bug fix */ }

header {
  background: black;
  color: white;
  min-height: 100vh;
  /*80*/
  display: flex;
  flex-direction: column;
  padding: 1rem;
  /* position: sticky; */
  top: 0;
  z-index: 0; }

header .logo svg {
  max-width: 130px;
  fill: currentcolor; }

header nav {
  position: relative; }

header .language {
  position: absolute;
  right: 0;
  font-size: 0.62em; }

header .title {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; }

header .byline {
  color: inherit;
  margin-bottom: 6em; }

header h1 {
  font-size: 2.5em;
  font-family: "Lyno Stan HKW", "Fakt Pro", sans-serif;
  font-weight: normal;
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.02em; }

header.background {
  background: silver url(images/hkw_anthropocene_observatory_4_c_armin_linke_2.jpg);
  background-size: cover;
  background-position: center;
  color: black; }

header.background .byline {
  color: white; }

article > figure:first-child {
  margin-top: 0; }

figure {
  margin: 3rem -1rem; }

figure.narrow-width, figure.medium-width {
  margin-left: 0;
  margin-right: 0; }

figure.narrow-width figcaption, figure.medium-width figcaption {
  margin-left: 0;
  margin-right: 0; }

figure img {
  max-width: 100%;
  width: 100%;
  display: block; }

figcaption {
  font-size: 0.62em;
  margin: 0 1rem; }

figcaption p {
  margin-bottom: 0;
  margin-top: 1em;
  /* changed */ }

figcaption p:not(:first-of-type), .infobox p:not(:first-of-type) {
  margin: 0; }

.byline {
  color: dimgray; }

p {
  margin: 1.4em 0; }

h3 {
  font-size: 1em;
  font-weight: 600;
  margin: 2.1em 0 0.7em 0; }

h3 + p {
  margin-top: 0; }

blockquote {
  margin: 3rem 0;
  color: #E73374; }

.zitat-blau {
  color: #212876; }

.zitat-pink {
  color: #E73374; }

blockquote p {
  font-size: 1.33em; }

.infobox {
  box-sizing: border-box;
  padding: 0;
  margin: 0rem auto; }

.infobox p {
  font-size: 0.8em;
  max-width: 42em; }

@media (min-width: 40em) {
  body {
    font-size: 21px; }
  header {
    padding: 1.5rem 2rem;
    min-height: 100vh;
    /*90*/ }
  header .byline {
    margin-bottom: 4.5em; }
  article {
    padding-left: 2rem;
    padding-right: 2rem; }
  figure {
    margin-left: -2rem;
    margin-right: -2rem;
    margin: 3.5rem -1rem; }
  header h1 {
    font-size: 3.33em;
    margin: 0.5em 0 0 0; }
  article > p, article > h3, figure.narrow-width, .infobox {
    max-width: 32em;
    margin-left: auto;
    margin-right: auto; }
  blockquote {
    margin: 3.5rem 0; }
  blockquote, figure.medium-width {
    max-width: 38em;
    margin-left: auto;
    margin-right: auto; }
  blockquote p {
    line-height: 1.25;
    font-size: 1.6em; }
  figcaption {
    max-width: 50%;
    margin: 0 2rem; }
  .infobox {
    margin: 3rem auto; } }

@media (min-width: 60em) {
  header h1 {
    font-size: 5.33em; }
  header {
    padding: 1.5rem 3rem; }
  article {
    padding-left: 3rem;
    padding-right: 3rem; }
  figure {
    margin-left: -3rem;
    margin-right: -3rem; }
  figcaption {
    margin: 0 3rem; }
  .infobox {
    margin: 3rem auto; } }

@media only screen and (max-width: 767px) {
  body {
    padding: 0; } }

nav a {
  text-decoration: none;
  border-bottom: none; }
  nav a:hover {
    text-decoration: none;
    border-bottom: none; }

article {
  padding-top: 0;
  padding-bottom: 300px; }
  @media only screen and (max-width: 767px) {
    article {
      padding-bottom: 450px; } }
  article section {
    padding: 1.5rem 2rem; }

/*
@media (min-width: 40em) {
	article > h3 {
		max-width: 28em;
		margin-left: auto;
		margin-right: auto;
	}
}


h3{
	font-size: 1em;
	margin: 1.4em 0 0 0;
	font-weight:bold;
}
h3 + p {
  margin-top: 0;
}
*/
blockquote {
  padding: unset;
  border-left: unset; }

header {
  margin: 0 -1rem 0 -1rem; }

article > figcaption {
  margin: 0 0rem; }

.footer {
  z-index: 10;
  box-sizing: border-box;
  padding: 1rem; }

@media (min-width: 40em) {
  header {
    margin: 0 -2rem 0 -2rem; }
  article > figcaption {
    margin: 0 0; }
  .footer {
    padding: 2rem; } }

@media (min-width: 60em) {
  header {
    margin: 0 -3rem 0 -3rem; }
  article > figcaption {
    margin: 0; } }

@media only screen and (max-width: 767px) {
  .footer {
    margin: 0; } }