* {margin: 0; padding: 0; box-sizing: border-box;}
img {max-width: 100%; display: block; height: auto; }
img[src$="floatedright"] {max-width: 50%; float: right; margin-right: 1rem; }
img[src$="oversize"] { width: 704; height:384; }
img[src$="gespiegeldsize"] {width: 704; height: 384;}
html {font-size: 15px; scroll-behavior: smooth;}
body {font-size: 1.15rem; line-height: 1.5; color: #1d1d1d; background: #132e48; color: white; font-family: 'Fira Sans'; font-weight: 300;}
h1, .h1, h2, h3 {line-height: 1.2; font-family: 'IBM Plex Serif'; font-weight: 400; font-style: normal; font-size: 2.6rem;}
h2 {font-size: 2rem;}
h3 {font-size: 1.5rem;}
h2 strong {color: #cc4004;}
ol + h1,
ul + h1,
p + h1 {margin-top: 3rem;}
a {color: #132e48;}
p, .innercontainer ul, .innercontainer ol {margin-bottom: 1.4em; font-size: 1.15rem;}
.innercontainer ul, .innercontainer ol {margin-left: 1.15rem;}
blockquote {padding-left: 1.5rem; border-left: 1px solid rgba(19, 46, 72, 0.75); font-style: italic;}
.floatright {float: right; width: 50%;}
.floatright img {display: block;}
.floatright a img {border: 1px solid rgba(145, 142, 136, 0.25);}

div.section {background: #efede9; padding: 5rem 0 0; color: #132e48;}
.cols {display: flex; margin: 0 -1rem;}
.cols .col {flex: 1 0 20rem; margin: 0 1rem; display: flex; flex-direction: column; justify-content: center; max-width: calc(50% - 2rem);}
.container {max-width: 92rem; margin: 0 auto; position: relative; padding: 0 3rem;}
.innercontainer {max-width: 48rem; margin: 1rem auto 0; position: relative;}
.innercontainer h1 {display: inline-block; border-top: 1px solid #cc4004; font-size: 2.2rem; padding: 1rem 0 2rem 0;} 
.innercontainer h2 {padding: 1rem 0 0.5rem; font-size: 1.2rem; font-weight: 500;}
.innercontainer div:first-child img {transform-origin: left bottom; transform: scale(1.25) translateY(1px);}

ul.inspirations {display: grid; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); grid-auto-rows: auto; grid-gap: 1rem; margin: 4rem 0 2rem;}
ul.inspirations li {list-style: none; position: relative;}
ul.inspirations li div:first-child {width: 100%; padding-bottom: 60%; position: relative;}
ul.inspirations li div:first-child img {transition: all 0.15s ease-in-out; position: absolute; width: 100%; height: 100%; object-fit: cover; cursor: pointer; filter: contrast(50%) brightness(120%) sepia(100%) hue-rotate(0deg) saturate(20%); border: 1px solid rgba(145, 142, 136, 0.25);}
ul.inspirations li div:first-child img:hover {filter: none;}
ul.inspirations li h2 {padding: 1.25rem 0 0.5rem; font-size: 1.3rem;}
ul.inspirations li p a {color: #cc4004; font-family: 'Fira Sans'; font-weight: 400; text-decoration: none; font-size: 1rem;}
.arrowlink {text-decoration: none; font-weight: 400;}

ul#breadcrumbs {position: absolute; top: 0; margin-top: -4.5rem; display: flex; border-bottom: 1px solid rgba(19, 46, 72, 1); font-size: 1rem; text-transform: lowercase; font-weight: 400;}
ul#breadcrumbs li {list-style: none; color: rgba(19, 46, 72, 1);}
ul#breadcrumbs li a {text-decoration: none; color: rgba(19, 46, 72, 1);}
ul#breadcrumbs li a::after {content: "-"; display: inline-block; padding: 0 0.4rem;}

div.section:last-child {padding-bottom: 8rem;}
.alternating_blocks div.section p {display: inline-block; max-width: 28rem;}
.alternating_blocks div.section p:first-child, .innercontainer > div > p:first-child, h1 + p {color: #cc4004; font-family: 'Fira Sans'; font-weight: 400;}
.alternating_blocks div.section .col:nth-child(2) {padding: 0 0 0 6rem;}
.alternating_blocks div.section .col:nth-child(2) h2 {margin: 0 0 0 -6rem; padding: 1.15rem 0 1.35rem 6rem; display: inline-block; border-top: 1px solid #cc4004;}
.alternating_blocks div.section .col:nth-child(2) > div:first-child {line-height: 0;}
.alternating_blocks div.section .col:nth-child(2) img {display: inline-block; margin: 0 0 0 -6rem; transform-origin: left bottom; transform: scale(1.25) translateY(1px);}
.alternating_blocks div.section:nth-child(odd) .cols {flex-direction: row-reverse;}
.alternating_blocks div.section:nth-child(odd) .col:nth-child(2) {text-align: right; padding: 0 6rem 0 0;}
.alternating_blocks div.section:nth-child(odd) .col:nth-child(2) h2 {margin: 0 -6rem 0 0; padding: 1.15rem 6rem 1.35rem 0;}
.alternating_blocks div.section:nth-child(odd) .col:nth-child(2) img {margin: 0 -6rem 0 0; transform-origin: right bottom;}

#reviews {position: relative; border-top: 1px solid #cc4004; border-bottom: 1px solid #cc4004;}
#reviews h2 {position: absolute; top: 50%; transform: translateY(-50%);}
#reviews div {width: 100%; overflow: hidden; height: 100%; position: relative;}
#reviews div ul {display: flex; height: 100%; align-items: center; padding: 1.5rem 0;}
#reviews div ul li {list-style: none; min-width: 100%; text-align: center; padding: 0 3rem 0 9.5rem; line-height: 1.3; transition: all 0.5s ease-in-out;}
#reviews div ul li strong {color: #cc4004; font-family: 'Fira Sans'; font-weight: 400; font-weight: normal;}
#reviews a {cursor: pointer; font-size: 1.5rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: #cc4004;}

#preheader {font-size: 1rem; padding: 1.5rem 0 0.5rem; text-align: right; border-bottom: 0.3rem solid #e4e2d7; font-weight: 400;}
#preheader a {color: white; text-decoration: none; margin-left: 2rem; opacity: 0.75;}
#header {background: #e4e2d7; border-bottom: 1px solid rgba(204, 64, 4, 0.5); position: relative;}
#header > img {width: 100%; opacity: 0.28; height: 32rem; position: relative; z-index: 0; margin-top: -32rem; object-fit: cover;}
#header > .container {position: relative; height: 32rem; width: 100%; position: relative; z-index: 1; display: flex; justify-content: space-between;}
#header #brand {padding-top: 1.75rem;}
#header #brand a {display: block; width: 21rem; max-width: calc(100% - 4rem);}
#header #brand img {max-width: 19rem; width: 100%;}
#header ul {text-align: right; margin-top: 2.5rem;} 
#header ul li {list-style: none;}
#header ul li a {color: #132e48; padding: 0.5rem 0; display: block; text-transform: lowercase; text-decoration: none; font-weight: 400;}
#header ul li.active a {color: #cc4004;}
#header .h1holder {position: absolute; color: #132e48; text-align: center; bottom: 5rem; width: calc(100% - 3rem); font-weight: 400; pointer-events: none;}
#header .h1holder h1 {font-weight: 400;}
#header .h1holder div {margin: 1rem 0 0; padding: 0;}
#header #menutoggle {z-index: 10; display: none; background: none; position: absolute; right: 0.6rem; top: 3.35rem; height: 2.8rem; width: 2.8rem; border: 0; cursor: pointer;}
#header #menutoggle span:first-child {display: none;}
#header #menutoggle span {display: block; margin: 0.4rem; width: 2rem; height: 2px; background: #132e48; position: absolute;}
#header #menutoggle span:nth-child(2) {top: calc(0.4rem + 0px);}
#header #menutoggle span:nth-child(3) {top: calc(0.4rem + 8px);}
#header #menutoggle span:nth-child(4) {top: calc(0.4rem + 16px);}
.menuopen #header #menutoggle span:nth-child(2) {transform: translateY(8px) rotate(45deg);}
.menuopen #header #menutoggle span:nth-child(3) {display: none;}
.menuopen #header #menutoggle span:nth-child(4) {transform: translateY(-8px) rotate(-45deg);}

#prefooter {background: #e4e2d7; border-top: 1px solid rgba(204, 64, 4, 0.5); padding: 1rem 0 2rem; color: #132e48; line-height: 1.7;}
#prefooter p {font-size: 1.05rem;}
#prefooter img {display: inline-block; height: 0.85rem;}
#prefooter .cols {align-items: flex-start; justify-content: space-between; padding: 0 8rem;}
#prefooter .cols .col {max-width: 15rem; flex: 0 0 auto; padding: 2rem 0 0; }
#prefooter h3 {font-size: 1.2rem; color: #cc4004; font-weight: 500; padding-bottom: 1rem;}
#footer {padding: 1.5rem 0 0.5rem; font-size: 1rem; font-weight: 400;}
#footer .cols {justify-content: space-between;}
#footer .cols .col {flex: 0 0 auto; opacity: 0.75;}

form > div {display: flex; flex-direction: column; margin-bottom: 1rem;}
form > div label {display: block; padding-bottom: 0.25rem;}
form > div input, form > div textarea {
    font-family: 'Fira Sans'; 
    font-weight: 300;
    font-size: 1.15rem;
    line-height: 1.4;
    padding: 0.25rem;
    color: #132e48;
    border: 1px solid rgba(19, 46, 72, 0.5);
} 
.btn {
    height: 2.5rem;
    padding: 0 1.25rem;
}
form > div input[type="submit"] {
    background: #132e48;
    color: white;
    font-weight: 400;
    border: 0;
    cursor: pointer;
    margin-top: 0.5rem;
}

@media screen and (max-width: 75rem) {
    .alternating_blocks div.section .col:nth-child(2) {padding: 0 0 0 0rem;}
    .alternating_blocks div.section .col:nth-child(2) h2 {margin: 0 0 0 -0rem; padding: 1.15rem 0 1.35rem 0rem;}
    .alternating_blocks div.section .col:nth-child(2) img {margin: 0 0 0 -0rem;}
    .alternating_blocks div.section:nth-child(odd) .col:nth-child(2) {padding: 0 0rem 0 0;}
    .alternating_blocks div.section:nth-child(odd) .col:nth-child(2) h2 {margin: 0 -0rem 0 0; padding: 1rem 0rem 1.35rem 0;}
    .alternating_blocks div.section:nth-child(odd) .col:nth-child(2) img {margin: 0 -0rem 0 0;}
    
    .alternating_blocks div.section .col:nth-child(1) img {height: 100%; width: 100%; object-fit: cover; object-position: 60% 50%;}

    ul#breadcrumbs {margin-top: -9rem;}
    #prefooter .cols {padding: 0;}
    #header ul {margin-top: 1rem;}
}
@media screen and (max-width: 50rem) {
    .container {padding: 0 2rem;}
    #header .h1holder {width: calc(100% - 4rem); bottom: 2.5rem;}
    ul#breadcrumbs {display: none;}
}
@media screen and (max-width: 40rem) {
    .container {padding: 0 1rem;}
    .alternating_blocks div.section .cols {display: block;}
    .cols .col {max-width: calc(100% - 2rem);}
    .alternating_blocks div.section .col:nth-child(2) > div:first-child {margin-top: 2rem;}
    .alternating_blocks div.section:nth-child(odd) .col:nth-child(2) {text-align: left;}
    .alternating_blocks div.section:nth-child(2n+1) .col:nth-child(2) img {transform-origin: left bottom;}
    #header .h1holder {width: calc(100% - 2rem);}
    
    .alternating_blocks div.section .col:nth-child(2) h2, .alternating_blocks div.section:nth-child(odd) .col:nth-child(2) h2 {padding-left: calc(100vw - 33rem);}
    .alternating_blocks div.section .col:nth-child(2) p {margin-left: calc(100vw - 33rem);}

    #preheader {padding-top: 0.5rem;}
    #preheader .container a {margin: 0; display: block; text-align: center;}
    #footer .cols {display: block; text-align: center;}
    #footer .cols .col {padding-bottom: 0.75rem;}
    #prefooter .cols {display: block;}
    #prefooter .cols .col {margin-left: auto; display: block; margin-right: auto; text-align: center;}
 
    .floatright {float: none; width: 100%;}

}

@media screen and (max-width: 35rem) {
    .alternating_blocks div.section .col:nth-child(2) h2, .alternating_blocks div.section:nth-child(odd) .col:nth-child(2) h2 {padding-left: 0;}
    .alternating_blocks div.section .col:nth-child(2) p {margin-left: 0;}
    #header, #header > .container {display: block; height: 10rem; overflow: hidden;}
    #header > img {margin-top: -10rem; height: 48rem;}
    #header ul, #header .h1holder {display: none;}
    #header #menutoggle {display: block;}
    #header #brand img {max-width: 100%; width: auto; height: 8rem; margin-top: -1rem;}
    .menuopen #header, .menuopen #header > .container {display: block; height: 48rem;}
    .menuopen #header > img {height: 48rem; margin-top: -48rem;}
    .menuopen #header ul, .menuopen #header .h1holder {display: block;}
    #header ul {margin-top: 1.5rem; text-align: center;}
    #header .h1holder {bottom: 2.25rem;}

    #reviews h2 {position: relative; transform: none; padding: 1rem 0;}
    #reviews div ul {padding: 0 0 1rem;}
    #reviews div ul li {text-align: left; padding: 0;}
    #reviews div ul li strong {display: block;}
    #reviews div ul li span {display: block; text-align: right; padding-top: 0.5rem;}
    #reviews a {top: 1rem; transform: none;}
}