/* Fonts: Exo (SIL OFL) and Fedra Serif Pro A (commercial, needs a web licence) */
@font-face {
    font-family: Exo;
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/exo-v20-latin-300.woff2") format("woff2"), url("../fonts/exo-v20-latin-300.woff") format("woff");
}

@font-face {
    font-family: Exo;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/exo-v20-latin-regular.woff2") format("woff2"), url("../fonts/exo-v20-latin-regular.woff") format("woff");
}

@font-face {
    font-family: Exo;
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/exo-v20-latin-700.woff2") format("woff2"), url("../fonts/exo-v20-latin-700.woff") format("woff");
}

@font-face {
    font-family: Fedra;
    font-style: normal;
    src: url("../fonts/fedra-serif-pro-a-medium.woff2") format("woff2"), url("../fonts/fedra-serif-pro-a-medium.woff") format("woff");
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

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

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:after, blockquote:before, q:after, q:before {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

:root {
    --color-gray-1000: #000000;
    --color-gray-900: #333333;
    --color-gray-800: #5A5A5A;
    --color-gray-700: #747474;
    --color-gray-500: #E0E0E0;
    --color-gray-300: #D9D9D9;
    --color-gray-250: #D1D1D1;
    --color-gray-100: #f4f4f4;
    --color-gray-0: #FFFFFF;
    --color-orange-1000: #FF3D00;
    --grid-padding: 20px;
    --grid-content-width: 1024px;
    --grid-max-width: calc(var(--grid-content-width) + 2 * var(--grid-padding));
    --grid-columns: 12;
    --grid-column-gap: 42px;
}

@media (max-width:768px) {
    :root {
        --grid-column-gap: 20px;
    }

}

*, :after, :before {
    box-sizing: border-box;
    background-repeat: no-repeat;
}

:after, :before {
    text-decoration: inherit;
    vertical-align: inherit;
}

:where(:root) {
    cursor: default;
    line-height: 1.5;
    overflow-wrap: break-word;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

:where(body) {
    margin: 0;
}

:where(h1) {
    font-size: 2em;
    margin: .67em 0;
}

:where(dl, ol, ul) :where(dl, ol, ul) {
    margin: 0;
}

:where(hr) {
    color: inherit;
    height: 0;
}

:where(nav) :where(ol, ul) {
    list-style-type: none;
    padding: 0;
}

:where(nav li):before {
    content: "\200B";
    float: left;
}

:where(pre) {
    font-family: monospace,monospace;
    font-size: 1em;
    overflow: auto;
}

:where(abbr[title]) {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

:where(b, strong) {
    font-weight: bolder;
}

:where(code, kbd, samp) {
    font-family: monospace,monospace;
    font-size: 1em;
}

:where(small) {
    font-size: 80%;
}

:where(audio, canvas, iframe, img, svg, video) {
    vertical-align: middle;
}

:where(iframe) {
    border-style: none;
}

:where(svg:not([fill])) {
    fill: currentColor;
}

:where(table) {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0;
}

:where(button, input, select) {
    margin: 0;
}

:where(button, [type=button i], [type=reset i], [type=submit i]) {
    -webkit-appearance: button;
}

:where(fieldset) {
    border: 1px solid #a0a0a0;
}

:where(progress) {
    vertical-align: baseline;
}

:where(textarea) {
    margin: 0;
    resize: vertical;
}

:where([type=search i]) {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

:where(dialog) {
    background-color: white;
    border: solid;
    color: black;
    height: -moz-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
}

:where(dialog:not([open])) {
    display: none;
}

:where(details>summary:first-of-type) {
    display: list-item;
}

:where([aria-busy=true i]) {
    cursor: progress;
}

:where([aria-controls]) {
    cursor: pointer;
}

:where([aria-disabled=true i], [disabled]) {
    cursor: not-allowed;
}

:where([aria-hidden=false i][hidden]) {
    display: initial;
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
    clip: rect(0,0,0,0);
    position: absolute;
}

body, html {
    padding: 0;
    margin: 0;
    font-family: Exo,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    background-color: var(--color-gray-100);
    color: var(--color-gray-1000);
    overflow-x: hidden;
}

a {
    color: inherit;
}

img {
    width: 100%;
}

.typography_alpha300 {
    font-size: 40px;
    line-height: 53px;
    font-weight: 300;
}

.typography_beta300 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 300;
}

.typography_beta700 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
}

.typography_gamma300 {
    font-size: 25px;
    line-height: 33px;
    font-weight: 300;
}

.typography_delta300 {
    font-size: 20px;
    line-height: 27px;
    font-weight: 300;
}

.typography_epsilon300 {
    font-size: 15px;
    line-height: 25px;
    font-weight: 300;
}

.typography_zeta700 {
    font-size: 9px;
    line-height: 11px;
    font-weight: 700;
}

.typography_eta100 {
    font-weight: 100;
}

.typography_eta100, .typography_etaFedra {
    font-size: 100px;
    line-height: 140px;
    text-transform: uppercase;
}

.typography_etaFedra {
    font-family: Fedra;
}

@media (max-width:1000px) {
    .typography_eta100, .typography_etaFedra {
        font-size: 80px;
        line-height: 120px;
    }

}

@media (max-width:600px) {
    .typography_eta100, .typography_etaFedra {
        font-size: 50px;
        line-height: 80px;
    }

}

.header_root {
    z-index: 1000;
    color: var(--color-gray-0);
    align-items: center;
}

.header_root.header_root {
    margin-top: 50px;
}

.header_root .header_content {
    align-items: center;
    display: flex;
    grid-column: 5 / span 8;
    justify-content: space-between;
    padding: 40px;
    background-color: var(--color-gray-900);
    border-radius: 20px;
}

.header_title {
    color: var(--color-gray-1000);
    white-space: nowrap;
}

.header_logo {
    text-decoration: none;
}

.header_links {
    display: flex;
}

.header_links .header_link {
    margin-right: 15px;
}

.header_links .header_link:last-child {
    margin-right: 0;
}

@media (max-width:1000px) {
    .header_root .header_content {
        grid-column: 2 / span 11;
    }

}

@media (max-width:750px) {
    .header_title {
        display: none;
    }

    .header_root .header_content {
        grid-column: 1 / span 12;
    }

}

@media (max-width:600px) {
    .header_root .header_content {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .header_links {
        margin-top: 15px;
    }

}

.layout_fullGrid {
    display: grid;
    grid-template-columns: minmax(var(--grid-padding),auto) repeat(var(--grid-columns),1fr) minmax(var(--grid-padding),auto);
    grid-column-gap: var(--grid-column-gap);
    width: 100%;
}

.layout_fittedGrid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns),1fr);
    grid-column-gap: var(--grid-column-gap);
}

.layout_container, .layout_fittedGrid {
    width: 100%;
    max-width: var(--grid-max-width);
    padding: 0 var(--grid-padding);
    margin: 0 auto;
}

.main_root {
    margin-top: calc(100px + 42px);
}

@media (max-width:768px) {
    .main_root {
        margin-top: calc(60px);
    }

}

.section_root {
    padding: 75px 0;
}

.section_isWhite {
    background-color: var(--color-gray-100);
}

.section_isGray {
    background-color: var(--color-gray-250);
}

.section_isDarkGray {
    background-color: var(--color-gray-900);
    color: var(--color-gray-0);
}

.section_content {
    padding: 75px 0;
}

@media (max-width:768px) {
    .section_content, .section_root {
        padding: 40px 0;
    }

}

.dot_root {
    width: 22px;
    height: 22px;
    border-radius: 22px;
    transition: background-color .6s ease-in-out .4s;
}

.dot_isOrange {
    background-color: var(--color-orange-1000);
}

.dot_isGray {
    background-color: var(--color-gray-500);
}

.sectionTitle_root {
    position: relative;
}

.sectionTitle_dot {
    position: absolute;
    top: 14px;
    transform: translateX(-56px);
}

.sectionTitle_title {
    white-space: nowrap;
}

@media (max-width:1200px) {
    .sectionTitle_dot {
        transform: translateX(0);
    }

    .sectionTitle_title {
        transform: translateX(40px);
    }

}

.home_dash {
    grid-column: 10 / span 3;
    margin-top: 125px;
    margin-bottom: 75px;
}

/* The cube sits bottom right, next to the short lines of the staircase. */
.home_cube {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    width: min(200px, 24vw);
    height: auto;
    pointer-events: none;
}

@media (max-width:600px) {
    .home_cube {
        width: 16vw;
    }

}

.home_hero {
    margin-bottom: 100px;
}

.home_heroTitle {
    grid-column: 1 / span 2;
}

/* Hero: four lines as a staircase ("GRAFIK - / & INTERAKTIONS / - / DESIGN").
   Everything is sized in em, so the staircase scales with the viewport. */
.home_intro {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: clamp(34px, 8.6vw, 96px);
    line-height: 1.4;
}

.home_introLine {
    display: block;
    white-space: pre;
}

.home_introLine2 {
    padding-left: 0.57em;
}

.home_introLine3 {
    padding-left: 2.77em;
}

.home_introLine4 {
    padding-left: 1.82em;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.08;
}

.home_projectTeaser {
    grid-column: span 4;
}

.home_isLargeProjectTeaser {
    grid-column: span 6;
}

.home_explorationTeaser {
    grid-column: span 4;
}

.home_isLargeExplorationTeaser {
    grid-column: span 6;
}

.home_isHalfExplorationTeaser {
    grid-column: span 5;
}

.home_cvInfo {
    grid-column: 1 / span 4;
}

.home_cvImage {
    border-radius: 20px;
}

.home_cvEntries {
    grid-column: 5 / -1;
}

.home_cvEntry {
    margin-top: 36px;
}

.home_cvEntry:first-child {
    margin-top: 0;
}

.home_cvLinks {
    margin-top: 0;
}

/* Group headings ("BERUFSERFAHRUNG", "AUSBILDUNG") get three times the normal entry gap above them. */
.home_cvGroup {
    margin-top: 108px;
}

.home_isOrange {
    color: var(--color-orange-1000);
}

/* Three small cards in a row are only 313px wide now (content width 1024px), so they get less side padding. */
@media (min-width:1201px) {
    .home_projectTeaser:not(.home_isLargeProjectTeaser) .projectTeaser_info {
        padding: 30px 32px;
    }

}

@media (min-width:751px) and (max-width:1200px) {
    .home_isLargeProjectTeaser, .home_projectTeaser {
        grid-column: span 6;
    }

}

@media (max-width:1000px) {
    .home_dash {
        display: none;
    }

    .home_heroTitle, .home_intro {
        grid-column: 1 / -1;
    }

    .home_intro {
        margin-top: 20px;
    }

}

@media (max-width:800px) {
    .home_isLargeProjectTeaser, .home_projectTeaser {
        grid-column: span 12;
    }

    .home_cvEntries, .home_cvInfo {
        grid-column: 1 / -1;
    }

    .home_cvLinks {
        display: none;
    }

    .home_cvEntries {
        margin-top: 35px;
    }

    .home_explorationTeaser {
        grid-column: 1 / -1;
    }

}

.projectTeaser_root {
    text-decoration: none;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--grid-column-gap);
}

.projectTeaser_root:hover {
    outline: 1rem solid var(--color-gray-300);
}

.projectTeaser_root:hover .projectTeaser_descriptionHover {
    opacity: 1;
}

.projectTeaser_info {
    padding: 30px 52px;
    background-color: var(--color-gray-0);
    border-radius: 20px;
}

.projectTeaser_hasImage .projectTeaser_info {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.projectTeaser_description {
    margin-top: 35px;
}

.projectTeaser_descriptionHover {
    position: absolute;
    padding: 50px;
    background: rgb(255 255 255/85%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 5000;
    transition: .4s;
}

.projectTeaser_externalPage {
    margin-top: 25px;
    text-decoration: underline;
}

.projectTeaser_imageBlockCaptionTeaser {
    position: absolute;
    bottom: 25px;
    left: 50px;
    padding: 6px 20px;
    background: rgba(113,113,113,.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid #e4e4e45c;
    border-radius: 100px;
    color: var(--color-gray-0);
    font-weight: 500;
    text-transform: uppercase;
    z-index: 5001;
}

.projectTeaser_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.projectTeaser_client {
    margin-top: 8px;
}

.projectTeaser_tagsWrapper {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
}

.projectTeaser_tagsWrapper>* {
    margin-right: 8px;
    margin-top: 10px;
}

.projectTeaser_image {
    position: relative;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    min-height: 450px;
    height: -webkit-fill-available;
}

.projectTeaser_image img, .projectTeaser_image video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tag_root {
    border-radius: 100px;
    padding: 8px 20px;
    display: inline-flex;
    align-items: center;
    line-height: normal;
    text-transform: uppercase;
}

.tag_isBlack {
    background-color: var(--color-gray-1000);
    color: var(--color-gray-0);
}

.tag_isOrange {
    background-color: var(--color-gray-1000);
    color: var(--color-orange-1000);
}

.tag_isWhite {
    background-color: var(--color-gray-0);
    color: var(--color-gray-1000);
    border: 1px solid var(--color-gray-1000);
}

.explorationTeaser_root {
    text-decoration: none;
    margin-bottom: var(--grid-column-gap);
}

.explorationTeaser_image img {
    position: relative;
    width: 100%;
    max-height: 650px;
    object-fit: cover;
    overflow: hidden;
    border-radius: 20px;
}

.backgroundColor_white {
    background-color: var(--color-gray-0);
}

.footer_root {
    color: var(--color-gray-0);
    margin-top: 130px;
}

.footer_copyright, .footer_cvLinks {
    grid-column: 1 / -1;
}

.footer_copyright {
    margin-top: 80px;
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
}

@media (max-width:1000px) {
    .footer_copyright {
        display: block;
    }

    .footer_copyrightBlock {
        padding-bottom: 50px;
    }

}