@import url(webfonts.css);

:root {
    --c-dark: #343333;
    --c-light: #f2f2f2;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;

    background-color: var(--c-light);
    color: var(--c-dark);

    font-family: 'AlegreyaSans';
    font-size: 1.5rem;
    font-weight: 400;

    line-height: 1.33333333;

    padding-top: 6.875rem;

    /* border: 1px solid red; */

    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
}

img {
    max-width: 100%;
}

header {
    border-bottom: 2px solid;
    background-color: var(--c-light);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 100;

    min-height: 6.875rem;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

header>h2 {
    min-height: 6.875rem;
    /* background-color: rebeccapurple; */
    display: flex;
    align-items: center;
}

header>h2>img {
    max-width: 21.5rem;
    min-height: 6.875rem;
}

nav {
    font-weight: 800;
    display: flex;
    align-items: flex-end;

    margin-right: 0.375em;;
}

nav a {
    color: var(--c-dark);
    text-decoration: none;

    

    /* background-color: lightblue; */

    position: relative;
}

nav.main_nav a {
    padding: 1em 0.375em .5em;
    margin: 0 .5em;
    position: relative;

    transition: padding 0.3s ease-in-out;
    
} 

#menu_open_btn, 
#menu_close_btn {
    display: none;
}

nav.main_nav a:not(.active):hover {
    opacity: .7;
    /* padding-bottom: .6125em; */

    transition-delay: .15s;
    
}

nav.main_nav a::after {
    content: '';
    background-color: var(--c-dark);

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: .125em;
    width: 0%;

    margin: auto;

    transition: all 0.3s ease-in-out;

    opacity: .7;
}

nav.main_nav a:hover::after {
    width: 100%;
    opacity: 1;
}

nav.main_nav a.active::after {
    height: .25em;
    width: 100%;
    opacity: 1;
}

nav.main_nav a.btn::after {
    width: 0;
}

nav.select_language {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;

    position: absolute;
    top: -2px;
    top: 0;
    right: 0;

    display: flex;
    align-items: baseline;

    /* background-color: lightgreen; */
    padding-right: .6em;
}

nav.select_language a {
    padding: 0.75em .75em .5em;
    /* background-color: lightcoral; */
}

nav.select_language a:not(.active) {
    /* display: inline-block; */
    /* content: '|';
    font-size: 1rem;
    
    margin: -1.5em 0.1em 0; */
    opacity: .4;
}

nav.select_language a:not(.active):hover {
    background-color: var(--c-dark);
    color: var(--c-light);
    opacity: 1;
}

nav.select_language span {
    font-size: 1rem;
    opacity: .4;
    /* margin: 0 0.1em ; */

    margin-top: 1em;
}

main {
    /* padding: 0 8.25rem; */

    /* max-width: 110ch; */
    margin: 0 auto;
    min-height: 63vh;

    /* border: 1px solid blue; */
}

h1 {
    font-family: 'Alegreya';
    font-weight: 900;
    font-size: 4rem;
    line-height: 1;
    letter-spacing: 0.05em;

    margin-left: -2.25rem;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    
}

p {
    margin: 1.2rem 0;
    max-width: 55ch;
}

span.small_caps {
    font-variant: all-small-caps;
}

span.h_space {
    /* background-color: red; */
    padding: 0 0.075em;
}

h4
, section>ol>li
{
    font-weight: 500;
    font-style: italic;
    font-size: 1.75rem;
    line-height: 2rem;

    margin-top: 2em;

    max-width: 82ch;
}

section>ol>li>ol>li {
    /* color: rebeccapurple; */

    font-size: 1.5rem;
    font-weight: 400;
    font-style: normal;

    line-height: 1.33333333;
}

section>ol>li {
    margin-top: 1em;
    margin-bottom: .5em;
    max-width: 55ch;
}

/* section>ol>li */

main a {
    color: var(--c-dark);
    text-decoration: none;
    /* font-weight: 500; */
}

main a:hover {
    opacity: .6;
    /* font-weight: 500; */
}



section {

    /* border: 1px solid lightseagreen; */

    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
    
    max-width: 120ch;
    /* width: 120ch; */

    padding-left:  8.25rem;
    padding-right: 1rem;
    margin: auto;
}

section.hero_slider {
    padding-right: 8.25rem;
    max-width: 100%;
    width: 100%;
    justify-content: center;

    margin-bottom: 1rem;
}

section.services {
    padding-right: 8.25rem;
    justify-content: space-between;
}

h1, h4 {
    width: 100%;
}

h3 {
    font-weight: 500;
    font-size: 2.25rem;
    font-style: italic;
    margin-bottom: 0;
    line-height: 1;
}

h3::before {
    content: '‹';
    padding-right: .125em;
}

h3::after {
    content: '›';
    padding-left: .125em;
}

em {
    /* background-color: red; */
    margin-top: 0;
}

article {
    max-width: 65%;
}
picture {
    width: 35%;
    /* margin-top: 1em; */
    padding: 2em;
    /* padding-left: 2em; */
    padding-right: 0;
}

article, picture {
    /* border: 1px solid red; */
}

/* Services */

section.services div {

    width: 48%;

    

    /* border: 1px solid red; */
}

section.services div.both {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}
section.services > div > em
{
    display:block; min-height: 2.75em;
}

section.services > em
{
    width: 100%; 
    text-align: center; 
    margin-bottom: 2em;
}

section.services div figure {
    border: 2px solid;

    padding: 1.4em 1em;
    font-size: 1.4em;
    font-weight: 700;

    margin: 1em 0;

    position: relative;
}

section.services div.both figure {
    width: 48%;
    margin: .5em 0;
}

/* section.services div.both figure:nth-of-type(odd) {
    position: relative;
    top: -1em;
} */

section.services div figcaption {
    position: absolute;
    right: 0.5em;
    bottom: 0.25em;

    font-family: 'Alegreya';
    font-weight: 400;
    font-style: italic;

    font-size: .9em;

    opacity: .4;
}

.currency {
    padding-left: .07em;
}

hr {
    border-bottom: 2px solid;
    width: 80%;
    margin: 2.5em auto;
    opacity: .4;
}

/* Gallery */

.gallery {
    --column_amount: 10;
    
    display: block;

    margin: 4px;
    margin-top: 6px;
    margin-bottom: 0;

    column-count: var(--column_amount);
    column-gap: 4px;

    max-width: 100%;
    padding: 0;
}

@media (max-width: 1920px) {
    .gallery {
        --column_amount: 9;
    }
}
@media (max-width: 1680px) {
    .gallery {
        --column_amount: 8;
    }
}
@media (max-width: 1440px) {
    .gallery {
        --column_amount: 6;
    }
}
@media (max-width: 1160px) {
    .gallery {
        --column_amount: 5;
    }
}
@media (max-width: 920px) {
    .gallery {
        --column_amount: 4;
    }
}
@media (max-width: 780px) {
    .gallery {
        --column_amount: 3;
    }
}
@media (max-width: 580px) {
    .gallery {
        --column_amount: 2;
    }
}

.thumb {
    display: block;
    overflow: hidden;
    margin-bottom: 4px;
    position: relative;
    /* border-bottom: 4px solid red; */
    /* padding-bottom: 4px; */
}
/* 
.thumb a::after {
    content: '+';
    color: var(--c-light);
    font-size: 2em;
    border: .08em solid;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.2em;
    height: 1.2em;

    background-color: var(--c-dark);

    transform: translate(-.6em, -.6em);

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    transition: opacity .5s ease-in-out;
    opacity: 0;
}

.thumb a:hover::after {
    opacity: 1;
} */

.thumb a:hover {
    opacity: 1;
}

.thumb a:hover img {
    transform: scale(1.2);
}

/* .thumb::after {
    content: '•';
    display: block;
    height: auto;
    border-bottom: 1px solid blue;
} */
/* .thumb_hoch {
    
}
.thumb_quer {
    
} */
.thumb img {
    display: block;
    width: 100%;

    transition: transform .5s ease-in-out;

    /* padding-bottom: 4px; */
}

/* AGB */

ol {
  counter-reset: item;
  list-style-type: none;
  width: 100%;
}

ol>li {
    counter-increment: item;
    margin: .25em 0;
}

ol > li:before {
    content: counters(item, ".") ". ";
    /* color: red; */
    /* width: 10em; */
    padding: 0 1em 0 0;
} 

li ol > li {
    display: flex;
    /* flex-wrap: wrap; */
}

li ol > li:before {
    content: counters(item, ".") " ";
    /* color: blue; */
    padding-left: 0.5rem;
    padding-right: 1.2rem;
}

/* ol > li::marker { content: counters(list-item, '.') '. '; } */



/* footer */

footer {
    background-color: var(--c-dark);
    color: var(--c-light);

    font-weight: 500;

    margin-top: 3em;

    padding: 1.5rem 8.25rem 1.5rem;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

}

footer a {
    color: var(--c-light);
    text-decoration: none;

    display: block;
    margin: 1.2rem 0;

    /* min-width: 2.25rem; */
}

footer a:hover {
    opacity: .6;
}

footer a:hover::before {
    /* content: '→';
    padding-right: .25em; */
}

footer p {
    /* border: 1px solid red; */
}

footer p.logo img {
    height: 12.5rem;
    height: 15rem;
    margin-top: -1rem;
}

footer .legal_and_social p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

footer .legal_and_social a {
    /* border: 1px solid yellow; */
    
    margin-left: 1em;
    margin-right: 1em;
}

footer .legal_and_social a.legal {
    /* width: 45%; */
    text-align: center;
}


footer .legal_and_social a.social {
    width: 2.25rem;
    /* margin: 2.0em 1.0em 0; */
    /* margin-right: 0; */

    margin-top: 1.0em;
}

footer .legal_and_social a.social:last-child {
    /* margin-right: 3.0em; */
    /* background-color: blue; */
}


#menu_open_btn, #menu_close_btn {
    text-indent: -9999em;
    width: 60px;
    height: 60px;
    background-image: url(../images/uvkVy7qUBWyQ.svg);

    position: absolute;
    top: 15px;
    right: 15px;
}

#menu_close_btn {
    background-image: url(../images/bhsxM6MU6Ofh.svg);
}

#menu_open_btn:hover, #menu_close_btn:hover {
    opacity: .6;
}


@media (max-width: 62.5rem) { /* 1000px */
    body {
        /* background-color: red; */
        font-size: 1.25rem;
        padding-top: 5.95rem;
    }

    header, header>h2, header>h2>img {
        min-height: 5.8rem;
        
    }

    header>h2>img {
        max-width: 18.5rem;
    }

    section {
        padding-left: 3.25rem;
    }
    section.hero_slider {
        padding-right: 3.25rem;
    }
    section.services {
        padding-right: 3.25rem;
    }

    footer {
        padding: 1.0rem 3.25rem ;
    }
}

@media (max-width: 52.5rem) { /* 840px */
    body {
        /* background-color: blue; */
    }

    header {
        display: block;
        /* border: 1px solid red; */
    }
    nav.select_language {
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        top: auto;
        flex-direction: row;
    }

    nav {
        flex-direction: column;
    }
    
    nav a {
        display: none;
    }

    #menu_open_btn {
        display: block;
    }

    .nav_opened nav a {
        display: block;
    }

    .nav_opened #menu_open_btn {
        display: none;
    }

    .nav_opened #menu_close_btn {
        display: block;
    }

    .nav_opened nav.select_language {
        display: flex;
    }

    .splide__track {
        width: 90%;
    }

    .splide__pagination {
        top: calc(100% + .55rem);
    }

    .splide__arrow {
        /* margin-top: -.1em;
        margin-right: -1em;
        top: calc(100% + .25rem);
        top: 100%; */
        top: calc(100% + .55rem - 5px);
        /* transform: translateY(-50%); */
    }

    footer {
        /* border: 2px solid red; */
        flex-wrap: wrap;
    }

    

    .legal_and_social {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        width: 100%;

        /* border: 1px solid red; */
        /* padding: 0; */
    }
}

@media (max-width: 36rem) { /* 576 */

    body {
        /* background-color: greenyellow; */
    }
    header h2 {
        margin-left: -1rem;
    }
    h1 {
        font-size: 2.25rem;
        margin-left: -0.72rem;
        margin-right: -0.72rem;
    }
    section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    section.hero_slider {
        padding: 0;
    }
    section.services {
        padding-right: 1.5rem;
    }
    section.services div {
        width: 100%;
    }
    section.services > div > em {
        min-height: auto;
    }
    .splide__track {
        width: 100%;
    }

    .splide__pagination__page {
        width: 50px;
        margin: 10px 5px;
    }
    
    article {
        max-width: 100%;
        padding-right: 0;
    }
    picture {
        width: 100%;
        padding-right: 2em;
    }
    footer {
        padding: 1.0rem ;
    }
    footer p.logo {
        width: 100%;
        text-align: right;
    }
    footer p.logo img {
        height: 12.5rem;
    }

    footer .legal_and_social p {
        margin: 0;
    }

    footer .legal_and_social a.social:last-child {
        margin-right: .5em;
    }
}