/* titillium-web-regular - latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('/fonts/titillium-web-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/titillium-web-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* titillium-web-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/titillium-web-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
    
/* titillium-web-700 - latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('/fonts/titillium-web-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/titillium-web-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* GENERAL */
  
*, ::after, ::before {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 18px; height: 100%; scroll-behavior: smooth;}
body {
    font-family: 'Titillium Web', sans-serif;
    background: #eee;
    color: #202A4E;
    border: 2rem solid white;
    line-height: 1.57;
}
select {
    font-family: 'Titillium Web', sans-serif;
    font-size: 1.15rem;
    color: #202A4E;
    background: transparent;
    border: 0;
}
.container {padding: 0 2rem; width: 100%; margin: 0 auto;}
h1, h2, h3, .h1, .h2, .h3 {font-weight: bold; line-height: 1.1; color: #eb7a08; text-transform: uppercase; font-size: 2rem; margin-bottom: 0.45em;}
a {color: #202A4E; text-decoration: none;}
img {width: 100%; display: block; height: auto;}
p {font-size: 2rem; margin: 0 auto 1.57em; text-align: left; width: 100%;}
p:last-child {margin-bottom: 0;}
ul.list li {list-style: none;}


/* HEADER */

.section.header {padding: 0; position: relative;}
.section.header img {width: 100%; display: block;}
.section.header > img {position: absolute; width: 9.5rem; left: 2rem; cursor: pointer; display: none; bottom: 3rem;}
.section.header .container {max-width: 70rem;}
.section.header .container .h1 {padding: 4rem 0 0.75rem;}
.section.header .container .h1 a {display: block;}
.section.header .h2 {font-size: 1.9rem; margin: 0 0 2rem; color: #202A4E; font-weight: 600;}
.section.header #menu {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    background: #eee;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    font-size: 3rem;
    z-index: 50;
    border: 2rem solid white;
}
body.menuopen .section.header #menu {display: flex;}
body.menuopen .section.header #menu li:last-child {z-index: 51;}
body.menuopen .section.header .container .h1 {position: fixed; z-index: 51; width: calc(100% - 4rem); max-width: 66rem;}

.section.header #menu li {list-style: none;}
.section.header #menu li a {display: block; color: #202a4e; padding: 0.5rem 2rem; font-weight: 600; transition: color 0.15s ease-in-out;}
.section.header #menu li a:hover {color: #6981A6;}
.section.header #menu li:last-child, #togglemenu {
    position: absolute; 
    right: 1.6rem; 
    top: 1.25rem; 
    color: white; 
    cursor: pointer;
    background: url(/img/menu.svg) center center / contain no-repeat;
    color: transparent;
    width: 4rem;
    height: 4rem;
    display: block;
    user-select: none;
}
.section.header #menu li:last-child {background-image: url(/img/close.svg);}


body.home .section.header > img {display: block;}
body.home .header {
    background: url(/img/header_smaller.webp) 90% 100% / 100% auto no-repeat, linear-gradient(180deg, #a1bade 0%, #bccade 38.43%);
    height: calc(50vw + 30rem);
    max-width: 100%;
}
body.home .header::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scale(0.8);;
    width: 5.1rem;
    height: 5.1rem;
    background: white url(/img/chevronsdown.png) center 55% / 3.4rem auto no-repeat;
    color: white;
    border-radius: 100%;
    margin-bottom: -2.55rem;
    box-shadow: 0px 0px 1rem rgba(0,0,0,0.3);
}
body.home #togglemenu {background-image: url(/img/menu_white.svg);}

@media (min-width: 500px) {
    body.home .header {
        background: url(/img/header_small.webp) 90% 80% / cover no-repeat, linear-gradient(180deg, #a1bade 0%, #bccade 38.43%);
        height: calc(22vw + 45vh + 10rem);
    }
}
@media (min-width: 800px) {
    body.home .header {
        height: calc(22vw + 45vh);
    }
}
@media (min-width: 2500px) {
    body.home .header {
        background: url(/img/header.webp) 90% 80% / cover no-repeat, linear-gradient(180deg, #a1bade 0%, #bccade 38.43%);
    }
}



/* SECTIONS */

.section {margin: 0 auto; text-align: center; padding: 5rem 0 7.5rem;}


/* SINGLEPOST */

.section.singlepost {padding-bottom: 12rem;}
.section.singlepost .container {max-width: 73rem;}
.section.singlepost .container > img {margin-top: 2rem;}
.section.singlepost .container > h1 {
    font-size: 4.45rem;  
    font-weight: 700; 
    text-align: left; 
    margin-top: 2rem;
    text-transform: none;
    color: #202A4E;
    line-height: 1;
    margin-bottom: 3rem;
}
.section.singlepost .container > .date {
    text-align: left;
    font-size: 1.4rem;
    position: relative;
    top: 1.65rem;
    margin-top: 0.75rem;
}


/* SINGLEPAGE */

.section.singlepage .container {max-width: 85rem;}
.section.singlepage .container > h1 {margin-top: 2rem;}
.section.singlepage .container > p {font-size: 4.45rem; line-height: 1.25; font-weight: 600; text-align: center; margin-top: 2rem;}
.section.singlepage .container > p em {color: #6981A6; font-style: normal;}
.section.singlepage .container .list {max-width: 69rem; margin-inline: auto;}


/* SERVICES */

.section.services .container {max-width: 85rem;}
.section.services .container > h2 {margin-top: 1rem;}
.section.services .container > p {font-size: 4.45rem; line-height: 1.25; font-weight: 600; text-align: center; margin-top: 2rem;}
.section.services .container > p em {color: #6981A6; font-style: normal;}
.section.services ul.list {margin-top: -1rem;}
.section.services ul.list li {
    display: grid; 
    grid-template-columns: 2.55rem 19.4rem auto; 
    gap: 2.25rem; 
    border-bottom: 0.15rem solid #9CB0CE;
    padding: 2rem 0;
}
.section.services ul.list li:last-child {border: 0;}
.section.services ul.list li .number > div {
    background: #eb7a08; 
    color: white;
    aspect-ratio: 1; 
    width: 2.55rem;
    line-height: 2.45rem;
    text-align: center; 
    border-radius: 100%; 
    font-weight: bold;
    font-size: 1.38rem;
}
.section.services ul.list li .text {text-align: left; color: #6981A6; font-weight: 600; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.section.services ul.list li .text h3 {color: #202A4E;}
.section.services ul.list li .text p {max-width: 40rem; margin: 0;}
.section.services ul.list li .image {padding-right: 1rem; max-width: 40rem;}


/* WIRE-CUTTING */

.section.wire-cutting {margin-top: -7rem;}
.section.wire-cutting .container {max-width: 50rem}
.section.wire-cutting .container > h2 {color: #202A4E;}
.section.wire-cutting .container > p {text-align: center;}


/* QUICK FACTS */

.section.quick-facts {background: #bccade;}
.section.quick-facts .container {max-width: 73rem;}
.section.quick-facts .container > h2 {color: #202A4E; font-size: 4.44rem; text-transform: none; font-weight: 600;}
.section.quick-facts ul.list {
    display: flex;
    gap: 2.5rem;
    margin-top: 6rem;
}
.section.quick-facts ul.list li {background: #9cb0ce; color: white; flex: 1; padding: 2rem; text-align: left; font-weight: 600; position: relative;}
.section.quick-facts ul.list li::before {
    content: "!";
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: white;
    color: #eb7a08;
    border-radius: 100%;
    width: 2.55rem;
    line-height: 2.45rem;
    aspect-ratio: 1;
    text-align: center;
    font-size: 2.22rem;
    font-weight: 700;
}
.section.quick-facts ul.list li h3 {color: #202A4E; font-weight: 600;}
.section.quick-facts ul.list li h3 span {display: block;}
.section.quick-facts ul.list li h3 span:nth-child(1) {font-size: 5.55rem; position: relative; bottom: 0.75rem}
.section.quick-facts ul.list li h3 span:nth-child(2) {min-height: 5rem;}


/* NEWS */

.section.news {background: #202A4E;}
.section.news .container {max-width: 73rem;}
.section.news .container h2 {color: #eb7a08; font-size: 4.44rem; text-transform: none; font-weight: 600; text-align: left;}
ul.list.news {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    font-size: 2rem;
    gap: 3.5rem;
    margin-block: 4rem 3rem;
}
ul.list.news li {padding-bottom: 3.75rem; text-align: left;}
ul.list.news li .image {margin-bottom: 1.1rem;}
ul.list.news li .date {font-size: 1.22rem; margin-bottom: 0.6rem;}
ul.list.news li .summary a {text-decoration: underline; transition: text-decoration 0.15s ease-in-out;}
ul.list.news li .summary a:hover {text-decoration-color: rgba(32, 42, 78, 0.5);}
ul.list.news li h3 {line-height: 1.3; margin-bottom: 0.5rem;}
.section.news li h3 {font-weight: 600;}
.section.news ul.list.news li .summary a:hover {text-decoration-color: rgba(255, 255, 255, 0.5);}
.section.news ul.list.news li h3 a {color: #6981A6;}
.section.news ul.list.news + div {text-align: right; font-size: 2rem;}
.section.news ul.list.news + div a {color: white; text-decoration: underline; transition: text-decoration 0.15s ease-in-out;}
.section.news ul.list.news + div a:hover {text-decoration-color: rgba(255,255,255,0.5);}
.section.news ul.list.news li, .section.news ul.list.news li a {color: white;}
.section.news ul.list.news {border-bottom: 0.15rem solid white;}

/* WOLRD MAP */

.section.world-map {padding-bottom: 4rem;}
.section.world-map .container {max-width: 83rem;}
.section.world-map .container > p {font-size: 4.45rem; line-height: 1.25; font-weight: 600; text-align: center; margin-block: 2rem 1rem;}
.section.world-map .container > h2 {margin-top: 1rem;}
.section.world-map .container > h2 + p {max-width: 60rem;}
.section.world-map .container > p em {color: #6981A6; font-style: normal;}


/* FOOTER */

.section.footer {background: #202A4E; font-size: 2rem; padding-block: 4rem 3rem;}
.section.footer .container {max-width: 73rem; text-align: left;}
.section.footer .container > p {display: block; line-height: 1.1;}
.section.footer .container > a {display: block; max-width: 54rem; width: 100%; margin-bottom: 1.75rem;}
.section.footer .container {color: #6981a6; text-transform: uppercase; font-weight: 700;}
.section.footer .container .settings {display: flex; font-weight: 600; text-transform: none;}
.section.footer .container .settings > div {flex: 1; color: white; line-height: 1.42; position: relative; bottom: 1.35rem;}
.section.footer .container .settings > div > * {
    display: block; 
    color: white; 
    margin-left: -3.5rem; 
    position: relative; 
    padding-left: 3.5rem;
    margin-bottom: 2rem;
}
.section.footer .container .settings > div img {height: 2.75rem; width: 2.75rem; position: absolute; left: 0; top: 0.25rem;}
.section.footer .container .settings > div:nth-child(2) > p:last-child {font-size: 1.38rem; margin: 4rem -3.5rem 0; line-height: 2.25;}
.section.footer .container .settings > div:nth-child(2) > p:last-child a {display: inline-block; color: white; text-decoration: underline; transition: text-decoration 0.15s ease-in-out;}
.section.footer .container .settings > div:nth-child(2) > p:last-child a:hover {text-decoration-color: rgba(255,255,255,0.5);}


/* IMPRINT */

ul.list.imprint {font-size: 2rem; text-align: left; columns: 30rem; margin-top: 10rem; margin-bottom: -3rem;}
ul.list.imprint li {list-style: none; margin-bottom: 5rem;}
ul.list.imprint li h2 {color: #202A4E;}
ul.list.imprint li p {color: #6981a6; font-weight: 600;}


@media (max-width: 3000px) {
    html {font-size: 0.6vw;}
}
@media (max-width: 2000px) {
    html {font-size: 12px;}
}
@media (max-width: 1200px) {
    body, .section.header #menu {border: 0;}
    .section.footer .container .settings > div > * {margin-left: 0;}
    .section.footer .container .settings > div:nth-child(2) > p:last-child {margin-left: 0; padding-left: 3.5rem;}
    .section.header #menu {font-size: 2.5rem;}
}
@media (max-width: 1000px) {
    .section.quick-facts ul.list {flex-direction: column; gap: 5rem; margin-top: 4rem;}
    .section.quick-facts ul.list li h3 span:nth-child(2) {min-height: 0; margin-bottom: 1.25rem;}
    .section.header .container .h1 {padding-top: 6.75rem;}
    body.menuopen .section.header .container .h1 {display: none;}
}
@media (max-width: 800px) {
    .section.footer .container, .section.news .container {padding-inline: 3rem;}
    .section.footer .container > a {margin-inline: -1rem; width: calc(100% + 2rem); margin-bottom: 3rem;}
    .section.footer .container .settings {flex-direction: column;}
    .section.footer .container .settings > div:nth-child(2) > p:last-child {padding-left: 0;}
    .section.services ul.list li {
        display: flex; 
        flex-direction: column; 
        gap: 1.75rem; 
        padding-bottom: 3rem; 
        margin-bottom: 1rem;
        padding-inline: 2rem;
    }
    .section.services ul.list li .image {padding-right: 0;}
    .section.services .container > p,
    .section.singlepage .container > p,
    .section.world-map .container > p {font-size: 3rem; margin-bottom: 3.5rem;}
    .section.singlepost .container > h1,
    .section.quick-facts .container > h2,
    .section.news .container h2 {font-size: 3rem;}
    ul.list.news {grid-template-columns: 1fr; border: 0; margin-block: 4rem 3rem;}
    .section.news ul.list.news li {border-bottom: 0.15rem solid white;}
    ul.list.news li {border-bottom: 0.15rem solid #202A4E;}
}