@font-face {
  font-family: FF Real Text;
  src: url('../fonts/4da4d9f1-291e-4765-8ce9-08233d84363b.woff2') format("woff2"), url('../fonts/10dfedc6-d29f-4898-869d-b11b5f02e183.eot') format("embedded-opentype"), url('../fonts/5d23a796-8edf-40f1-9413-7149b95f6c86.woff') format("woff"), url('../fonts/efc54b8c-3c70-4414-af76-286facfe2377.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}

@font-face {
  font-family: FF Real Text;
  src: url('../fonts/4620fa12-e6c1-4cfd-807f-ee846d1d584e.woff2') format("woff2"), url('../fonts/8220546b-6b60-4932-8597-13d83059fb65.eot') format("embedded-opentype"), url('../fonts/afb32918-ef3b-4d26-8426-d2e439b66e18.woff') format("woff"), url('../fonts/7a1d3408-c332-4bf0-80a8-fdd17cd1eda5.ttf') format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: auto;
}

@font-face {
  font-family: FF Real Text;
  src: url('../fonts/39f49a4b-beea-4010-8dac-4751c97d970e.woff2') format("woff2"), url('../fonts/021910dc-dbb6-4eec-bba1-ca42437b312e.eot') format("embedded-opentype"), url('../fonts/f35a6c8e-ddb0-49b0-a45a-50d41290dad6.woff') format("woff"), url('../fonts/477a2675-cd10-4499-bfea-33721e3734b4.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}

@font-face {
  font-family: FF Real Text;
  src: url('../fonts/579da65c-f33b-4204-9835-5f6996111906.woff2') format("woff2"), url('../fonts/e8dca282-0511-426a-b1ab-3ddcf289a494.eot') format("embedded-opentype"), url('../fonts/d226824b-db98-4db3-831b-63446b91c191.woff') format("woff"), url('../fonts/08d3aac8-79cc-449b-9e8b-16011a97e67e.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: auto;
}

@font-face {
  font-family: FF Real Text;
  src: url('../fonts/e3b294c1-67f2-4adf-8c20-ccd2bd51fe63.woff2') format("woff2"), url('../fonts/93d4538b-031e-4318-b2cc-d04959ac5324.eot') format("embedded-opentype"), url('../fonts/58d5155c-437f-46ec-bca6-29a6101cf606.woff') format("woff"), url('../fonts/be9cdbcc-eac4-427e-87ad-2f8db4cc3f36.ttf') format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: auto;
}

:root {
  --white: white;
  --black: black;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: bold;
  line-height: 36px;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
}

p {
  margin-bottom: 10px;
}

a:hover {
  color: #fe5442;
}

ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

blockquote {
  color: #aeaeae;
  margin-bottom: 10px;
  padding: 0;
  font-size: 18px;
  line-height: 22px;
}

.body {
  background-color: #f8f8f8;
}

.body.dark {
  background-color: #38373d;
}

.body.midnightblue {
  background-color: #2d3642;
}

.header {
  margin-bottom: 180px;
  padding-top: 70px;
}

.content {
  margin-bottom: 272px;
}

.side-column {
  float: left;
  clear: left;
  width: 20%;
  margin-right: 4%;
  padding-top: 4px;
  position: relative;
}

.projects {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin-top: 89px;
}

.main-column {
  float: left;
  width: 64%;
}

.h1 {
  float: none;
  color: #4a4a4a;
  width: 74%;
  max-width: 620px;
  margin-top: 0;
  margin-bottom: 46px;
  font-family: FF Real Text, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 40px;
}

.h1.big-white {
  color: #f8f8f8;
  letter-spacing: .4px;
  margin-left: 24%;
  font-size: 46px;
  line-height: 60px;
}

.h1.project {
  margin-left: 24%;
}

.h1.project.white {
  color: #f8f8f8;
}

.text-span {
  color: #aeaeae;
  text-decoration: line-through;
}

.teaser {
  margin-bottom: 45px;
}

.chapter {
  color: #aeaeae;
  text-align: right;
  letter-spacing: .1px;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
}

.chapter.smallcaps {
  color: #a8a8a8;
  letter-spacing: .4px;
}

.chapter.smallcaps.lightblue {
  color: #8ba0ae;
}

.link-list {
  color: #a8a8a8;
  text-align: right;
  letter-spacing: .3px;
  margin-bottom: 46px;
  padding-left: 0;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  line-height: 40px;
}

.link-list.lightblue {
  color: #8ba0ae;
}

.small-link {
  color: #a8a8a8;
  border-bottom: 1px dashed #faa59c;
  padding-bottom: 2px;
  text-decoration: none;
}

.small-link:hover {
  color: #4a4a4a;
  border-bottom: 1px dashed #fe5442;
}

.small-link.lightblue {
  color: #8ba0ae;
  border-bottom-color: #66a3cc;
}

.small-link.lightblue:hover {
  color: #f8f8f8;
  border-bottom-color: #66a3cc;
}

.small-link.pink {
  border-bottom-color: #f65c96;
}

.small-link._404:hover {
  color: #fe5442;
}

.small-link.yellow {
  border-bottom-color: #ffbf00;
}

.small-link.red {
  border-bottom-color: #ff828f;
}

.small-link.white:hover {
  color: #f8f8f8;
}

.small-link.cyan {
  border-bottom-color: #95bce6;
}

.smallcaps {
  text-transform: lowercase;
}

.pointy-arrow {
  float: left;
  padding-top: 14px;
}

.portrait {
  background-image: url('../images/julia-hilt-portrait.jpg');
  background-position: 100% 54%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 640px;
  position: relative;
}

.colorblock {
  background-color: #fe5442;
  width: 65%;
  height: 236px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

.colorblock-small {
  float: none;
  clear: none;
  background-color: #fe5442;
  width: 20%;
  height: 77px;
  display: block;
}

.about-me {
  padding-top: 50px;
}

.paragraph {
  float: left;
  color: #4a4a4a;
  width: 50%;
  max-width: 596px;
  font-family: FF Real Text, sans-serif;
  font-size: 20px;
  line-height: 40px;
}

.paragraph.white {
  color: #f8f8f8;
}

.marker {
  background-color: #f9e0dd;
  padding: 1px 3px 3px 4px;
}

.marker.red {
  background-color: #f3d8db;
}

.marker.white {
  background-color: #545358;
}

.marker.lightblue {
  background-color: #465b73;
}

.marker.cyan {
  background-color: #dce8f5;
}

.marker.pink {
  background-color: #ffe0ec;
}

.marker.yellow {
  background-color: #fdedbb;
}

.marker.nopaddingright {
  padding-right: 0;
}

.marker.nopaddingleft {
  padding-left: 0;
}

.text-link {
  color: #fe5442;
  font-style: italic;
  text-decoration: none;
}

.text-link:hover {
  border-bottom: 1px dashed #faa59c;
}

.text-link.red {
  color: #d0172a;
}

.text-link.red:hover {
  border-bottom-color: #ff828f;
}

.text-link.white {
  color: #f8f8f8;
}

.text-link.white:hover {
  border-bottom-color: #f8f8f8;
}

.text-link.cyan {
  color: #3c8ee5;
}

.text-link.cyan:hover {
  border-bottom-color: #95bce6;
}

.text-link.pink {
  color: #f65c96;
}

.text-link.pink:hover {
  border-bottom-color: #f65c96;
}

.text-link.yellow {
  color: #ffbf00;
}

.text-link.yellow:hover {
  border-bottom-color: #ffbf00;
}

.awards {
  margin-top: 90px;
  margin-bottom: 290px;
}

.award-text {
  float: none;
  color: #a8a8a8;
  letter-spacing: .3px;
  margin-left: 8%;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  line-height: 30px;
}

.award-badge {
  float: none;
  margin-left: -5px;
}

.award-badge.height {
  margin-bottom: -10px;
}

.footer {
  background-color: #ebebeb;
  height: 77px;
}

.footer.black {
  background-color: #2a292e;
}

.footer.blackblue {
  background-color: #232a33;
}

.footer._404 {
  background-color: #0000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.footer-div {
  width: 50%;
  max-width: 596px;
  margin-left: 24%;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

.footer-text {
  float: left;
  color: #a8a8a8;
  letter-spacing: .3px;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  line-height: 40px;
}

.footer-text.lightblue {
  color: #8ba0ae;
}

.signet-tiny {
  float: right;
  margin-top: 9px;
}

.h2 {
  float: left;
  color: #f8f8f8;
  width: 58%;
  max-width: 460px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 4%;
  font-family: FF Real Text, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 40px;
}

.bold-text {
  font-weight: 600;
}

.signet-linkblock {
  float: left;
  width: 20%;
  padding-top: 10px;
}

.image {
  float: right;
}

.about-teaser {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

.signet {
  float: none;
}

.signet-div {
  float: left;
  width: 20%;
}

.portrait-text {
  width: 100%;
  height: 236px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.teaser-text {
  float: left;
  color: #fe5442;
  margin-left: 10px;
  font-family: FF Real Text, sans-serif;
  font-size: 20px;
  font-style: italic;
  line-height: 40px;
  display: block;
}

.teaser-link {
  margin-top: 3px;
  text-decoration: none;
}

.chemistry {
  border-radius: 4px;
  width: 100%;
  padding-bottom: 25%;
  position: relative;
}

.earth {
  border-radius: 4px;
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}

.shadow-orange {
  background-color: #ff8000;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 25%;
  position: absolute;
  inset: 0;
}

.chemistrylab {
  background-image: url('../images/teaser-chemielabor-neu_1.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 25%;
  position: absolute;
  inset: 0;
}

.chemistrylab.en {
  background-image: url('../images/teaser-chemielabor_en.jpg');
  background-position: 50% 70%;
}

.shadow-blue {
  background-color: #66a3cc;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 100%;
  position: absolute;
  inset: 0;
}

.byebyeearth {
  background-image: url('../images/teaser-byebye-earth_1.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 100%;
  position: absolute;
  inset: 0;
}

.kompendium {
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: relative;
}

.shadow-dark {
  background-color: #aeaeae;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: absolute;
  inset: 0;
}

.typo-kompendium {
  background-image: url('../images/teaser-typo-kompendium.jpg');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: absolute;
  inset: 0;
}

.reanimation {
  border-radius: 4px;
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}

.todo-list-app {
  border-radius: 4px;
  width: 100%;
  padding-bottom: 25%;
  position: relative;
}

.hangul {
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: relative;
}

.shadow-red {
  background-color: #d62436;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: absolute;
  inset: 0;
}

.shadow-yellow {
  background-color: #f5d451;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 25%;
  position: absolute;
  inset: 0;
}

.shadow-pink {
  background-color: #49a6f2;
  background-image: linear-gradient(#f65c96, #f65c96);
  border-radius: 4px;
  width: 100%;
  padding-bottom: 100%;
  position: absolute;
  inset: 0;
}

.reanimationsapp {
  background-image: url('../images/teaser-reanimationsapp.jpg');
  background-position: 73%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 100%;
  position: absolute;
  inset: 0;
}

.improving-feedback {
  background-image: url('../images/teaser-todoist.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 25%;
  position: absolute;
  inset: 0;
}

.hangul-academy {
  background-image: url('../images/teaser-hangul.jpg');
  background-position: 0;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: absolute;
  inset: 0;
}

.teaser-block._404 {
  margin-left: 24%;
}

.award-list {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  max-width: 596px;
  margin-bottom: 50px;
  margin-left: 24%;
  display: flex;
}

.text-span-2 {
  font-weight: 500;
}

.signet-link {
  float: right;
  color: #fe5442;
}

.signet-link:hover {
  color: #fe7466;
}

.impressum {
  margin-bottom: 290px;
  padding-left: 24%;
}

.italic-text-2, .italic-text-3 {
  color: #fe5442;
}

.privacy {
  color: #4a4a4a;
  width: 50%;
  max-width: 596px;
  font-family: FF Real Text, sans-serif;
  font-size: 20px;
  line-height: 40px;
}

.privacy h2 {
  margin-bottom: 30px;
  font-size: 26px;
  font-weight: 400;
  line-height: 40px;
}

.privacy h4 {
  color: #fe5442;
  margin-top: 40px;
  margin-bottom: 5px;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 40px;
}

.privacy ul {
  padding-left: 26px;
}

.privacy blockquote {
  color: #aeaeae;
  letter-spacing: .4px;
  border-left-style: none;
  font-size: 16px;
  line-height: 40px;
}

.privacy a {
  color: #4a4a4a;
  border-bottom: 1px dashed #fe5442;
  text-decoration: none;
}

.privacy a:hover {
  color: #fe5442;
}

.bg-image {
  background-color: #000;
  background-image: url('../images/404-the-naked-gun.gif');
  background-repeat: no-repeat;
  background-size: cover;
}

._404-section {
  background-color: #00000080;
  width: 100%;
  height: 100%;
  position: fixed;
}

._404-header {
  text-align: right;
  width: 20%;
  margin-top: 70px;
  margin-bottom: 100px;
}

.hangul-hero {
  background-color: #da283c;
  background-image: url('../images/hero-hangul.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 620px;
  margin-top: 110px;
}

.image-description {
  float: left;
  clear: left;
  color: #a8a8a8;
  text-align: right;
  letter-spacing: .3px;
  width: 20%;
  margin-bottom: -13px;
  padding-left: 8%;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  line-height: 40px;
  position: absolute;
  inset: auto auto 0% 0%;
}

.image-description.grid {
  width: auto;
  margin-left: 0%;
  margin-right: 0%;
  padding-left: 0%;
  position: static;
}

.image-description.darkblue {
  color: #2d3642;
  margin-bottom: 20px;
}

.image-description.lunex {
  margin-bottom: 121px;
}

.image-description.impfpass {
  width: 20%;
  margin-bottom: .75%;
  padding-bottom: 0%;
  position: absolute;
  bottom: 1%;
}

.image-description.reisen {
  bottom: 4%;
}

.image-description.cards {
  bottom: 1.5%;
}

.image-description.familien {
  margin-bottom: 4.5%;
}

.image-description.lightblue {
  color: #8ba0ae;
}

.image-description.cpr-text {
  bottom: 4%;
}

.project-gallery {
  margin-top: 110px;
  position: relative;
}

.project-gallery.lightblue {
  background-color: #7ea3bb;
}

.project-gallery.applewatch {
  background-image: url('../images/reanimation_apple-watch.jpg');
  background-position: 75%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 580px;
}

.project-gallery.impfpassapp {
  background-color: #fcda62;
  background-image: url('../images/impfapp-overview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 700px;
}

.project-gallery.impfpass {
  margin-top: 70px;
  margin-bottom: -38px;
  padding-bottom: 0%;
}

.project-gallery.impfstatus {
  margin-top: 65px;
  margin-bottom: -27px;
}

.project-gallery.vui {
  background-color: #07f;
  background-image: url('../images/reanimation_screensoverview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 792px;
}

.project-gallery.cpr {
  margin-top: 70px;
  margin-bottom: -38px;
  padding-bottom: 0%;
}

.project-gallery.todoist {
  background-color: #e34332;
  background-image: url('../images/todoist-overview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 792px;
}

.project-gallery.multi-select-mode {
  margin-top: 65px;
  margin-bottom: -27px;
}

.project-text {
  margin-top: 110px;
}

.highlight {
  font-weight: 500;
}

.highlight.red {
  color: #d0172a;
}

.highlight.lightblue {
  color: #66a3cc;
}

.highlight.cyan {
  color: #3c8ee5;
}

.highlight.pink {
  color: #f65c96;
}

.highlight.coral {
  color: #fe5442;
}

.highlight.yellow {
  color: #ffbf00;
}

.project-footer {
  background-color: #f0f0f0;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  margin-top: 200px;
  display: flex;
}

.project-footer.black {
  background-color: #333238;
}

.project-footer.darkblue {
  background-color: #28303b;
}

.sideblock {
  flex: 1;
}

.sideblock-project {
  grid-row-gap: 30px;
  grid-template-columns: 1fr;
  width: 78%;
  max-width: 454px;
  margin-top: 10%;
  margin-bottom: 16%;
}

.sideblock-project.left {
  float: left;
  margin-left: 10%;
}

.sideblock-project.right {
  float: right;
  margin-right: 10%;
}

.linkblock-text {
  text-decoration: none;
}

.prev-project {
  color: #aeaeae;
  text-align: right;
  font-family: FF Real Text, sans-serif;
}

.prev-project.smallcaps {
  color: #a8a8a8;
  letter-spacing: .4px;
  font-size: 16px;
  line-height: 35px;
}

.prev-project.smallcaps.lightblue {
  color: #8ba0ae;
}

.project-name {
  color: #4a4a4a;
  text-align: right;
  letter-spacing: .1px;
  font-family: FF Real Text, sans-serif;
  font-size: 26px;
  line-height: 30px;
}

.project-name.arrow {
  float: left;
}

.project-name.arrow.right {
  float: right;
}

.project-name.right {
  float: left;
}

.project-name.white {
  color: #efefef;
}

.shadow-coral {
  background-color: #fe5442;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 61%;
  position: absolute;
  inset: 0;
}

.linkblock-pic {
  padding-bottom: 61%;
  position: relative;
}

.project-pic {
  border-radius: 4px;
  position: absolute;
  inset: 0;
}

.next-project {
  color: #aeaeae;
  letter-spacing: .4px;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  line-height: 35px;
}

.next-project.smallcaps {
  color: #a8a8a8;
}

.next-project.smallcaps.lightblue {
  color: #8ba0ae;
}

.video-block {
  float: left;
  width: 55%;
  position: relative;
}

.video-block.rea-prototyp {
  width: 40%;
}

.video-block.familienfunktion {
  width: 44%;
  margin-left: -5%;
}

.video-block.reisen {
  width: 30%;
}

.video-block.nudging {
  width: 50%;
}

.video-block.impfpass {
  width: 50%;
  margin-left: -4%;
  padding-bottom: 0%;
}

.video-block.impfstatus {
  width: 44%;
}

.video-block.training {
  width: 44%;
  margin-left: -3.5%;
}

.video-block.emergency {
  width: 44%;
  margin-left: -4%;
}

.hangul-video {
  height: 100%;
}

.typo-hero {
  background-color: #f4f5f4;
  background-image: url('../images/hero-kompendium.jpg');
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 620px;
  margin-top: 110px;
}

.hero-earth {
  background-color: #4d6881;
  background-image: url('../images/hero-byebyeearth.jpg');
  background-position: 50% 41%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 620px;
  margin-top: 110px;
}

.text-image {
  width: 45%;
}

.text-image.big {
  width: 76%;
}

.text-image.time-cover {
  width: 32%;
}

.text-image.spacescribble {
  margin-left: -3%;
}

.text-image.chemiescribble {
  width: 60%;
  margin-left: -5%;
}

.text-image.goreact {
  margin-left: -2%;
}

.text-image.appicon {
  width: 55%;
  max-width: 920px;
}

.text-image.klickprototyp {
  width: 65%;
}

.text-image.rea {
  width: 55%;
}

.text-image.icons {
  max-width: 920px;
}

.text-image.blutzuckerscribble {
  margin-left: -3%;
}

.text-image.impfpass {
  width: 40%;
  padding-bottom: 0%;
}

.text-image.cards {
  width: 40%;
}

.text-image.sticky-note {
  background-image: url('../images/reanimation_post-its_1row.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  width: 62%;
  min-width: 705px;
  margin-top: -2.5%;
  margin-bottom: -3.5%;
  margin-left: -2.4%;
}

.text-image.sticky-note.mobile {
  display: none;
}

.text-image.training {
  width: 57%;
  margin-top: -1%;
  margin-bottom: -4%;
}

.text-image.td-web {
  width: 60%;
}

.text-image.m3e {
  border-radius: 10px;
  width: 60%;
}

.gallery-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin-left: 4%;
  margin-right: 4%;
}

.iconholder {
  float: left;
  width: 27%;
  height: 500px;
  margin-top: 94px;
  margin-bottom: 96px;
  position: relative;
}

.hover-button {
  float: none;
  color: #f8f8f8;
  text-align: center;
  letter-spacing: .3px;
  background-color: #465b73;
  border-radius: 20px;
  width: 208px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  line-height: 40px;
  position: static;
  bottom: -41px;
  left: 0;
  right: 0;
}

.hoverbutton-block, .hover-button-mobile {
  display: none;
}

.hover-block {
  width: 27%;
  margin-top: -60px;
  margin-left: 24%;
}

.chemie-hero {
  background-color: #4990e2;
  background-image: url('../images/hero-virtuelleschemielabor.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 620px;
  margin-top: 110px;
}

.chemie-hero.en {
  background-image: url('../images/hero-chemielabor_en.jpg');
}

.chemie-video {
  display: flex;
  box-shadow: 1px 0 40px #dbdbdb;
}

.reanimation-hero {
  background-color: #0175cc;
  background-image: url('../images/hero-reanimationsapp.jpg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 620px;
  margin-top: 110px;
}

.cpr-video {
  display: flex;
}

.blutzucker-hero {
  background-color: #fd4942;
  background-image: url('../images/hero-todoist.jpg');
  background-position: 50% 48%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 620px;
  margin-top: 110px;
}

.blutzucker-video {
  max-width: 980px;
  display: flex;
}

.tooltip-wrapper {
  height: 0;
  position: relative;
}

.tooltip {
  color: #fe5442;
  text-align: center;
  letter-spacing: .2px;
  background-color: #fff;
  border-radius: 4px;
  width: 175px;
  padding: 5px;
  font-family: FF Real Text, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 25px;
  position: absolute;
  bottom: -18px;
  left: auto;
  right: -6%;
  box-shadow: 0 0 4px 1px #00000026;
}

.tooltip.success {
  z-index: 1;
  color: #fe5442;
  background-color: #fff;
  display: block;
}

.btn {
  float: right;
  color: #a8a8a8;
  text-align: right;
  letter-spacing: .3px;
  background-color: #0000;
  border-bottom: 1px dashed #faa59c;
  margin-top: 7px;
  padding: 0;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  text-decoration: none;
}

.btn:hover {
  color: #4a4a4a;
}

.impfpass-hero {
  background-color: #ffdb59;
  background-image: url('../images/hero_impfpass_de.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 620px;
  margin-top: 110px;
}

.familienfunktion-video, .reisen-video, .nudging-video, .impfkalender-video, .impfstatus-video {
  display: flex;
}

.vaccination-card {
  background-image: url('../images/teaser-digitaler-impfpass.jpg');
  background-position: 70%;
  background-repeat: repeat;
  background-size: cover;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: absolute;
  inset: 0;
}

.impfpass {
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: relative;
}

.shadow-darkyellow {
  background-color: #f5a623;
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: absolute;
  inset: 0;
}

.vacination-app {
  border-radius: 4px;
  width: 100%;
  padding-bottom: 66%;
  position: relative;
}

.html-embed {
  display: none;
}

.footnote {
  color: #aeaeae;
  letter-spacing: .4px;
  width: 50%;
  max-width: 596px;
  margin-top: 46px;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  line-height: 28px;
}

.footnote a {
  color: #aeaeae;
  border-bottom: 1px dashed #faa59c;
  text-decoration: none;
}

.footnote a:hover {
  color: #fe5442;
  border-bottom-color: #fe5442;
}

.lang-switch {
  float: right;
  color: #fe5442;
  background-color: #efefef;
  border-radius: 40px;
  width: 46px;
  height: 46px;
  margin-right: 11.5%;
  text-decoration: none;
  display: block;
}

.lang-switch:hover, .lang-switch:active {
  background-color: #faddda;
}

.lang-switch.pink {
  color: #f65c96;
}

.lang-switch.pink:hover {
  color: #f65c96;
  background-color: #ffe0ec;
}

.lang-switch.red {
  color: #d6182b;
}

.lang-switch.red:hover {
  background-color: #f3d3d7;
}

.lang-switch.yellow {
  color: #ffb300;
}

.lang-switch.yellow:hover {
  background-color: #fdedbb;
}

.lang-switch.cyan {
  color: #3c8ee5;
}

.lang-switch.cyan:hover {
  background-color: #dce8f5;
}

.lang-switch.white {
  color: #f8f8f8;
  background-color: #2a292e;
}

.lang-switch.white:hover {
  background-color: #6a6775;
}

.lang-switch.lightblue {
  color: #66a3cc;
  background-color: #1f252b;
}

.lang-switch.lightblue:hover {
  background-color: #38495c;
}

.lang-code {
  text-align: center;
  letter-spacing: .4px;
  font-family: FF Real Text, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  transform: translate(0, 80%);
}

.nav-link {
  color: #aeaeae;
  letter-spacing: .3px;
  margin-bottom: 20px;
  font-family: FF Real Text, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
}

.nav-link:hover {
  color: #4a4a4a;
}

.nav-link.w--current {
  color: #a8a8a8;
}

.nav-link.lightblue {
  color: #8ba0ae;
}

.nav-link.lightblue:hover, .nav-link.white:hover {
  color: #f8f8f8;
}

.nav-linkstyle {
  color: #999;
  border-bottom: 1px dashed #faa59c;
}

.nav-linkstyle:hover {
  border-bottom-color: #fe5442;
}

.nav-linkstyle.pink {
  border-bottom-color: #f65c96;
}

.nav-linkstyle.red {
  color: #a8a8a8;
  border-bottom-color: #ff828f;
}

.nav-linkstyle.yellow {
  color: #a8a8a8;
  border-bottom-color: #ffbf00;
}

.nav-linkstyle.cyan {
  color: #a8a8a8;
  border-bottom-color: #95bce6;
}

.nav-linkstyle.lightblue {
  color: #8ba0ae;
  border-bottom-color: #66a3cc;
}

.nav-linkstyle.white {
  color: #a8a8a8;
  border-bottom-color: #f8f8f8;
}

.intro {
  margin-top: -40px;
}

.nav-container {
  width: 74%;
  max-width: 620px;
  margin-left: 24%;
}

.footer_en {
  background-color: #ebebeb;
  height: 77px;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.spacing {
  letter-spacing: .6px;
}

.cpr-training-video {
  display: flex;
}

.paragraph-2, .paragraph-3 {
  color: #a8a8a8;
}

@media screen and (max-width: 991px) {
  .header {
    margin-bottom: 160px;
    padding-top: 60px;
  }

  .content {
    margin-bottom: 208px;
  }

  .side-column {
    display: none;
  }

  .projects {
    width: 88%;
    margin-top: 98px;
    margin-left: auto;
    margin-right: auto;
  }

  .main-column {
    width: 100%;
  }

  .h1 {
    float: none;
    width: 61%;
    max-width: 462px;
    margin-bottom: 36px;
    margin-left: auto;
    margin-right: auto;
  }

  .h1.big-white {
    font-size: 40px;
    line-height: 50px;
  }

  .h1.project {
    width: 58%;
    max-width: 596px;
    margin-left: auto;
  }

  .h1.project.mobile {
    width: 66%;
  }

  .teaser {
    width: 100%;
    margin-bottom: 40px;
  }

  .chapter {
    text-align: left;
  }

  .chapter.smallcaps {
    float: none;
    text-align: left;
    line-height: 17px;
  }

  .chapter.mobile {
    float: left;
    text-align: left;
    margin-left: 21%;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
  }

  .chapter.mobile.smallcaps {
    float: left;
    margin-left: 0;
    margin-right: 5%;
    line-height: 40px;
    position: static;
    transform: none;
  }

  .small-link {
    float: none;
    letter-spacing: .3px;
    line-height: 40px;
  }

  .small-link.mobile {
    font-size: 16px;
    line-height: 40px;
  }

  .portrait {
    background-position: 50%;
    height: 440px;
  }

  .colorblock {
    width: 70%;
    height: 156px;
  }

  .colorblock-small {
    width: 16%;
    height: 40px;
  }

  .about-me {
    margin-top: -14px;
    padding-top: 0;
  }

  .paragraph {
    float: none;
    width: 58%;
    margin: 50px auto 0;
    font-size: 18px;
    line-height: 32px;
  }

  .awards {
    margin-top: 75px;
    margin-bottom: 320px;
  }

  .award-text {
    margin-left: 8%;
  }

  .footer-div {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
  }

  .h2 {
    letter-spacing: .3px;
    width: 48%;
    margin-left: 10%;
    font-size: 22px;
    line-height: 34px;
  }

  .signet-linkblock {
    width: auto;
    padding-left: 6%;
  }

  .image {
    float: left;
    max-width: 76%;
  }

  .signet {
    float: none;
  }

  .signet._404 {
    float: left;
  }

  .signet-div {
    width: 100%;
  }

  .portrait-text {
    height: 156px;
  }

  .teaser-link {
    margin-top: 0;
  }

  .chemistrylab {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-chemielabor-neu.jpg');
    background-position: 0 0, 50% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .chemistrylab.en {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-chemielabor_en.jpg');
    background-position: 0 0, 50% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .byebyeearth {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-byebye-earth.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .typo-kompendium {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-typo-kompendium.jpg');
    background-position: 0 0, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .reanimationsapp {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-reanimationsapp.jpg');
    background-position: 0 0, 73%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .improving-feedback {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-blutzucker.jpg');
    background-position: 0 0, 0 0;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .hangul-academy {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-hangul.jpg');
    background-position: 0 0, 0;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .margin-column {
    color: #aeaeae;
    letter-spacing: .3px;
    background-color: #efefef;
    height: 84px;
    margin-bottom: 36px;
    font-family: FF Real Text, sans-serif;
    font-size: 16px;
    line-height: 40px;
  }

  .center-div {
    width: 58%;
    max-width: 462px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
  }

  .contact-div {
    width: 58%;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-columns {
    color: #aeaeae;
    letter-spacing: .3px;
    padding-left: 0;
    font-family: FF Real Text, sans-serif;
    font-size: 16px;
    line-height: 40px;
  }

  .project-title {
    color: #f8f8f8;
    letter-spacing: .7px;
    text-shadow: 0 -2px 5px #0000008c;
    margin-left: 4%;
    font-family: FF Real Text, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 42px;
    text-decoration: none;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .teaser-block {
    width: 58%;
    max-width: 462px;
    margin-left: auto;
    margin-right: auto;
  }

  .award-list {
    width: 58%;
    margin-left: auto;
    margin-right: auto;
  }

  .signet-link, .signet-link.w--current {
    float: none;
    padding-left: 6%;
  }

  .impressum {
    padding-left: 0%;
  }

  .privacy {
    width: 62%;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-image {
    background-position: 18%;
  }

  ._404-header {
    width: 100%;
    margin-bottom: 80px;
    padding-left: 6%;
  }

  .hangul-hero {
    height: 420px;
  }

  .image-description {
    display: none;
  }

  .project-gallery {
    margin-top: 68px;
    margin-bottom: 68px;
  }

  .project-gallery.lightblue {
    margin-top: 80px;
    margin-bottom: 0;
  }

  .project-gallery.applewatch {
    background-position: 50% 75%;
    background-size: 1200px;
    height: 420px;
    margin-bottom: -40px;
  }

  .project-gallery.impfpassapp {
    height: 420px;
    margin-bottom: -40px;
  }

  .project-gallery.impfstatus {
    margin-top: 79px;
    margin-bottom: -42px;
  }

  .project-gallery.vui, .project-gallery.todoist {
    height: 494px;
    margin-bottom: -40px;
  }

  .project-gallery.multi-select-mode {
    margin-top: 79px;
    margin-bottom: -42px;
  }

  .project-text {
    margin-top: 90px;
  }

  .sideblock-project.left, .sideblock-project.right {
    margin-top: 16%;
  }

  .prev-project.smallcaps {
    line-height: 30px;
  }

  .project-name {
    font-size: 20px;
  }

  .next-project.smallcaps {
    line-height: 30px;
  }

  .video-block {
    float: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .video-block.rea-prototyp {
    width: 70%;
  }

  .video-block.familienfunktion {
    width: 75%;
    margin-left: auto;
  }

  .video-block.reisen {
    width: 50%;
    margin-left: auto;
  }

  .video-block.nudging {
    width: 80%;
    margin-left: auto;
  }

  .video-block.impfpass {
    width: 92%;
    margin-left: auto;
  }

  .video-block.impfstatus {
    width: 80%;
    margin-left: auto;
  }

  .video-block.training, .video-block.emergency {
    width: 85%;
    margin-left: auto;
  }

  .typo-hero {
    background-position: 0 100%;
    height: 420px;
  }

  .hero-earth {
    background-position: 0 0;
    height: 420px;
  }

  .text-image {
    width: 58%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .text-image.big {
    width: 100%;
    margin-bottom: 40px;
  }

  .text-image.time-cover {
    width: 56%;
    margin-left: auto;
  }

  .text-image.spacescribble {
    width: 84%;
    margin-left: auto;
  }

  .text-image.chemiescribble {
    width: 80%;
    margin-bottom: 52px;
    margin-left: auto;
  }

  .text-image.goreact {
    width: 80%;
    margin-left: auto;
  }

  .text-image.appicon {
    width: 75%;
  }

  .text-image.klickprototyp {
    width: 80%;
    margin-bottom: 50px;
  }

  .text-image.rea {
    width: 75%;
  }

  .text-image.icons {
    width: 85%;
  }

  .text-image.blutzuckerscribble {
    width: 85%;
    margin-bottom: 60px;
    margin-left: auto;
  }

  .text-image.impfpass, .text-image.cards {
    width: 70%;
  }

  .text-image.sticky-note {
    width: 80%;
    min-width: 700px;
    margin-top: 1%;
    margin-bottom: -9%;
    margin-left: auto;
  }

  .text-image.training {
    width: 78%;
    margin-top: 2%;
    margin-bottom: -12%;
  }

  .text-image.td-web, .text-image.m3e {
    width: 90%;
  }

  .gallery-grid {
    margin-left: 0%;
    margin-right: 0%;
  }

  .iconholder {
    width: 100%;
    height: 400px;
    margin-top: 58px;
    margin-bottom: 100px;
  }

  .hover-button {
    display: none;
  }

  .earthy-video {
    margin-bottom: 42px;
  }

  .hoverbutton-block {
    width: 100%;
    margin-bottom: 58px;
    display: inline-block;
    position: static;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .hover-button-mobile {
    color: #f8f8f8;
    text-align: center;
    letter-spacing: .3px;
    background-color: #465b73;
    border-radius: 20px;
    width: 167px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    font-family: FF Real Text, sans-serif;
    font-size: 16px;
    line-height: 40px;
    display: block;
  }

  .hover-block {
    display: none;
  }

  .chemie-hero {
    background-position: 50%;
    height: 420px;
  }

  .chemie-video {
    margin-top: 20px;
    margin-bottom: 70px;
  }

  .reanimation-hero {
    height: 420px;
  }

  .cpr-video {
    margin-bottom: -6%;
  }

  .blutzucker-hero {
    height: 420px;
  }

  .blutzucker-video {
    margin-bottom: 60px;
  }

  .impfpass-hero {
    height: 420px;
  }

  .familienfunktion-video, .reisen-video {
    margin-bottom: -30px;
    margin-left: -9%;
  }

  .nudging-video, .impfkalender-video {
    margin-bottom: -30px;
  }

  .impfstatus-video {
    margin-bottom: -30px;
    margin-right: -4%;
  }

  .vaccination-card {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-digitaler-impfpass.jpg');
    background-position: 0 0, 70%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
  }

  .footnote {
    width: 62%;
    margin-left: auto;
    margin-right: auto;
  }

  .lang-switch {
    margin-top: -46px;
    margin-right: 5.5%;
  }

  .nav-container {
    width: 66%;
    max-width: 596px;
    margin-left: auto;
    margin-right: auto;
  }

  .cpr-training-video {
    margin-top: 2%;
    margin-bottom: -6%;
  }
}

@media screen and (max-width: 767px) {
  .header {
    margin-bottom: 100px;
  }

  .projects {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .h1 {
    width: 89%;
    max-width: 426px;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
  }

  .h1.big-white {
    margin-left: auto;
    font-size: 36px;
    line-height: 50px;
  }

  .h1.project {
    width: 64%;
  }

  .h1.project.mobile {
    width: 76%;
    max-width: 476px;
  }

  .teaser {
    margin-left: 0;
    margin-right: 0;
  }

  .chapter.smallcaps {
    float: none;
    line-height: 28px;
  }

  .small-link {
    line-height: 28px;
  }

  .colorblock {
    height: 170px;
  }

  .colorblock-small {
    width: 14%;
    height: 40px;
  }

  .about-me {
    margin-top: -30px;
  }

  .paragraph {
    width: 64%;
  }

  .award-text {
    width: 70%;
    margin-left: 8%;
  }

  .award-badge {
    height: 84px;
  }

  .footer {
    height: 128px;
  }

  .footer-div {
    width: 80%;
  }

  .footer-text {
    width: 100%;
  }

  .signet-tiny {
    position: absolute;
    top: 0;
    right: 0;
  }

  .h2 {
    margin-left: 18%;
    font-size: 20px;
    line-height: 32px;
  }

  .signet {
    width: 35px;
    padding-left: 0%;
  }

  .signet-div {
    float: none;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
  }

  .portrait-text {
    height: 170px;
  }

  .chemistrylab {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-chemielabor-quad.jpg');
    background-position: 0 0, 50%;
  }

  .chemistrylab.en {
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
  }

  .byebyeearth {
    background-position: 0 0, 50%;
  }

  .kompendium {
    padding-bottom: 48%;
  }

  .typo-kompendium {
    background-position: 0 0, 100% 100%;
    background-size: auto, cover;
    padding-bottom: 48%;
  }

  .todo-list-app {
    padding-bottom: 48%;
  }

  .improving-feedback {
    background-position: 0 0, 0 0;
    padding-bottom: 48%;
  }

  .hangul-academy {
    background-position: 0 0, 0 0;
  }

  .center-div {
    width: 89%;
    max-width: 426px;
  }

  .contact-div {
    width: 64%;
  }

  .contact-columns {
    margin-top: 10px;
  }

  .social-block {
    float: left;
    line-height: 28px;
  }

  .teaser-block {
    width: 89%;
    max-width: 426px;
  }

  .teaser-block._404 {
    margin-left: auto;
  }

  .award-list {
    width: 64%;
  }

  .signet-link, .signet-link.w--current {
    padding-left: 0%;
  }

  .privacy {
    width: 68%;
  }

  .privacy h2 {
    font-size: 20px;
  }

  .privacy h4, .privacy ul {
    font-size: 18px;
    line-height: 32px;
  }

  .bg-image {
    background-position: 28%;
  }

  ._404-header {
    width: 73%;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0%;
    display: block;
  }

  .hangul-hero {
    background-position: 100% 0;
    height: 340px;
    margin-top: 80px;
  }

  .project-gallery {
    margin-top: 76px;
  }

  .project-gallery.applewatch {
    background-position: 45%;
    background-size: 1000px;
    height: 340px;
    margin-bottom: -20px;
  }

  .project-gallery.impfpassapp {
    height: 340px;
    margin-bottom: 0;
  }

  .project-gallery.impfpass {
    margin-bottom: -16px;
  }

  .project-gallery.impfstatus {
    margin-bottom: -28px;
  }

  .project-gallery.vui {
    height: 384px;
    margin-bottom: 0;
  }

  .project-gallery.cpr {
    margin-bottom: -16px;
  }

  .project-gallery.todoist {
    height: 384px;
    margin-bottom: 0;
  }

  .project-gallery.multi-select-mode {
    margin-bottom: -28px;
  }

  .project-text {
    margin-top: 60px;
  }

  .project-footer {
    flex-direction: column;
  }

  .sideblock-project.left {
    float: none;
    grid-row-gap: 20px;
    width: 80%;
    margin-bottom: 0%;
    margin-left: auto;
    margin-right: auto;
  }

  .sideblock-project.right {
    float: none;
    grid-row-gap: 20px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .video-block.rea-prototyp {
    width: 75%;
  }

  .video-block.familienfunktion {
    width: 80%;
  }

  .video-block.reisen {
    width: 55%;
  }

  .video-block.nudging {
    width: 75%;
  }

  .video-block.impfpass {
    width: 95%;
  }

  .video-block.impfstatus {
    width: 75%;
  }

  .video-block.training, .video-block.emergency {
    width: 87%;
  }

  .typo-hero {
    background-position: 50% 100%;
    height: 340px;
  }

  .hero-earth {
    background-position: 0 0;
    height: 340px;
  }

  .text-image.goreact {
    width: 84%;
  }

  .text-image.appicon {
    width: 85%;
  }

  .text-image.klickprototyp {
    width: 90%;
  }

  .text-image.rea {
    width: 85%;
  }

  .text-image.icons, .text-image.blutzuckerscribble {
    width: 95%;
  }

  .text-image.sticky-note {
    display: none;
  }

  .text-image.sticky-note.mobile {
    width: 65%;
    min-width: 400px;
    margin-top: -1%;
    display: block;
  }

  .text-image.training {
    width: 92%;
    padding-left: 15px;
  }

  .gallery-grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr 1fr;
  }

  .iconholder {
    height: 300px;
  }

  .chemie-hero, .reanimation-hero {
    height: 340px;
    margin-top: 80px;
  }

  .cpr-video {
    margin-top: -2%;
    margin-bottom: -10%;
  }

  .blutzucker-hero, .impfpass-hero {
    height: 340px;
    margin-top: 80px;
  }

  .familienfunktion-video {
    margin-bottom: -44px;
  }

  .impfstatus-video {
    margin-bottom: -10px;
  }

  .vaccination-card {
    background-position: 0 0, 50%;
    background-size: auto, cover;
    padding-bottom: 48%;
  }

  .impfpass, .vacination-app {
    padding-bottom: 48%;
  }

  .footnote {
    width: 68%;
  }

  .lang-switch {
    width: 38px;
    height: 38px;
    margin-top: -38px;
    margin-right: 6%;
  }

  .lang-code {
    font-size: 14px;
    transform: translate(0, 54%);
  }

  .nav-link {
    margin-bottom: 16px;
  }

  .intro {
    margin-top: -30px;
  }

  .nav-container {
    width: 76%;
    max-width: 476px;
  }

  .footer_en {
    height: 128px;
  }

  .cpr-training-video {
    margin-top: -2%;
  }
}

@media screen and (max-width: 479px) {
  .header {
    margin-bottom: 65px;
    padding-top: 50px;
  }

  .content {
    margin-bottom: 95px;
  }

  .projects {
    grid-row-gap: 20px;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr 1fr;
    width: 88%;
    margin-top: 55px;
  }

  .h1 {
    width: 91%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    line-height: 32px;
  }

  .h1.big-white {
    font-size: 26px;
    line-height: 40px;
  }

  .h1.project {
    width: 86%;
    font-weight: 500;
  }

  .h1.project.mobile {
    width: 85%;
    max-width: 331px;
    font-weight: 400;
  }

  .h1.project.mobile.hyphenation, .h1.project.white.mobile {
    font-weight: 400;
  }

  .teaser {
    margin-bottom: 28px;
    margin-left: 0;
    margin-right: 0;
  }

  .chapter.smallcaps {
    float: left;
    width: 62px;
    margin-right: 10%;
    font-size: 14px;
    line-height: 28px;
  }

  .chapter.mobile.smallcaps {
    float: none;
    letter-spacing: .7px;
    font-size: 14px;
    line-height: 28px;
  }

  .small-link {
    font-size: 14px;
    line-height: 28px;
  }

  .small-link.mobile {
    letter-spacing: .7px;
    font-size: 14px;
    line-height: 28px;
  }

  .pointy-arrow {
    padding-top: 15px;
  }

  .portrait {
    background-position: 100%;
    height: 220px;
  }

  .colorblock {
    width: 94%;
    height: 184px;
    top: 184px;
  }

  .about-me {
    margin-top: 164px;
  }

  .paragraph {
    letter-spacing: .2px;
    width: 86%;
    margin-top: 36px;
    font-size: 18px;
    line-height: 34px;
  }

  .awards {
    margin-bottom: 230px;
  }

  .award-text {
    letter-spacing: .3px;
    width: 68%;
    margin-top: -3px;
    margin-left: 7%;
    font-size: 14px;
    line-height: 28px;
  }

  .award-badge {
    height: 82px;
  }

  .footer {
    height: 128px;
  }

  .footer-text {
    width: 100%;
  }

  .signet-tiny {
    margin-top: 0;
    position: absolute;
    top: 0;
    right: 0;
  }

  .h2 {
    width: 80%;
    max-width: 370px;
    margin-left: 10%;
    font-size: 18px;
    line-height: 32px;
  }

  .signet {
    height: 31px;
    padding-left: 0%;
  }

  .signet-div {
    width: 82%;
    max-width: 312px;
    margin-left: auto;
    margin-right: auto;
  }

  .portrait-text {
    height: 184px;
    top: 184px;
  }

  .teaser-text {
    font-size: 18px;
  }

  .chemistry, .earth, .shadow-orange {
    padding-bottom: 66%;
  }

  .chemistrylab {
    background-image: linear-gradient(to top, #00000073, #0000 22%), url('../images/teaser-chemielabor-rect.jpg');
    background-position: 0 0, 50% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    padding-bottom: 66%;
  }

  .chemistrylab.en {
    background-position: 0 0, 50%;
  }

  .shadow-blue {
    padding-bottom: 66%;
  }

  .byebyeearth {
    background-position: 0 0, 50%;
    padding-bottom: 66%;
  }

  .kompendium {
    padding-bottom: 66%;
  }

  .typo-kompendium {
    background-position: 0 0, 100% 100%;
    padding-bottom: 66%;
  }

  .reanimation, .todo-list-app, .shadow-yellow, .shadow-pink {
    padding-bottom: 66%;
  }

  .reanimationsapp {
    background-position: 0 0, 0 0;
    padding-bottom: 66%;
  }

  .improving-feedback {
    background-position: 0 0, 50%;
    padding-bottom: 66%;
  }

  .hangul-academy {
    background-position: 0 0, 0 0;
  }

  .margin-column {
    height: 110px;
    margin-bottom: 28px;
  }

  .center-div {
    width: 91%;
    max-width: 320px;
    font-size: 14px;
  }

  .contact-div {
    width: 82%;
  }

  .contact-columns {
    margin-top: 10px;
    padding-right: 0;
  }

  .social-block {
    float: left;
    font-size: 14px;
    line-height: 28px;
  }

  .project-title {
    font-size: 16px;
  }

  .teaser-block {
    width: 91%;
    max-width: 320px;
  }

  .award-list {
    width: 86%;
  }

  .privacy {
    width: 82%;
    max-width: 312px;
    font-size: 18px;
    line-height: 34px;
  }

  .privacy h2 {
    font-size: 18px;
    font-weight: 500;
    line-height: 34px;
  }

  .privacy h4 {
    font-size: 18px;
    line-height: 34px;
  }

  .bg-image {
    background-position: 28%;
  }

  ._404-header {
    width: 82%;
    margin-bottom: 60px;
  }

  .hangul-hero {
    background-position: 75% 0;
    height: 280px;
  }

  .project-gallery {
    margin-top: 58px;
  }

  .project-gallery.applewatch {
    background-position: 40%;
    background-size: 900px;
    height: 280px;
    margin-bottom: -10px;
  }

  .project-gallery.impfpassapp {
    height: 280px;
    margin-bottom: -10px;
  }

  .project-gallery.vui, .project-gallery.todoist {
    height: 323px;
    margin-bottom: -10px;
  }

  .project-text {
    margin-top: 50px;
  }

  .prev-project.smallcaps {
    font-size: 14px;
    line-height: 25px;
  }

  .project-name {
    font-size: 18px;
    line-height: 25px;
  }

  .project-name.right {
    line-height: 25px;
  }

  .next-project.smallcaps {
    font-size: 14px;
    line-height: 25px;
  }

  .video-block.rea-prototyp, .video-block.familienfunktion {
    width: 95%;
  }

  .video-block.reisen {
    width: 72%;
  }

  .video-block.nudging, .video-block.impfpass, .video-block.impfstatus {
    width: 95%;
  }

  .video-block.training, .video-block.emergency {
    width: 97%;
  }

  .typo-hero {
    background-position: 16%;
    height: 280px;
  }

  .hero-earth {
    background-position: 50%;
    height: 280px;
  }

  .text-image.rea {
    width: 100%;
  }

  .text-image.rea.flaggen {
    width: 90%;
  }

  .text-image.impfpass {
    width: 80%;
  }

  .text-image.cards {
    width: 85%;
  }

  .text-image.sticky-note.mobile {
    width: 90%;
    min-width: 240px;
    margin-top: 0%;
    margin-bottom: -12%;
  }

  .text-image.training {
    width: 100%;
  }

  .text-image.td-web, .text-image.m3e {
    width: 95%;
  }

  .iconholder {
    height: 260px;
  }

  .chemie-hero, .reanimation-hero {
    height: 280px;
  }

  .cpr-video {
    margin-top: -9%;
  }

  .blutzucker-hero, .impfpass-hero {
    height: 280px;
  }

  .familienfunktion-video, .reisen-video {
    margin-left: 0%;
  }

  .impfstatus-video {
    margin-right: 0%;
  }

  .vaccination-card {
    background-position: 0 0, 0%;
    padding-bottom: 66%;
  }

  .impfpass, .vacination-app {
    padding-bottom: 66%;
  }

  .footnote {
    width: 82%;
    max-width: 312px;
    font-size: 14px;
    line-height: 26px;
  }

  .lang-switch {
    margin-top: -38px;
    margin-right: 9%;
  }

  .intro {
    margin-top: 0;
  }

  .nav-container {
    width: 85%;
    max-width: 331px;
    display: none;
  }

  .footer_en {
    height: 128px;
  }
}

#w-node-_244c0f61-5082-dfd2-4d53-fc18c4bee9f8-7fd14f38 {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_2391c50c-a42f-7599-4987-427dda9bafd9-7fd14f38 {
  grid-area: 1 / 5 / 2 / 7;
}

#w-node-cb14adff-a821-5e5f-d2f0-beb6381e6064-7fd14f38 {
  grid-area: 2 / 1 / 3 / 4;
}

#w-node-b94ffe15-75fb-ca4e-7e5e-3706ce6e4b46-7fd14f38 {
  grid-area: 2 / 4 / 3 / 7;
}

#w-node-_4d706504-873b-0968-6a52-690f7129d91a-7fd14f38 {
  grid-area: 3 / 1 / 4 / 3;
}

#w-node-_10375172-fc33-64ff-5b21-b6be64ea4ea9-7fd14f38 {
  grid-area: 3 / 3 / 4 / 7;
}

#w-node-_244c0f61-5082-dfd2-4d53-fc18c4bee9f8-7fd14f3a {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_2391c50c-a42f-7599-4987-427dda9bafd9-7fd14f3a {
  grid-area: 1 / 5 / 2 / 7;
}

#w-node-cb14adff-a821-5e5f-d2f0-beb6381e6064-7fd14f3a {
  grid-area: 2 / 1 / 3 / 4;
}

#w-node-b94ffe15-75fb-ca4e-7e5e-3706ce6e4b46-7fd14f3a {
  grid-area: 2 / 4 / 3 / 7;
}

#w-node-_10375172-fc33-64ff-5b21-b6be64ea4ea9-7fd14f3a {
  grid-area: 3 / 1 / 4 / 3;
}

#w-node-_4d706504-873b-0968-6a52-690f7129d91a-7fd14f3a {
  grid-area: 3 / 3 / 4 / 7;
}

#w-node-_244c0f61-5082-dfd2-4d53-fc18c4bee9f8-7fd14f3d {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_2391c50c-a42f-7599-4987-427dda9bafd9-7fd14f3d {
  grid-area: 1 / 5 / 2 / 7;
}

#w-node-cb14adff-a821-5e5f-d2f0-beb6381e6064-7fd14f3d {
  grid-area: 2 / 1 / 3 / 4;
}

#w-node-b94ffe15-75fb-ca4e-7e5e-3706ce6e4b46-7fd14f3d {
  grid-area: 2 / 4 / 3 / 7;
}

#w-node-_10375172-fc33-64ff-5b21-b6be64ea4ea9-7fd14f3d {
  grid-area: 3 / 1 / 4 / 3;
}

#w-node-_4d706504-873b-0968-6a52-690f7129d91a-7fd14f3d {
  grid-area: 3 / 3 / 4 / 7;
}

#w-node-ddae25cb-776d-684e-5758-67408e6ec5ff-7fd14f41 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-ddae25cb-776d-684e-5758-67408e6ec602-7fd14f41, #w-node-ddae25cb-776d-684e-5758-67408e6ec60b-7fd14f41 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-ddae25cb-776d-684e-5758-67408e6ec612-7fd14f41, #w-node-_3db1981b-d5b3-4596-ba44-ef60a14b5add-7fd14f42 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_3db1981b-d5b3-4596-ba44-ef60a14b5ae0-7fd14f42, #w-node-_3db1981b-d5b3-4596-ba44-ef60a14b5ae9-7fd14f42 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-_3db1981b-d5b3-4596-ba44-ef60a14b5af0-7fd14f42, #w-node-_396c91e2-9412-1887-3ce2-f51c76a28a99-7fd14f43 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_396c91e2-9412-1887-3ce2-f51c76a28a9c-7fd14f43, #w-node-_396c91e2-9412-1887-3ce2-f51c76a28aa5-7fd14f43 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-_396c91e2-9412-1887-3ce2-f51c76a28aac-7fd14f43 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-f37c0f1d-0dba-285a-999e-4fe029064fd0-7fd14f44 {
  grid-area: 1 / 2 / 4 / 4;
}

#w-node-_75043f29-d4ba-ca88-43a0-f5c9b0fe1e1d-7fd14f44 {
  grid-area: 1 / 4 / 5 / 6;
}

#w-node-_5c245526-7c31-b3d8-7fbd-c77c27c880d2-7fd14f44 {
  grid-area: 4 / 1 / 7 / 4;
}

#w-node-_263105fe-a7ef-2a50-f7fb-6ccc5521b63b-7fd14f44 {
  grid-area: 3 / 1 / 4 / 2;
}

#w-node-f74b39b7-c6a7-9348-485b-8c672efebd4c-7fd14f44 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-f74b39b7-c6a7-9348-485b-8c672efebd4f-7fd14f44, #w-node-f74b39b7-c6a7-9348-485b-8c672efebd58-7fd14f44 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-f74b39b7-c6a7-9348-485b-8c672efebd5f-7fd14f44, #w-node-_2d233473-96ae-5a26-aab9-c9915427932b-7fd14f45 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_2d233473-96ae-5a26-aab9-c9915427932e-7fd14f45, #w-node-_2d233473-96ae-5a26-aab9-c99154279337-7fd14f45 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-_2d233473-96ae-5a26-aab9-c9915427933e-7fd14f45, #w-node-a54c2fea-4853-1f37-5d86-009eae9a103d-7fd14f46 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-a54c2fea-4853-1f37-5d86-009eae9a1040-7fd14f46, #w-node-a54c2fea-4853-1f37-5d86-009eae9a1049-7fd14f46 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-a54c2fea-4853-1f37-5d86-009eae9a1050-7fd14f46, #w-node-ddae25cb-776d-684e-5758-67408e6ec5ff-7fd14f47 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-ddae25cb-776d-684e-5758-67408e6ec602-7fd14f47, #w-node-ddae25cb-776d-684e-5758-67408e6ec60b-7fd14f47 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-ddae25cb-776d-684e-5758-67408e6ec612-7fd14f47, #w-node-a54c2fea-4853-1f37-5d86-009eae9a103d-7fd14f49 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-a54c2fea-4853-1f37-5d86-009eae9a1040-7fd14f49, #w-node-a54c2fea-4853-1f37-5d86-009eae9a1049-7fd14f49 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-a54c2fea-4853-1f37-5d86-009eae9a1050-7fd14f49, #w-node-_2d233473-96ae-5a26-aab9-c9915427932b-c841523e {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_2d233473-96ae-5a26-aab9-c9915427932e-c841523e, #w-node-_2d233473-96ae-5a26-aab9-c99154279337-c841523e {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-_2d233473-96ae-5a26-aab9-c9915427933e-c841523e {
  grid-area: 1 / 1 / 2 / 2;
}

@media screen and (max-width: 767px) {
  #w-node-_2391c50c-a42f-7599-4987-427dda9bafd9-7fd14f38 {
    grid-area: 2 / 1 / 3 / 3;
  }

  #w-node-cb14adff-a821-5e5f-d2f0-beb6381e6064-7fd14f38 {
    grid-area: 2 / 3 / 3 / 5;
  }

  #w-node-b94ffe15-75fb-ca4e-7e5e-3706ce6e4b46-7fd14f38 {
    grid-area: 3 / 1 / 4 / 5;
  }

  #w-node-_4d706504-873b-0968-6a52-690f7129d91a-7fd14f38 {
    grid-area: 4 / 1 / 5 / 3;
  }

  #w-node-_10375172-fc33-64ff-5b21-b6be64ea4ea9-7fd14f38 {
    grid-area: 4 / 3 / 5 / 5;
  }

  #w-node-_2391c50c-a42f-7599-4987-427dda9bafd9-7fd14f3a {
    grid-area: 2 / 1 / 3 / 3;
  }

  #w-node-cb14adff-a821-5e5f-d2f0-beb6381e6064-7fd14f3a {
    grid-area: 2 / 3 / 3 / 5;
  }

  #w-node-b94ffe15-75fb-ca4e-7e5e-3706ce6e4b46-7fd14f3a {
    grid-area: 3 / 1 / 4 / 5;
  }

  #w-node-_10375172-fc33-64ff-5b21-b6be64ea4ea9-7fd14f3a {
    grid-area: 4 / 1 / 5 / 3;
  }

  #w-node-_4d706504-873b-0968-6a52-690f7129d91a-7fd14f3a {
    grid-area: 4 / 3 / 5 / 5;
  }

  #w-node-_2391c50c-a42f-7599-4987-427dda9bafd9-7fd14f3d {
    grid-area: 2 / 1 / 3 / 3;
  }

  #w-node-cb14adff-a821-5e5f-d2f0-beb6381e6064-7fd14f3d {
    grid-area: 2 / 3 / 3 / 5;
  }

  #w-node-b94ffe15-75fb-ca4e-7e5e-3706ce6e4b46-7fd14f3d {
    grid-area: 3 / 1 / 4 / 5;
  }

  #w-node-_10375172-fc33-64ff-5b21-b6be64ea4ea9-7fd14f3d {
    grid-area: 4 / 1 / 5 / 3;
  }

  #w-node-_4d706504-873b-0968-6a52-690f7129d91a-7fd14f3d {
    grid-area: 4 / 3 / 5 / 5;
  }

  #w-node-ddae25cb-776d-684e-5758-67408e6ec5ff-7fd14f41 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-ddae25cb-776d-684e-5758-67408e6ec60b-7fd14f41 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_3db1981b-d5b3-4596-ba44-ef60a14b5add-7fd14f42 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_3db1981b-d5b3-4596-ba44-ef60a14b5ae9-7fd14f42 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_396c91e2-9412-1887-3ce2-f51c76a28a99-7fd14f43 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_396c91e2-9412-1887-3ce2-f51c76a28aa5-7fd14f43, #w-node-f37c0f1d-0dba-285a-999e-4fe029064fd0-7fd14f44 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_75043f29-d4ba-ca88-43a0-f5c9b0fe1e1d-7fd14f44 {
    grid-area: 1 / 2 / 3 / 3;
  }

  #w-node-_5c245526-7c31-b3d8-7fbd-c77c27c880d2-7fd14f44 {
    grid-area: 3 / 1 / 4 / 3;
  }

  #w-node-f74b39b7-c6a7-9348-485b-8c672efebd4c-7fd14f44 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-f74b39b7-c6a7-9348-485b-8c672efebd58-7fd14f44 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_2d233473-96ae-5a26-aab9-c9915427932b-7fd14f45 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_2d233473-96ae-5a26-aab9-c99154279337-7fd14f45 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-a54c2fea-4853-1f37-5d86-009eae9a103d-7fd14f46 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-a54c2fea-4853-1f37-5d86-009eae9a1049-7fd14f46 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-ddae25cb-776d-684e-5758-67408e6ec5ff-7fd14f47 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-ddae25cb-776d-684e-5758-67408e6ec60b-7fd14f47 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-a54c2fea-4853-1f37-5d86-009eae9a103d-7fd14f49 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-a54c2fea-4853-1f37-5d86-009eae9a1049-7fd14f49 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_2d233473-96ae-5a26-aab9-c9915427932b-c841523e {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_2d233473-96ae-5a26-aab9-c99154279337-c841523e {
    grid-area: 2 / 1 / 3 / 2;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_244c0f61-5082-dfd2-4d53-fc18c4bee9f8-7fd14f38 {
    grid-area: 1 / 1 / 2 / 3;
  }

  #w-node-_2391c50c-a42f-7599-4987-427dda9bafd9-7fd14f38 {
    grid-area: 2 / 1 / 3 / 3;
  }

  #w-node-cb14adff-a821-5e5f-d2f0-beb6381e6064-7fd14f38 {
    grid-area: 3 / 1 / 4 / 3;
  }

  #w-node-b94ffe15-75fb-ca4e-7e5e-3706ce6e4b46-7fd14f38 {
    grid-area: 4 / 1 / 5 / 3;
  }

  #w-node-_4d706504-873b-0968-6a52-690f7129d91a-7fd14f38 {
    grid-area: 5 / 1 / 6 / 3;
  }

  #w-node-_10375172-fc33-64ff-5b21-b6be64ea4ea9-7fd14f38 {
    grid-area: 6 / 1 / 7 / 3;
  }

  #w-node-_244c0f61-5082-dfd2-4d53-fc18c4bee9f8-7fd14f3a {
    grid-area: 1 / 1 / 2 / 3;
  }

  #w-node-_2391c50c-a42f-7599-4987-427dda9bafd9-7fd14f3a {
    grid-area: 2 / 1 / 3 / 3;
  }

  #w-node-cb14adff-a821-5e5f-d2f0-beb6381e6064-7fd14f3a {
    grid-area: 3 / 1 / 4 / 3;
  }

  #w-node-b94ffe15-75fb-ca4e-7e5e-3706ce6e4b46-7fd14f3a {
    grid-area: 4 / 1 / 5 / 3;
  }

  #w-node-_10375172-fc33-64ff-5b21-b6be64ea4ea9-7fd14f3a {
    grid-area: 5 / 1 / 6 / 3;
  }

  #w-node-_4d706504-873b-0968-6a52-690f7129d91a-7fd14f3a {
    grid-area: 6 / 1 / 7 / 3;
  }

  #w-node-_244c0f61-5082-dfd2-4d53-fc18c4bee9f8-7fd14f3d {
    grid-area: 1 / 1 / 2 / 3;
  }

  #w-node-_2391c50c-a42f-7599-4987-427dda9bafd9-7fd14f3d {
    grid-area: 2 / 1 / 3 / 3;
  }

  #w-node-cb14adff-a821-5e5f-d2f0-beb6381e6064-7fd14f3d {
    grid-area: 3 / 1 / 4 / 3;
  }

  #w-node-b94ffe15-75fb-ca4e-7e5e-3706ce6e4b46-7fd14f3d {
    grid-area: 4 / 1 / 5 / 3;
  }

  #w-node-_10375172-fc33-64ff-5b21-b6be64ea4ea9-7fd14f3d {
    grid-area: 5 / 1 / 6 / 3;
  }

  #w-node-_4d706504-873b-0968-6a52-690f7129d91a-7fd14f3d {
    grid-area: 6 / 1 / 7 / 3;
  }
}


@font-face {
  font-family: 'FF Real Text';
  src: url('../fonts/4da4d9f1-291e-4765-8ce9-08233d84363b.woff2') format('woff2'), url('../fonts/10dfedc6-d29f-4898-869d-b11b5f02e183.eot') format('embedded-opentype'), url('../fonts/5d23a796-8edf-40f1-9413-7149b95f6c86.woff') format('woff'), url('../fonts/efc54b8c-3c70-4414-af76-286facfe2377.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'FF Real Text';
  src: url('../fonts/4620fa12-e6c1-4cfd-807f-ee846d1d584e.woff2') format('woff2'), url('../fonts/8220546b-6b60-4932-8597-13d83059fb65.eot') format('embedded-opentype'), url('../fonts/afb32918-ef3b-4d26-8426-d2e439b66e18.woff') format('woff'), url('../fonts/7a1d3408-c332-4bf0-80a8-fdd17cd1eda5.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'FF Real Text';
  src: url('../fonts/39f49a4b-beea-4010-8dac-4751c97d970e.woff2') format('woff2'), url('../fonts/021910dc-dbb6-4eec-bba1-ca42437b312e.eot') format('embedded-opentype'), url('../fonts/f35a6c8e-ddb0-49b0-a45a-50d41290dad6.woff') format('woff'), url('../fonts/477a2675-cd10-4499-bfea-33721e3734b4.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'FF Real Text';
  src: url('../fonts/579da65c-f33b-4204-9835-5f6996111906.woff2') format('woff2'), url('../fonts/e8dca282-0511-426a-b1ab-3ddcf289a494.eot') format('embedded-opentype'), url('../fonts/d226824b-db98-4db3-831b-63446b91c191.woff') format('woff'), url('../fonts/08d3aac8-79cc-449b-9e8b-16011a97e67e.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'FF Real Text';
  src: url('../fonts/e3b294c1-67f2-4adf-8c20-ccd2bd51fe63.woff2') format('woff2'), url('../fonts/93d4538b-031e-4318-b2cc-d04959ac5324.eot') format('embedded-opentype'), url('../fonts/58d5155c-437f-46ec-bca6-29a6101cf606.woff') format('woff'), url('../fonts/be9cdbcc-eac4-427e-87ad-2f8db4cc3f36.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: auto;
}