/**** Shared ****/

* {
    box-sizing: border-box;
}

:root {
    font-family: 'Arial', sans-serif;
    scroll-behavior: smooth;
    --main-color: #A040C0;
    --light-color: #D098E0;
    --accent-color: #C0F080;
    --bg-color: #EBEFE7;
    --blur-color: #60804020;
    --blur: 16px;
}

body {
    margin: 0;
    position: relative;
}

body.header-footer {
    min-height: calc(100vh + 8em);
    padding: 3em 0 8em 0;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 3em;
    box-shadow: 0 0 0.5em #00000060;
    background-color: #FFFFFF;
    z-index: 10;
}

header img {
    height: 2.5em;
    margin: 0.25em;
}

nav {
    height: 100%;
    display: flex;
    justify-content: space-between;
}

nav > *:first-child,
nav > *:last-child {
    flex: 100px 1 1;
}

nav > *:last-child {
    text-align: right;
}

nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    height: 100%;
}

nav li {
    flex: 100px 1 1;
}

nav li a {
    text-decoration: none;
    padding: 1em 2em;
    color: #808080;
}

nav li a:hover,
nav li.active a{
    color: var(--main-color);
}

nav a.flag {
    text-decoration: none;
}

nav a.flag div {
    display: inline-block;
    font-size: 1.25em;
    width: 1em;
    margin: 0.75rem 1rem;
}

nav a.flag[href='/de/'] div::before,
nav a.flag[href='/en/']:hover div::before,
nav a.flag[href='/en/']:focus div::before {
    content: '\1F1EC\1F1E7';  /* GB */
}

nav a.flag[href='/en/'] div::before,
nav a.flag[href='/de/']:hover div::before,
nav a.flag[href='/de/']:focus div::before {
    content: '\1F1E6\1F1F9';  /* AT */
}

footer {
    height: 8em;
    padding: 1em;
    width: 100%;
    box-shadow: 0 0 0.5rem #00000060;
    background-color: #404040;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    gap: 2em;
    position: absolute;
    bottom: 0;
}

footer img {
    height: 4em;
    width: 4em;
}

footer a {
    align-self: center;
}

@media screen and (max-width: 800px) {
    footer {
        flex-direction: column;
        height: unset;
        align-items: center;
        gap: 1em;
        padding-top: 3em;
    }
    footer > *:not(:first-child) {
        width: 300px;
    }
}

p a,
table a {
    color: var(--main-color);
}

main section h3 {
    text-align: center;
    font-size: 2em;
}

.center {
    text-align: center;
}

/**** Index ****/

main span[id] {
    position: relative;
    top: -8em;
}

main .background {
    background-image: var(--img);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

@media screen and (max-width: 1024px) {
    main .background {
        background-attachment: unset;
    }
}

main .home {
    height: calc(100vh + 2rem);
    --img: url("/res/images/Italien-1.jpg");
}

main .picture-1 {
    width: 100%;
    margin: 0;
    --img: url("/res/images/Italien-2.jpg");
    height: calc(24em + 4rem);
}

main .picture-2 {
    width: 100%;
    margin: 0;
    --img: url("/res/images/Italien-3.jpg");
    height: calc(24em + 2rem);
}

main .home a {
    text-decoration: none;
    color: #000000;
    top: calc(30vh - 1em);
    position: relative;
    font-size: 1.25em;
    transition: top 0.25s, font-size 0.25s;
    display: block;
    width: fit-content;
    margin: auto;
}

main .home a > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: auto;
    backdrop-filter: blur(var(--blur));
    background-color: var(--blur-color);
    box-shadow: 0 0 1rem #00000060;
    padding: 1.5em 1em;
    border-radius: 3em;
}

main .home a:hover {
    font-size: 1.375em;
    top: calc(30vh - 1.25em);
}

main .home img {
    width: 8em;
    height: 8em;
}

main .home h1 {
    font-size: 4em;
    margin: 0;
    font-weight: normal;
}

main .home h2 {
    font-size: 1.125em;
    margin: 0;
    font-weight: bold;
}

main div.blur {
    width: 100%;
    height: 2rem;
    position: absolute;
    backdrop-filter: blur(var(--blur));
    background-color: var(--blur-color);
}
main div.blur.top {
    top: 0;
    box-shadow: 0 0.5rem 1rem -0.5rem #00000060;
}
main div.blur.bottom {
    bottom: 0;
    box-shadow: 0 -0.5rem 1rem -0.5rem #00000060;
}

main section {
    padding: 1em 0 2em 0;
    position: relative;
}

main section p,
main section table {
    max-width: 1000px;
    margin: 1em auto;
}

main section p {
    text-align: justify;
}

main .about {
    padding: 0 0 1em 0;
}

main .clients {
    padding: 0 1em 2em 1em;
}

main .clients .container-background {
}

main .clients .container {
    display: flex;
    max-width: 1400px;
    margin: auto;
    justify-content: center;
    --img: url("/res/images/Italien-3.jpg");
}

main .clients .container .filling {
    min-width: 2em;
    min-height: 2em;
    background-color: var(--bg-color);
}

main .clients .container > *:not(.filling) {
    flex: 100px 1 1;
    /*border-radius: 1em;*/
    padding: 1.5em 1em;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(var(--blur));
    background-color: var(--blur-color);
    position: relative;
}

main .clients .container .edge {
    position: absolute;
    background-color: var(--bg-color);
    width: 1em;
    height: 1em;
    clip-path: polygon(0% 0%, 0% 100%, 2% 80%, 7% 63%, 14% 49%, 22% 38%, 29% 29%, 38% 22%, 49% 14%, 63% 7%, 80% 2%, 100% 0%);
}
main .clients .container .edge:nth-last-child(1) {top: 0; left: 0; transform: rotate(0deg);}
main .clients .container .edge:nth-last-child(2) {top: 0; right: 0; transform: rotate(90deg);}
main .clients .container .edge:nth-last-child(3) {bottom: 0; right: 0; transform: rotate(180deg);}
main .clients .container .edge:nth-last-child(4) {bottom: 0; left: 0; transform: rotate(270deg);}

@media screen and (max-width: 1000px) {
    main .clients .container {
        flex-direction: column;
    }
}

main .clients .container h4,
main .clients .container h5,
main .clients .container h6 {
    margin: 0;
    text-align: center;
}

main .clients .container h4 {
    font-size: 1.25em;
}

main .clients .container h5 {
    font-size: 0.875em;
    line-height: 1em;
    font-weight: normal;
    flex-grow: 1;
}

main .clients .container h5 span {
    white-space: pre;
}

main .clients .container h6 {
    font-size: 0.875em;
    margin-top: 1em;
}

main .clients .container .branches {
    font-size: 1em;
    text-align: center;
    display: block;
}

main .clients .link {
    text-align: center;
    margin-bottom: 0;
}

table {
    border-collapse: collapse;
}

table td,
table th {
    padding: 0.125em 0.5em;
}

table thead th {
    font-weight: normal;
    font-style: italic;
    text-align: left;
    padding-bottom: 0.5em;
}

table thead tr:first-child th:not([rowspan="2"]) {
    padding-bottom: 0;
}

table .unit {
    font-size: 0.75em;
    text-align: center;
    padding-top: 0;
}

@media screen and (min-width: 1921px) {
    main .picture-1 {
        height: calc(36em + 4rem);
    }
    main .picture-2 {
        height: calc(36em + 2rem);
    }
}

@media screen and (max-width: 1032px) {
    nav li a {
        padding: 1em;
    }
    main section p,
    main section table {
        margin: 1em;
    }
}

@media screen and (max-width: 800px) {
    body.header-footer {
        min-height: calc(100vh + 20em);
        padding-bottom: 20em;
    }
}

@media screen and (max-width: 650px) {
    nav.index li:first-child {
        display: none;
    }
    .home {
        font-size: 0.875em;
    }
}

@media screen and (max-width: 550px) {
    nav.index li:nth-child(2) {
        display: none;
    }
    .home {
        font-size: 0.75em;
    }
}

@media screen and (max-width: 500px) {
    nav.index li:nth-child(3) {
        display: none;
    }
    .home {
        font-size: 0.675em;
    }
}

@media screen and (max-width: 400px) {
    .home {
        font-size: 0.5em;
    }
}