/* # Variables # */

html {

    /* ## RGB base values for colors to enable easy rgba() construction ## */

    --font-default: 0, 0, 0;
    --font-active: 59, 59, 59;
    --font-highlight: 92, 92, 92;
    --background: 247, 247, 247;
    --background-even: 232, 232, 232;

    --dark-background: 8, 8, 8;
    --dark-background-active: 17, 17, 17;
    --dark-background-highlight: 21, 21, 21;
    --dark-font-default: 204, 204, 204;
    --dark-font-active: 221, 221, 221;
    --dark-font-highlight: var(--background);


    /* ## Color instantiation ## */

    --color-font-default: rgb(var(--font-default));
    --color-font-active: rgb(var(--font-active));
    --color-font-highlight: rgb(var(--font-highlight));
    --color-background: rgb(var(--background));
    --color-background-even: rgb(var(--background-even));

    --color-dark-background: rgb(var(--dark-background));
    --color-dark-background-active: rgb(var(--dark-background-active));
    --color-dark-background-highlight: rgb(var(--dark-background-highlight));
    --color-dark-font-default: rgb(var(--dark-font-default));
    --color-dark-font-active: rgb(var(--dark-font-active));
    --color-dark-font-highlight: rgb(var(--dark-font-highlight));

    --color-image-placeholder: rgba(128, 128, 255, 0.5);


    /* ## Gradient definitions ## */

    --gradient-headline-odd-mobile: linear-gradient(var(--color-background) 50%, rgba(var(--background), 0) 100%);
    --gradient-headline-odd-desktop: linear-gradient(var(--color-background) 60%, rgba(var(--background), 0) 100%);

    --gradient-headline-even-mobile: linear-gradient(var(--color-background-even) 50%, rgba(var(--background-even), 0) 100%);
    --gradient-headline-even-desktop: linear-gradient(var(--color-background-even) 60%, rgba(var(--background-even), 0) 100%);

    --gradient-headline-footer-mobile: linear-gradient(var(--color-dark-background) 50%, rgba(var(--dark-background), 0) 100%);
    --gradient-headline-footer-desktop: linear-gradient(var(--color-dark-background) 60%, rgba(var(--dark-background), 0) 100%);


    /* ## Layout settings ## */

    --base-width: 80ex;
    --menu-desktop-height: 2rem;
    --menu-burger-height: 4rem;
    --headline-desktop-height: calc(var(--menu-burger-height) - 1rem);


    /* ## Things that shouldn't exist, but do because standards are hard ## */

    /* Try to avoid using these unless absolutely necessary. */
    --scrollbar-size: 20px;

    /* ## Animation settings ## */

    --bang-delay: 0.5s;
    --bang-gap: 0.5rem;
    --bang-box-height: 50vh;
    --bang-text-desktop-height: calc(100vh - (var(--menu-desktop-height) + var(--headline-desktop-height) + var(--bang-box-height) + var(--bang-gap)));
}

/* # Animations & Transition Definitions # */

@keyframes panfade {
    0% {
        opacity: 0;
        transform: translateX(100vw);
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes panfade-weighty {
    0% {
        opacity: 0;
        transform: translateX(-100vw);
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* # Generic element styles # */

/* font-size associated units like ex enable us to handle
 * some typographic settings of all headline levels at once.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 2ex;
    margin-bottom: 0.5ex;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
    margin-top: 1ex;
}

h1 {
    font-size: 150%;
}

h2 {
    font-size: 140%;
}

h3 {
    font-size: 130%;
}

h4 {
    font-size: 120%;
}

h5 {
    font-size: 110%;
}

h6 {
    font-size: 100%;
}

a {
    font-weight: bold;
    color: var(--color-font-default);
    transition: 0.1s ease-in-out;
}

a:hover {
    color: var(--color-font-highlight);
}

ul {
    margin-top: 1ex;
    padding-left: 2ex;
    /* ~1ex bullet + ~1ex first letter = minimal distance
     * needed for sublevels to be clearly recognizable.
     */
}

ul ul {
    margin-top: 0; /* Sublists should be snug to parent <li> */
}

ul li {
    list-style: square;
    list-style-position: inside;
    margin-bottom: 0.5ex;
}

ul li:last-child {
    margin-bottom: 0;
}

tr {
    vertical-align: top;
}

address {
    font-style: normal; /* UA defaults to italic */
}

/* #Re-usable high-level constructs # */

.image-placeholder {
    background-image: url('static/images/example.jpg');
    background-size: cover;
    background-position: 50% 50%;
}

/* Toggle-able content */

details.content-toggle > summary {
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    list-style: none;
}

details.content-toggle > summary::before {
    display: inline-block;
    content: " ";
    text-align: center;
    line-height: 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 1rem 1rem 0 1rem;
    background-color: var(--color-dark-background);
    background-image: url('static/arrow.svg');
    background-repeat: no-repeat;
    background-size: 33%;
    background-position: center;
    color: var(--color-dark-font-default);
    transition: 0.3s ease-in-out;
    transition-property: transform, background, color;
}

details.content-toggle[open] > summary {
    color: var(--color-font-active);
}

details.content-toggle[open] > summary::before {
    transform: rotateZ(90deg);
    background-color: var(--color-dark-background-active);
    background-image: url('static/arrow.svg#active');
    color: var(--color-dark-font-active);
}

details.content-toggle > summary:hover {
    color: var(--color-font-highlight);
}

details.content-toggle > summary:hover::before {
    background-color: var(--color-dark-background-highlight);
    background-image: url('static/arrow.svg#highlight');
    color: var(--color-dark-font-highlight);
}

details.content-toggle > summary h2 {
    display: inline-block;
    padding-left: 1rem;
    width: calc(100% - 3rem);
}

details.content-toggle + div {
    max-height: 0;
    padding-left: 3rem;
    overflow-y: hidden;
    transition: max-height 0.5s ease-in-out;
}

details.content-toggle + div > p:first-child {
    margin-top: 0;
}

details.content-toggle[open] + div {
    max-height: 100vh;
}

/* ## Modal ## */
.modal {
    position: fixed; /* also removes scroll position from this elements :target */
    z-index: 2000;
    width: 100%;
    height: 100%;
    top: 0;
    text-align: justify;
    pointer-events: none; /* mouse won't interact with this */
}

.modal > a.background {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--background), 0.95);
    opacity: 0;
    transition: opacity 0.3s linear;
}

.modal > a.close {
    display: block;
    position: fixed;
    z-index: 2020;
    top: 0;
    right: 0;
    width: var(--menu-burger-height);
    height: var(--menu-burger-height);
    background-color: var(--color-dark-background);
    background-image: url('static/close.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    /* Don't display the actual text, just let it be there for screenreaders */
    color: transparent;
    transform: translateY(-100%);
    transition: 0.3s transform ease-in-out;
}

.modal > a.close:hover {
    background-image: url('static/close.svg#highlight');
}

.modal > .content-wrapper {
    box-sizing: border-box;
    position: relative; /* Don't remember why, but this is critical */
    z-index: 2010;
    width: 0;
    height: 100%; /* height would be 0 because of childs absolute position */
    margin: 0 auto;
    overflow: hidden;
    transition: width 0.3s ease-in-out;
}

.modal .content {
    position: absolute;
    width: calc(100vw - 2rem);
    max-width: 80ex;
    height: calc(100vh - 2rem);
    padding: 1rem;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    overflow-y: scroll;
}

.modal .content > h1 {
    margin-top: calc(-1rem + 0.5ex); /* -1rem to neutralize .content padding */
    margin-bottom: 0;
    height: calc(var(--menu-burger-height) - 0.5ex);
}

.modal .content > h1 + * {
    margin-top: 0;
}

.modal:target {
    pointer-events: all; /* mouse will interact with this */
}

.modal:target > a.background {
    opacity: 1;
}

.modal:target > a.close {
    pointer-events: all;
    transform: translateY(0);
}


.modal:target > .content-wrapper {
    width: 100%;
}


/* ## Bangs ## */

.bang {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: var(--bang-gap); /* minimum distance between children */
    margin-bottom: var(--bang-gap);
    padding-left: 0;
    font-size: 90%;
}

.bang > li {
    position: relative;
    list-style: none;
    flex-basis: 33%;
    max-width: calc(33% - 0.25rem); /* 1/3 - column-gap */
    margin: 0;
    z-index: 100;
    /* delay z-index enough for the transition back to normal scale,
     * avoids visual glitching of box-shadow and also makes clipping behavior
     * a little more believable when multiple bangs are simultaneously
     * transitioning
     */
    transition: z-index 0.4s;
}

.bang > li:hover {
    /* make sure upscaled bang-box and box-shadow are rendered above their siblings */
    z-index: 500;
}
.bang-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
    min-height: 14rem; /* trial and error value */
    max-height: var(--bang-box-height);
    padding: 1rem;
    background: var(--color-dark-background-highlight);
    color: var(--color-dark-font-default);
    box-shadow: 0 0 0 transparent;
    transition: 0.3s cubic-bezier(0.695, 0.095, 0.215, 1.130);
    transition-property: transform, box-shadow;
}

.bang > li > a:hover > .bang-box {
    box-shadow: 0 0 8px #000;
    transform: scale(1.1);
}
.bang > li:first-child > a:hover > .bang-box {
    transform: scale(1.1) translateX(5%);
}

.bang > li:last-child > a:hover > .bang-box {
    transform: scale(1.1) translateX(-5%);
}

.bang-box > * {
    display: block;
    text-align: center;
}

.bang-box > h3 {
    margin-top: 0;
}

.bang-image {
    margin-bottom: 1rem;
    flex-shrink: 1;
    min-height: 60px;
}

.bang-claim {
    margin-bottom: 0.5rem;
}

.bang-texts {
    display: flex;
    flex-direction: row;
    background: var(--color-dark-background-highlight);
    color: var(--color-dark-font-default);
}

.bang-text {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    height: var(--bang-text-desktop-height);
    min-height: calc(2rem + (6em * 1.5)); /* make sure we have at least a couple lines, roughly 6 */
    background-position: calc(110% + 50px) 2rem; /* < 100% gives us extra motion during transitions */
    background-repeat: no-repeat;
    background-size: auto 150%;
    text-shadow: 0 0 2px var(--color-font-default);
    opacity: 0;
    overflow-x: hidden;
    transition: 1s ease-in-out;
    transition-property: flex-basis, opacity;
    scroll-padding-top: calc(var(--menu-desktop-height) + var(--headline-desktop-height) + var(--bang-box-height)); /* this for some reason is only used by chrome */
    scroll-margin-top: calc(var(--menu-desktop-height) + var(--headline-desktop-height) + var(--bang-box-height)); /* this for some other godawful reason only by firefox */
    /* min-width: 20px; */ /* alternative fix for the issue described below */
}

/* ### THIS IS A HACK ###
 * this "fix" for a scroll positioning bug in blink disables the nicer
 * animation in lieu for a simple fade. remove when this is fixed in blink.
 * bug occurs when :target'ing zero-width/area elements. in that case,
 * scroll-margin/padding is ignored for some damn reason.
 */

    .bang-texts {
        /* reserve space for the now absolute-positioned children */
        height: var(--bang-text-desktop-height);
    }

    .bang-text {
        width: 80ex;
        max-width: calc(100% - 2rem);
        flex-basis: 100%;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        position: absolute !important;
        pointer-events: none;
    }

    .bang-text:target {
        pointer-events: all;
        scroll-margin-left: 1rem;
    }

    .bang-text > div {
        width: auto !important;
        max-width: none !important;
    }

/* --- */

.bang-text:target {
    scroll-margin-top: calc(var(--menu-desktop-height) + var(--headline-desktop-height) + var(--bang-box-height));
    opacity: 1;
    flex-basis: 100%;
}

.bang-text > div {
    box-sizing: border-box;
    padding: 1rem;
    width: calc(100vw - 4rem - var(--scrollbar-size));
    max-width: calc(80ex - var(--scrollbar-size));
}

.bang-text > div > *:first-child {
    margin-top: 0;
}

.bang-text > div > *:last-child {
    margin-bottom: 0;
}

#mobile {
    background-image: url('static/mobile.svg#faded');
}

#software-development {
    background-image: url('static/tux.svg#faded');
}

#icecast {
    background-image: url('static/icecast.svg#faded');
}

/* ### Bang Animation ### */

.bang > li {
    /* bang! */
    animation-name: panfade;
    /* easing curve that overshoots a bit before snapping back */
    animation-timing-function: cubic-bezier(0.695, 0.095, 0.215, 1.130);

    /* immediately apply first keyframe, persist changes from last keyframe */
    animation-fill-mode: both;
    animation-duration: var(--bang-delay);
}

/*.bang > li:last-child {
    animation-name: panfade-weighty;
    animation-duration: calc(4 * var(--bang-delay));
    font-weight: bold;

}*/

.bang > li:nth-child(1){
    animation-delay: calc(1 * var(--bang-delay));
}

.bang > li:nth-child(2){
    animation-delay: calc(2 * var(--bang-delay));
}

.bang > li:nth-child(3){
    animation-delay: calc(3 * var(--bang-delay));
}

.bang > li:nth-child(4){
    animation-delay: calc(4 * var(--bang-delay));
}

.bang > li:nth-child(5){
    animation-delay: calc(5 * var(--bang-delay));
}

.bang > li:nth-child(6){
    animation-delay: calc(6 * var(--bang-delay));
}

.bang > li:nth-child(7){
    animation-delay: calc(7 * var(--bang-delay));
}

.bang > li:nth-child(8){
    animation-delay: calc(8 * var(--bang-delay));
}

.bang > li:nth-child(9){
    animation-delay: calc(9 * var(--bang-delay));
}

.bang > li:nth-child(10){
    animation-delay: calc(10 * var(--bang-delay));
}


/* # Layout # */

body {
    box-sizing: border-box;
    min-height: 100vh;
    margin: 0;
    /* needed to cut elements translated out of the viewport (i.e. the main
     * menu in mobile view) out of the scrollbox.
     */
    overflow-x: hidden;
    background: var(--color-background);
    color: var(--color-font-default);
    font-family: 'Source Sans Pro', sans-serif;
}

body > header {

   /* fixes flexbox column layout from body messsing up this elements width
    * don't ask me why this affects header but not main. */
    width: calc(100% - 2rem); /* 100% - horizontal padding */

    max-width: var(--base-width);
    margin: 0 auto;
    padding: 0 1rem;
    margin-top: 1rem;
}

#logo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100px;
    margin-bottom: 1rem;
}

#menu-show {
    display: none;
}

nav#menu-main {
    position: sticky;
    z-index: 1000;
    top: 0;
    background: var(--color-background);
}

nav#menu-main ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: var(--base-width);

    margin: 0 auto;
    padding: 0 1rem;
}

nav#menu-main ul li {
    list-style: none;
    font-size: 120%;
    margin: 0;
}

nav#menu-main ul li a {
    display: block;
    box-sizing: border-box;
    height: var(--menu-desktop-height);
    line-height: 200%;
    border-bottom: 0.25ex solid var(--color-font-default);
    padding-bottom: 0.25ex;
    font-weight: bold;
    text-decoration: none;
    transition: 0.1s ease-in-out;
    width: auto;
    text-align: left;
}

nav#menu-main ul li a:hover,
nav#menu-main ul li a.active {
    border-bottom-width: 0.5ex;
    padding-bottom: 0;
}

nav#menu-main ul li a.active {
    color: var(--color-font-active);
    border-color: var(--color-font-active);
}

nav#menu-main ul li a:hover {
    color: var(--color-font-highlight);
    border-color: var(--color-font-highlight);
}

main {
    text-align: justify;
    text-justify: inter-character;
}

main section.page:target,
section#contact:target {
    /* take sticky menu into account when scrolling */
    scroll-margin-top: var(--menu-desktop-height);
}

#top:target {
    scroll-margin-top: 1rem; /* neutralize padding-top of header */
}


main section.page {
    box-sizing: border-box;
    min-height: 100vh;
    padding: 1rem;
}

main section.page:nth-child(even) {
    background: var(--color-background-even);
}

main section.page:last-child {
    /* makes sure sticky header background gradients
     * don't bleed into the footer.
     */
    padding-bottom: calc(1rem + 3ex);
}

main section.page > .content {
    max-width: var(--base-width);
    margin: 0 auto;
}

main section.page > .content > h1:first-child,
section#contact > h1 {
    position: sticky;
    box-sizing: border-box;
    z-index: 900;
    top: var(--menu-desktop-height);
    margin: 0;
    /* make sure visual distance to top of section element is defined
     * completely by section.page padding
     * */
    padding: 0;
    padding-top: 0.5ex;
    height: var(--headline-desktop-height);
}

main section.page:nth-child(odd) > .content > h1:first-child {
    background: var(--gradient-headline-odd-desktop);
}

main section.page:nth-child(even) > .content > h1:first-child {
    background: var(--gradient-headline-even-desktop);
}

body > footer {
    box-sizing: border-box;
    padding: 1rem;
    background: var(--color-dark-background);
    color: var(--color-dark-font-default);
}

body > footer a,
.bang-texts a {
    color: var(--color-dark-font-default);
}

body > footer a.active,
.bang-texts a.active {
    color: var(--color-dark-font-active);
}

body > footer a:hover,
.bang-texts a:hover {
    color: var(--color-dark-font-highlight);
}

body > footer #copyright {
    border-top: 1px solid var(--color-dark-font-default);
    text-align: center;
    font-size: 70%;
    margin: 0 auto;
    padding-top: 1rem;
    max-width: calc(100% - 14rem);
}

#imprint-link {
    box-sizing: border-box;
    position: absolute;
    width: 6rem;
    height: 2rem;
    margin-top: -2rem;
    left: 1rem;
    border-radius: 1rem 1rem 0 0;
    padding: 0 1rem;
    padding-top: 0.5ex;
    text-align: center;
    background: var(--color-dark-font-default);
    color: var(--color-dark-background-active);
    text-decoration: none;
    transition: 0.1s ease-in-out;
    transition-property: background, color, height, margin-top;
}

#imprint-link:hover {
    background: var(--color-dark-font-highlight);
    color: var(--color-dark-background-highlight);
    height: 2.5rem;
    margin-top: -2.5rem;
}

#imprint > .background {
    backdrop-filter: blur(8px);
}

#imprint .content {
    background-image: url('static/seal.svg');
    background-repeat: no-repeat;
    background-position: top 2rem right 2rem;
    background-attachment: local; /* bg scrolls away with content */
    background-size: 150px;
}

#imprint .content > h1:first-child {
    margin-top: 1rem; /* makes h1 vertically flush with .content bg */
}

.asset-attributions li {
    list-style: none;
    margin-top: 1rem;
}
.asset-attributions li:first-child {
    margin-top: 0;
}

.asset-attributions li > img {
    display: block;
    margin: 0 auto;
}

.asset-attributions li > p {
    max-width: 50ex;
    margin: 0 auto;
    text-align: center;
}

.asset-attributions li > p a {
    /* make sure attribution and license links have their own line */
    display: block;
}

/* # Styles for specific sections # */

/* ## Team section ## */

ul.team {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    text-align: center;
    /* cancels out margin-bottom of last row of li children */
    margin-bottom: -1rem; }

ul.team > li {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 20rem;
    list-style: none;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 26%;
    margin: 0 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--color-background-even);
    border-radius: 1rem;
}

section#team:nth-child(even) ul.team > li {
    /* make sure the team member backgrounds don't have the same background
     * color as their parent section, no matter whether it's an even or odd
     * child.
     */
    background: var(--color-background);
}

ul.team > li > * {
    flex-basis: 33%;
    flex-grow: 1;
    flex-shrink: 1;
}

ul.team > li > h2 {
    margin-top: 0;
    /*flex-grow: 1;*/
}

ul.team > li > h2,
ul.team > li > span {
/*    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;*/
}
ul.team > li > span {
    margin-top: 1rem;
}

ul.team .photo-wrapper {
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
    flex-grow: 1;
}

ul.team .photo {
    width: 100px;
    height: 125px;
    background-color: var(--color-image-placeholder);
    border-radius: 1rem;
}

/* ## FAQ section ## */

ul.faq {
    margin-left: 0;
    padding-left: 0;
}

ul.faq > li {
    list-style: none;
}


/* ## Contact section ##  */

section#contact {
    margin-bottom: 1rem;
}

section#contact > h1 {
    background: var(--gradient-headline-footer-desktop);
}

#contact-content {
    display: flex;
    flex-direction: row;
}

#contact-phone,
#contact-email {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    max-width: 60ex; /* mainly for super-wide screens */
    text-align: center;
}

#contact-phone {
    padding-right: 1rem;
}

#contact-email {
    padding-left: 1rem;
}

#contact-logo {
    flex-grow: 2;
    flex-shrink: 1000;
    flex-basis: auto;
}

#contact-logo img {
    display: block;
    width: calc(100% - 2rem);
    min-width: 100px;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#contact-phone address a {
    display: inline-block;
    text-align: center;
    font-size: 150%;
    white-space: nowrap;
    margin-bottom: 1rem;
}

#contact-phone address a::before {
    display: inline-block;
    box-sizing: border-box;
    width: 3ex;
    height: 3ex;
    color: var(--color-font-default);
    background: var(--color-dark-font-default);
    padding-top: 0.25ex;
    border-radius: 25%;
    margin-right: 0.5ex;
    content: "☎";
    text-align: center;
    transition: background 0.1s ease-in-out;
}

#contact-phone address a:hover::before {
    background: var(--color-dark-font-highlight);
}

#contact-email address {
}

#contact-email address a {
    word-wrap: anywhere;
}

section#contact ul {
    padding: 0;
}

section#contact ul li {
    list-style: none;
}


/* # Mobile view #
 *
 * Note that the 480px do not correspond to display pixels.
 * CSS pixels are defined as 1/96th inch, but this might
 * differ on some, especially older, mobile devices.
 *
 * In both cases 480px should work to catch portrait-oriented
 * mobile devices.
 */
@media (screen and orientation: portrait), (max-width: 480px) {

    html {
        /* Mobile browsers overlay scrollbars instead of reserving space for
         * them. Note that this is a hack and will make landscape mode on at
         * least some mobiledevices still act as if there's a scrollbar
         * taking up screen space. Using px because we need a unit for calc()
         * to not fail.
         * */
        --scrollbar-size: 0px;
    }

    .bang {
        font-size: 55%;
    }

    nav#menu-main {
        position: sticky;
        top: 0;
        background: transparent;
        will-change: transform; /* performance optimization recommended by MDN */
    }

    nav#menu-main #menu-show {
        display: block;
        text-align: right;
    }

    nav#menu-main #menu-show > a.burger {
        box-sizing: border-box;
        display: inline-block;
        padding: 0 0.25ex;
        width: var(--menu-burger-height);
        height: var(--menu-burger-height);
        background-color: var(--color-dark-background-active);
        background-image: url('static/burger.svg');
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        /* Don't display the actual text, just let it be there for screenreaders */
        color: transparent;
        cursor: pointer;
        transition: 0.3s ease-in-out;
    }

    nav#menu-main #menu-show a.hide {
        display: none;
    }

    nav#menu-main #menu-show:target a.show {
        display: none;
    }

    nav#menu-main #menu-show:target a.hide {
        display: inline-block;
        background-image: url('static/burger.svg#active');
        background-color: var(--color-dark-background-highlight);
    }

    nav#menu-main #menu-show a:hover {
        background-image: url('static/burger.svg#highlight') !important;
        background-color: var(--color-dark-background-highlight) !important;
    }

    nav#menu-main #menu-show + ul {
        box-sizing: border-box;
        position: absolute;
        width: 100vw;
        overflow: hidden;
        padding: 0;
        background: var(--color-dark-background);
        transform: translateX(100vw);
        transition: transform 0.3s ease-in-out;
    }

    nav#menu-main #menu-show:target + ul {
        transform: translateX(0);
    }

    nav#menu-main ul {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    nav#menu-main ul li a {
        width: 100%;
        text-align: center;
        color: var(--color-dark-font-default);
        border-color: var(--color-dark-font-default);
        padding: 1rem 0;
        height: 4rem;
        line-height: 2rem;
    }

    nav#menu-main ul li a.active,
    nav#menu-main ul li a:hover {
        border-bottom-width: 0.25ex;
        border-color: var(--color-dark-font-default);
        padding-bottom: 1ex;
    }

    nav#menu-main ul li a.active {
        background: var(--color-dark-background-active);
        color: var(--color-dark-font-active);
    }

    nav#menu-main ul li a:hover {
        background: var(--color-dark-background-highlight);
        color: var(--color-dark-font-highlight);
    }

    main section.page:target,
    section#contact:target {
        /* neutralizes padding-top and brings headline onto the same
         * vertical position as the menu burger.
         */
        scroll-margin-top: -1rem;
    }

    main section.page > .content > h1:first-child,
    section#contact > h1 {
        top: 0; /* overrides top: var(--menu-desktop-height); from desktop view */
        height: var(--menu-burger-height);
    }

    main section.page:nth-child(odd) > .content > h1:first-child {
        background: var(--gradient-headline-odd-mobile);
    }

    main section.page:nth-child(even) > .content > h1:first-child {
        background: var(--gradient-headline-even-mobile);
    }

    section#contact > h1 {
        background: var(--gradient-headline-footer-mobile);
    }

    #contact-phone {
        padding-right: 0;
    }

    #contact-email {
        padding-left: 0;
    }

    #contact-logo img {
        max-width: 50%;
    }
    #imprint .content {
        background-image: url('static/seal.svg#faded');
    }
}

/* This media query ensures phone and email sections have at least 40ex space
 * each, minus paddings. 100px corresponds to min-width of the logo seal in
 * the footer, 2rem to the outer padding of the footer.
 *
 * @media (max-width: calc(80ex + 100px + 2rem)) {
 * Sadly, we can't use it because chrome doesn't support calc() in media
 * queries. So instead we just have a dumb trial-and-error value.
 * The reasoning here is to have 40ex for phone & mail respectively plus extra
 * space to account for logo and padding.
 */
@media (max-width: 90ex) {

    #contact-content {
        flex-wrap: wrap;
    }

    #contact-content > div {
        flex-basis: 100%;
        flex-grow: 1;
        flex-shrink: 0;
        text-align: center;
        margin: 0 auto;
    }

    #contact-logo {
        order: 9001;
    }

    #contact-email address a {
        word-wrap: normal;
        white-space: nowrap;
    }
}


/* # Fonts definitions # */

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: normal;
    font-style: normal;
    src: url('static/fonts/SourceSans3-Regular.otf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: bold;
    font-style: normal;
    src: url('static/fonts/SourceSans3-Bold.otf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: normal;
    font-style: italic;
    src: url('static/fonts/SourceSans3-It.otf.woff2') format('woff2');
}