/*

Finaltype.de

Author: Johannes Ammon
URL:    https://finaltype.de
Email:  kontakt@finaltype.de

*/
/* Reset  
-------------------------------------------------- */
@import url("/assets/css/fonts/Monoflow-Webfonts.css");
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box; }

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block; }

/* Import
-------------------------------------------------- */
/* Benedikt Webfont
-------------------------------------------------- */
@font-face {
  font-family: 'Benedikt';
  src: url("../fonts/benedikt/BenediktWeb-Normal.eot?#iefix") format("embedded-opentype"), url("../fonts/benedikt/BenediktWeb-Normal.woff2") format("woff2"), url("../fonts/benedikt/BenediktWeb-Normal.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Benedikt';
  src: url("../fonts/benedikt/BenediktWeb-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/benedikt/BenediktWeb-Light.woff2") format("woff2"), url("../fonts/benedikt/BenediktWeb-Light.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Benedikt';
  src: url("../fonts/benedikt/BenediktWeb-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/benedikt/BenediktWeb-SemiBold.woff2") format("woff2"), url("../fonts/benedikt/BenediktWeb-SemiBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Benedikt';
  src: url("../fonts/benedikt/BenediktWeb-NormalItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/benedikt/BenediktWeb-NormalItalic.woff2") format("woff2"), url("../fonts/benedikt/BenediktWeb-NormalItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'Benedikt';
  src: url("../fonts/benedikt/BenediktWeb-DemiBoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/benedikt/BenediktWeb-DemiBoldItalic.woff2") format("woff2"), url("../fonts/benedikt/BenediktWeb-DemiBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap; }

/* OpenType Features
-------------------------------------------------- */
/**
 * CSS for BenediktWeb Normal
 * Generated by Wakamai Fondue - https://wakamaifondue.com
 * by Roel Nieskens/PixelAmbacht - https://pixelambacht.nl
 */
/* Set custom properties for each layout feature */
:root {
  --benediktweb-normal-aalt: "aalt" off;
  --benediktweb-normal-c2sc: "c2sc" off;
  --benediktweb-normal-dlig: "dlig" off;
  --benediktweb-normal-frac: "frac" off;
  --benediktweb-normal-lnum: "lnum" off;
  --benediktweb-normal-onum: "onum" off;
  --benediktweb-normal-pnum: "pnum" off;
  --benediktweb-normal-salt: "salt" off;
  --benediktweb-normal-smcp: "smcp" off;
  --benediktweb-normal-ss01: "ss01" off;
  --benediktweb-normal-ss02: "ss02" off;
  --benediktweb-normal-ss03: "ss03" off;
  --benediktweb-normal-ss04: "ss04" off;
  --benediktweb-normal-sups: "sups" off;
  --benediktweb-normal-tnum: "tnum" off; }

/* If class is applied, update custom property and
   apply modern font-variant-* when supported */
.benediktweb-normal-aalt {
  --benediktweb-normal-aalt: "aalt" on; }

.benediktweb-normal-c2sc {
  --benediktweb-normal-c2sc: "c2sc" on; }

.benediktweb-normal-dlig {
  --benediktweb-normal-dlig: "dlig" on; }

@supports (font-variant-ligatures: discretionary-ligatures) {
  .benediktweb-normal-dlig {
    --benediktweb-normal-dlig: "____";
    font-variant-ligatures: discretionary-ligatures; } }

.benediktweb-normal-frac {
  --benediktweb-normal-frac: "frac" on; }

@supports (font-variant-numeric: diagonal-fractions) {
  .benediktweb-normal-frac {
    --benediktweb-normal-frac: "____";
    font-variant-numeric: diagonal-fractions; } }

.benediktweb-normal-lnum {
  --benediktweb-normal-lnum: "lnum" on; }

@supports (font-variant-numeric: lining-nums) {
  .benediktweb-normal-lnum {
    --benediktweb-normal-lnum: "____";
    font-variant-numeric: lining-nums; } }

.benediktweb-normal-onum {
  --benediktweb-normal-onum: "onum" on; }

@supports (font-variant-numeric: oldstyle-nums) {
  .benediktweb-normal-onum {
    --benediktweb-normal-onum: "____";
    font-variant-numeric: oldstyle-nums; } }

.benediktweb-normal-pnum {
  --benediktweb-normal-pnum: "pnum" on; }

@supports (font-variant-numeric: proportional-nums) {
  .benediktweb-normal-pnum {
    --benediktweb-normal-pnum: "____";
    font-variant-numeric: proportional-nums; } }

.benediktweb-normal-salt {
  --benediktweb-normal-salt: "salt" on; }

.benediktweb-normal-smcp {
  --benediktweb-normal-smcp: "smcp" on; }

@supports (font-variant-caps: small-caps) {
  .benediktweb-normal-smcp {
    --benediktweb-normal-smcp: "____";
    font-variant-caps: small-caps; } }

.benediktweb-normal-ss01 {
  --benediktweb-normal-ss01: "ss01" on; }

.benediktweb-normal-ss02 {
  --benediktweb-normal-ss02: "ss02" on; }

.benediktweb-normal-ss03 {
  --benediktweb-normal-ss03: "ss03" on; }

.benediktweb-normal-ss04 {
  --benediktweb-normal-ss04: "ss04" on; }

.benediktweb-normal-sups {
  --benediktweb-normal-sups: "sups" on; }

@supports (font-variant-position: super) {
  .benediktweb-normal-sups {
    --benediktweb-normal-sups: "____";
    font-variant-position: super; } }

.benediktweb-normal-tnum {
  --benediktweb-normal-tnum: "tnum" on; }

@supports (font-variant-numeric: tabular-nums) {
  .benediktweb-normal-tnum {
    --benediktweb-normal-tnum: "____";
    font-variant-numeric: tabular-nums; } }

/* Apply current state of all custom properties
   whenever a class is being applied */
.benediktweb-normal-aalt,
.benediktweb-normal-c2sc,
.benediktweb-normal-dlig,
.benediktweb-normal-frac,
.benediktweb-normal-lnum,
.benediktweb-normal-onum,
.benediktweb-normal-pnum,
.benediktweb-normal-salt,
.benediktweb-normal-smcp,
.benediktweb-normal-ss01,
.benediktweb-normal-ss02,
.benediktweb-normal-ss03,
.benediktweb-normal-ss04,
.benediktweb-normal-sups,
.benediktweb-normal-tnum {
  font-feature-settings: var(--benediktweb-normal-aalt), var(--benediktweb-normal-c2sc), var(--benediktweb-normal-dlig), var(--benediktweb-normal-frac), var(--benediktweb-normal-lnum), var(--benediktweb-normal-onum), var(--benediktweb-normal-pnum), var(--benediktweb-normal-salt), var(--benediktweb-normal-smcp), var(--benediktweb-normal-ss01), var(--benediktweb-normal-ss02), var(--benediktweb-normal-ss03), var(--benediktweb-normal-ss04), var(--benediktweb-normal-sups), var(--benediktweb-normal-tnum); }

/* Colors
-------------------------------------------------- */
:root {
  --dark: 34, 34, 34;
  --light: 236, 231, 225;
  --accent: 239, 0, 56; }

svg {
  --dark-hex: #222222;
  --light-hex: #ECE7E1;
  --accent-hex: #ff00ff; }

/* Site
-------------------------------------------------- */
html {
  height: 101%;
  font-family: 'BenediktCritical', 'Benedikt', Georgia, serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 16px;
  scroll-behavior: smooth; }

body {
  margin: 0;
  line-height: 1.5em;
  background-color: #222222;
  background-color: rgba(var(--dark), 1);
  color: #ECE7E1;
  color: rgba(var(--light), 1);
  font-synthesis: none; }

html, body {
  max-width: 100%;
  overflow-x: hidden; }

@media screen and (min-width: 40rem) {
  body {
    font-size: 1.25em; } }

/* Pix
-------------------------------------------------- */
img {
  display: block;
  max-width: 100%; }

/* Links
-------------------------------------------------- */
a {
  color: #222222;
  color: rgba(var(--dark), 1);
  text-decoration: none;
  transition: color .3s;
  font-style: italic; }

a:hover {
  color: #EF0038;
  color: rgba(var(--accent), 1); }

/* Headlines
-------------------------------------------------- */
h1 {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.25em;
  margin-left: -0.05em;
  -webkit-hyphens: manual;
      -ms-hyphens: manual;
          hyphens: manual; }

h1 + * {
  margin-top: 4rem; }

@media screen and (min-width: 48em) {
  h1 {
    font-size: 3em;
    font-weight: 200;
    margin-bottom: 0.25em; } }

@media screen and (min-width: 68em) {
  h1 {
    font-size: 4em; }
  h1 + * {
    margin-top: 10rem; } }

h2 {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1em;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none; }

h3 {
  font-size: 1.4em;
  line-height: 1.5em;
  margin-bottom: .5em; }

h4 {
  font-size: 1.125em;
  line-height: 1.5em;
  margin-bottom: .5em; }

h1 a, h2 a, h3 a, h4 a {
  color: inherit;
  border: 0 !important; }

@supports (hyphenate-limit-last: always) {
  h1, h2, h3, h4 {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always; } }

/* Deprecated
-------------------------------------------------- */
/* Header
-------------------------------------------------- */
.header {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 6.5rem 2rem 2rem 2rem;
  overflow: hidden;
  background-color: #222222;
  background-color: rgba(var(--dark), 1);
  transition: height 0.3s;
  display: flex;
  flex-flow: column nowrap;
  left: auto;
  right: auto; }

.logo {
  position: fixed;
  z-index: 3;
  top: 1rem; }

.logo svg {
  width: 5em;
  height: auto; }

.logo .subline {
  color: #EF0038;
  color: rgba(var(--accent), 1);
  font-style: italic;
  width: 100%;
  flex-flow: row nowrap;
  position: absolute;
  top: 170px;
  display: none;
  opacity: 0;
  transition: opacity 750ms ease-in-out; }

.logo .subline.visible {
  opacity: 1; }

.logo .subline span {
  margin-right: 1rem; }

#fixie {
  width: 100%;
  height: 4.5rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.9); }

main section {
  scroll-margin-top: 5rem; }

@media screen and (min-width: 40em) {
  .header {
    flex-flow: row nowrap;
    align-items: flex-end;
    height: 150px;
    position: static;
    padding: 1.5rem; }
  .logo .subline {
    display: flex; }
  #fixie {
    display: none !important; }
  main section {
    scroll-margin-top: 1rem; }
  .logo {
    position: static; }
  .logo svg {
    width: 12rem; } }

/* Navigation
-------------------------------------------------- */
nav.main-navigation {
  font-family: 'BenediktCritical', 'Benedikt', Georgia, serif;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  flex-flow: column nowrap;
  margin-left: -0.25rem; }

nav.main-navigation a {
  font-size: 1em;
  color: #ECE7E1;
  color: rgba(var(--light), 1);
  height: auto;
  font-style: normal;
  padding: .5em; }

nav.main-navigation a:hover,
nav.main-navigation a:focus,
nav.main-navigation a:active {
  background-color: rgba(var(--light), 0.1);
  border-radius: 0.25em; }

#scrolltop {
  position: fixed;
  z-index: 4;
  top: 0.2rem;
  right: 1.5rem;
  padding: 1.5rem;
  width: 1rem;
  height: 1rem;
  display: none; }

#scrolltop:before {
  color: white;
  content: '\2630'; }

@media screen and (min-width: 40em) {
  #scrolltop {
    display: none !important; }
  nav.main-navigation {
    text-align: right !important;
    flex-flow: row nowrap;
    align-items: flex-end; }
  nav.main-navigation a {
    margin: 0 1em 0.1em 1em;
    border: 0;
    padding: 0;
    font-size: 0.9em;
    width: auto !important; }
  nav.main-navigation a.drafts {
    color: rgba(236, 231, 225, 0.5);
    color: rgba(var(--light), 0.5); }
  nav.main-navigation a:hover {
    color: #ECE7E1;
    color: rgba(var(--light), 1);
    background-color: transparent;
    text-decoration: none;
    border-radius: 0; }
  nav.main-navigation a:focus,
  nav.main-navigation a:active {
    background-color: none;
    border-radius: 0; }
  nav.main-navigation a.active {
    position: relative;
    top: -0.5em;
    border-bottom: 2px solid #EF0038;
    border-bottom: 2px solid rgba(var(--accent), 1); } }

/* Language Navigation
-------------------------------------------------- */
nav.languages {
  font-family: 'BenediktCritical', 'Benedikt', Georgia, serif;
  position: fixed;
  z-index: 3;
  right: 2rem;
  top: 1.25rem;
  padding: 0.47rem 2rem 0.5rem 1rem;
  border-radius: 2px 0 0 2px; }

nav.languages > ul > li {
  list-style: none;
  display: inline; }

nav.languages > ul > li:last-of-type:before {
  content: "|";
  color: white;
  margin: 0 0.25rem; }

nav.languages > ul > li.active a {
  color: #EF0038;
  color: rgba(var(--accent), 1);
  font-weight: bold; }

nav.languages a, nav.languages a:hover, nav.languages a:focus, nav.languages a:active {
  color: white;
  font-weight: normal; }

@media screen and (min-width: 40em) {
  nav.languages {
    position: fixed;
    z-index: 1;
    right: 0;
    top: 200px;
    background-color: #EF0038;
    background-color: rgba(var(--accent), 1);
    padding: 1em 1em 1em 1em;
    border-radius: 2px 0 0 2px; }
  nav.languages > ul > li {
    display: list-item;
    position: relative; }
  nav.languages > ul > li:last-of-type:before {
    content: none;
    margin: 0; }
  nav.languages > ul > li.active:before {
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTUuOCAzMS41IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMjIyMjIyIiBwb2ludHM9IjAsMCAxNSwxNSAwLDMwIi8+PC9zdmc+);
    width: 0.45rem;
    position: absolute;
    left: -0.75rem;
    top: 0.1rem; }
  nav.languages > ul > li.active a {
    color: #222222;
    color: rgba(var(--dark), 1);
    font-weight: normal; }
  nav.languages a, nav.languages a:hover, nav.languages a:focus, nav.languages a:active {
    color: #222222;
    color: rgba(var(--dark), 1);
    font-weight: normal; } }

/* Main Styles
-------------------------------------------------- */
main {
  width: 100%;
  background-color: #ECE7E1;
  background-color: rgba(var(--light), 1);
  color: #222222;
  color: rgba(var(--dark), 1);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding-bottom: 10rem; }

.intro {
  height: 30vh;
  width: 100vw;
  background-size: cover;
  background-position: center; }

@media (min-width: 64rem) {
  .intro {
    height: 50vh; } }

.intro.bottom {
  background-position: bottom center; }

.intro.top {
  background-position: top center; }

.content {
  padding: 2rem 1.5rem;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  text-align: left; }

@media (min-width: 42rem) {
  .content {
    margin: 6rem auto;
    padding: 0 1.5rem; } }

.content p {
  font-variant-numeric: oldstyle-nums;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  -moz-hyphens: auto;
  -moz-hyphenate-limit-chars: 6 3 3;
  -moz-hyphenate-limit-lines: 2;
  -moz-hyphenate-limit-last: always;
  -moz-hyphenate-limit-zone: 8%;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: 6 3 3;
  -ms-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-last: always;
  -ms-hyphenate-limit-zone: 8%;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%; }

@media (min-width: 62rem) {
  .content p {
    -webkit-hyphens: none;
        -ms-hyphens: none;
            hyphens: none; } }

main section,
main aside {
  max-width: 62rem; }

main .teasertext {
  max-width: 62rem; }

section.bodytext {
  margin-bottom: 3em; }

section.bodytext p {
  margin-top: 1em; }

/* List Styles */
section.bodytext ol,
section.bodytext ul {
  max-width: 40rem;
  margin: 1rem 0 0 0; }

section.bodytext ol li {
  margin: 1rem 0 0 1rem; }

section.bodytext ul li {
  margin: 0.5rem 0 0 1rem; }

@media (min-width: 40rem) {
  section.bodytext ul,
  section.bodytext ol {
    margin-left: 5rem; } }

section.code {
  margin-bottom: 3em; }

figure.blockquote {
  margin: 4rem 0; }

blockquote {
  padding-left: 0.5rem;
  border-left: 2px solid;
  border-color: rgba(var(--dark), 1);
  font-style: italic; }

main section.full-width {
  max-width: none; }

section.full-width {
  width: 100vw;
  position: relative;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important; }

@media (max-width: 78rem) {
  section.full-width {
    padding-left: 1.5rem;
    padding-right: 1.5rem; } }

@media (min-width: 78rem) {
  section.full-width > * {
    margin-left: auto !important;
    margin-right: auto !important; } }

section.full-width > * {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important; }

@media (min-width: 40rem) {
  section.full-width > * {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
    max-width: 78rem; }
  section.figure.full-width {
    margin-top: 8rem;
    margin-bottom: 8rem; } }

main hr {
  margin: 3em 0em 1em 0em;
  height: 2px;
  background-color: #222222;
  background-color: rgba(var(--dark), 1); }

/* Teaser Styles
-------------------------------------------------- */
.teaser-item {
  background-color: rgba(34, 34, 34, 0.1);
  background-color: rgba(var(--dark), 0.1);
  margin: 2rem 0;
  max-width: 62rem; }

.teaser-item figure {
  margin: 0;
  flex: 0 0 300px;
  position: relative;
  overflow: hidden;
  background-color: #222222;
  background-color: rgba(var(--dark), 1); }

.teaser-item figure img {
  transition: all 0.3s; }

.teaser-item figure:hover img {
  transform: scale(1.1); }

.teaser-text {
  padding: 0.5rem;
  line-height: 1.5rem; }

.teaser-text h2 {
  font-size: 1rem;
  font-style: normal !important; }

.teaser-text a.author-link {
  font-style: italic;
  font-size: 0.9rem;
  /*   text-transform: uppercase; */
  font-weight: bold;
  /*   margin-right: 1em; */ }

.teaser-text a.read-more {
  font-style: italic;
  font-size: 0.9rem;
  font-weight: bold;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none; }

.teaser-text p {
  font-size: 1rem;
  display: inline; }

@media screen and (min-width: 40rem) {
  .teaser-item {
    display: flex; }
  .teaser-item figure {
    width: 100%;
    margin-right: 1rem; }
  .teaser-text {
    max-height: 180px;
    text-overflow: ellipsis;
    overflow: hidden; } }

/* Tiny Teaser Styles
-------------------------------------------------- */
ul.related-articles,
ul.font-feature {
  list-style: none;
  display: flex;
  flex-flow: column nowrap;
  margin: 4rem 0; }

ul.related-articles li,
ul.font-feature li {
  margin: 1rem 0 1rem 0; }

ul.related-articles figure,
ul.font-feature figure {
  position: relative;
  overflow: hidden; }

ul.related-articles figcaption {
  padding: 0.5rem;
  margin: 0;
  font-size: 1em;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  background-color: rgba(34, 34, 34, 0.2);
  background-color: rgba(var(--dark), 0.2); }

ul.related-articles figcaption a {
  color: #222222;
  color: rgba(var(--dark), 1); }

@media screen and (min-width: 40rem) {
  ul.related-articles,
  ul.font-feature {
    flex-flow: row nowrap;
    margin: 4rem 0; }
  ul.related-articles li,
  ul.font-feature li {
    margin: 0 0 0 1.5rem; }
  ul.related-articles li:first-of-type,
  ul.font-feature li:first-of-type {
    margin-left: 0; }
  ul.related-articles figcaption {
    font-size: 0.9em;
    height: 5.25rem; } }

/* Fontspring Teaser
-------------------------------------------------- */
.teaser-item.fontspring {
  border: 2px solid rgba(var(--dark), 1);
  background-color: transparent;
  margin-top: 6rem; }

.teaser-item.fontspring figure {
  padding: 1.2rem 1.2rem 2.1rem 1.2rem;
  background-color: transparent; }

.teaser-item.fontspring figure:hover img {
  transform: none; }

.teaser-item.fontspring figure img {
  transition: none; }

a:hover .teaser-item.fontspring {
  color: #222222;
  color: rgba(var(--dark), 1); }

.teaser-item.fontspring {
  transition: all 0.3s; }

.teaser-item.fontspring:hover {
  transform: scale(1.025); }

.teaser-item.fontspring .teaser-text {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding: 0; }

@media screen and (min-width: 40rem) {
  .teaser-item.fontspring .teaser-text {
    margin-bottom: 0; } }

.teaser-item.fontspring .teaser-text h2 {
  font-size: 2rem;
  margin-left: 1.2rem;
  line-height: 1.2;
  font-style: italic !important;
  font-weight: normal !important;
  text-transform: none !important; }

/* Footer
-------------------------------------------------- */
@-webkit-keyframes example {
  0% {
    letter-spacing: 0; }
  100% {
    letter-spacing: 30px; } }
@keyframes example {
  0% {
    letter-spacing: 0; }
  100% {
    letter-spacing: 30px; } }

footer {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 1.5em;
  font-size: 1rem;
  line-height: 1.2em;
  color: #ECE7E1;
  color: rgba(var(--light), 1); }

footer section {
  font-family: 'BenediktCritical', 'Benedikt', Georgia, serif;
  font-size: .8em;
  color: #ECE7E1;
  color: rgba(var(--light), 1);
  display: block;
  width: 100%; }

footer a {
  border: 0;
  color: #ECE7E1;
  color: rgba(var(--light), 1);
  font-style: normal; }

footer a:focus, footer a:hover, footer a:active {
  color: #EF0038;
  color: rgba(var(--accent), 1); }

/* OpenType Features */
.of-frac {
  /* Deprecated, wird das noch irgendwo benutzt?*/
  font-feature-settings: "frac"; }

.no-hyphenation {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important; }

.hyphenate {
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important; }

/* Copyright & Impressum
-------------------------------------------------- */
section.copyright-impressum {
  margin: 4rem 0 2rem 0; }

/* Further Imports
-------------------------------------------------- */
/* User Interface Styles
-------------------------------------------------- */
/* Fake Butons*/
a.button {
  font-size: 1em;
  padding: 0.5em 0.4em 0.4em 0.4em;
  font-family: 'BenediktCritical', 'Benedikt', Georgia, serif;
  font-weight: normal;
  font-style: italic;
  color: #ECE7E1;
  color: rgba(var(--light), 1);
  background-color: #222222;
  background-color: rgba(var(--dark), 1);
  border-radius: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  border-bottom: 2px solid #222222;
  border-bottom: 2px solid rgba(var(--dark), 1); }

a.button:hover, a.button:active, a.button:focus {
  border-bottom: 2px solid #EF0038;
  border-bottom: 2px solid rgba(var(--accent), 1); }

a.button.outline {
  color: #222222;
  color: rgba(var(--dark), 1);
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #222222;
  border: 2px solid rgba(var(--dark), 1);
  padding: 0.4em 0.4em 0.5em 0.4em; }

/* Jump To Top Button */
.jumptotop {
  display: inline-block;
  margin-top: 5rem; }

/* Fontspring Button Styling -- deprecated? */
.fontspring input[type=button] {
  font-size: 1em;
  padding: 0.5em 0.4em 0.4em 0.4em;
  font-family: 'BenediktCritical', 'Benedikt', Georgia, serif;
  font-weight: bold;
  font-style: italic;
  color: #222222;
  color: rgba(var(--dark), 1);
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1);
  border-radius: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer; }

/* Range input (Slider) */
input[type=range] {
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  width: 100%;
  /* Specific width is required for Firefox. */
  background: transparent;
  /* Otherwise white in Chrome */ }

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; }

input[type=range]:focus {
  outline: none;
  /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ }

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent; }

/* Track Thumb */
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px;
  /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ }

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer; }

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer; }

/* Track Styling */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1);
  border-radius: 1.3px; }

input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1); }

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1);
  border-radius: 1.3px; }

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent; }

input[type=range]::-ms-fill-lower {
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1);
  border-radius: 2.6px; }

input[type=range]:focus::-ms-fill-lower {
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1); }

input[type=range]::-ms-fill-upper {
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1);
  border-radius: 2.6px; }

input[type=range]:focus::-ms-fill-upper {
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1); }

/* Newsletter
-------------------------------------------------- */
footer h2 {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: bold;
  font-variant: small-caps;
  text-transform: lowercase;
  color: #EF0038;
  color: rgba(var(--accent), 1); }

.mc_layout-wrapper {
  display: flex;
  flex-flow: column nowrap; }

.mc_layout-wrapper > div {
  margin-right: 1.5rem;
  width: 100%; }

.mc-field-group {
  display: flex;
  align-items: flex-end; }

.mc-field-group label {
  display: block;
  color: rgba(236, 231, 225, 0.7);
  color: rgba(var(--light), 0.7); }

#mce-EMAIL {
  margin-top: 0.25rem;
  width: 100%; }

.mc-email-wrapper {
  flex-grow: 1; }

#mergeRow-gdpr {
  margin-top: 0.5rem; }

.content__gdprLegal {
  padding-top: 1.1rem;
  color: rgba(236, 231, 225, 0.7);
  color: rgba(var(--light), 0.7); }

input:focus,
select:focus,
textarea:focus,
button:focus,
input:active {
  outline: none;
  border-bottom: 2px solid #ef0038 !important;
  border-bottom: 2px solid rgba(var(--accent), 1) !important; }

input[type=range]:active,
input[type=range]:focus {
  border-bottom: none !important; }

.newsletter form input:not([type=submit]) {
  font-size: 1.5em;
  border-bottom: 2px solid rgba(34, 34, 34, 0.5);
  border-bottom: 2px solid rgba(var(--dark), 0.5);
  padding: 0.25em;
  font-family: 'Benedikt';
  font-style: italic;
  font-weight: bold;
  color: #222222;
  color: rgba(var(--dark), 1);
  outline: none;
  border-radius: 2px; }

.newsletter form input[type=submit] {
  font-size: 1.2em;
  padding: 0.5em 0.4em 0.4em 0.4em;
  font-family: 'Benedikt';
  font-weight: bold;
  font-variant: small-caps;
  text-transform: lowercase;
  color: #222222;
  color: rgba(var(--dark), 1);
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1);
  border-radius: 2px;
  margin-left: 1rem;
  border-bottom: 2px solid rgba(34, 34, 34, 0.5);
  border-bottom: 2px solid rgba(var(--dark), 0.5);
  -webkit-appearance: none;
  -moz-appearance: none; }

.newsletter form input[type=checkbox] {
  width: auto;
  margin-right: 0.5rem; }

@media screen and (min-width: 40em) {
  .mc_layout-wrapper {
    flex-flow: row nowrap; }
  .mc_layout-wrapper > div:nth-of-type(1) {
    width: 35%; }
  .mc_layout-wrapper > div:nth-of-type(2) {
    width: 65%; }
  .content__gdprLegal {
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2; } }
/*# sourceMappingURL=index.css.map */