:focus-visible { outline: 2px solid #000; outline-offset: 2px; } body, html{ margin: 0; padding:0; /*height: 100%;*/ font-family: 'Metropolis', Gotham, Montserrat, Verdana, Geneva, Arial, sans-serif; line-height: 1.6em; font-size: 16px; --font-size-base:16; font-size: clamp(1rem, calc(1rem + (var(--font-size-base) * (1.25 - 1)) * ((100vw - 480px) / (1600 - 480))), 1.25rem); color: #000; background-color: #f0eeec; text-decoration:none; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } a { color: hsl(var(--linkcolor)); text-decoration:none; outline:0 none; -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; } a:hover { color:hsl(var(--linkcolor-hover)); } p {margin:0 0 0.625em 0;} blockquote {margin-left:2em;} h1, .h1 { color: var(--color-text); font-size:2rem; font-size:clamp(2rem, calc(2rem + (var(--font-size-base) * (3 - 2)) * ((100vw - 480px) / (1600 - 480))), 3rem); line-height:1.35em; font-weight:200; font-style:normal; margin-bottom:0.5em; margin-top: 0; } .logo { padding-top: 2.2em; padding-left: 2.2em; margin-left: -2.2em; margin-bottom: 5em; background: url('../images/logo-Rieth.svg') left bottom no-repeat; background-size: contain; } .logo h1{transform: translateY(0.1em); max-width: 20ch} .logo h1>span.medium{display:block; margin-top: -1.3rem; line-height: 1.3em; font-size: 0.9rem} @media(max-width:600px){ .logo {margin-bottom: 7em} .logo h1 { transform: translateY(1.4em); max-width: 20ch; line-height: 1.2em; } .logo { padding-left: 1em; margin-left: -1em; } .logo h1>span.medium { margin-top: 0; } } @media (max-width: 440px) { .logo h1 { transform: translateY(2em); } } p, .p, div, ul {font-size: 1rem; line-height: 1.6em; letter-spacing: 0.04em; font-weight: 300} .m{font-size: 1.25rem;line-height: 1.5em;} .p{font-size: 1rem; line-height: 1.5em;} .s{font-size: 0.8rem;line-height: 1.5em;} .xs {font-size: 0.6rem;line-height:1.5em;} .thin{font-weight:100} .extra-light{font-weight:300} .light{font-weight:300} .regular{font-weight:400} .medium{font-weight:500} .semi-bold{font-weight:600} .bold{font-weight:700} .extra-bold{font-weight:800} .black{font-weight:900} .capitels {text-transform: uppercase; letter-spacing: 0.05em} sup, sub { vertical-align: baseline; position: relative; top: -0.4em; } sub { top: 0.4em; } a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.05em; text-underline-offset: 0.15em; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, text-decoration-color 0.5s ease-in-out, text-decoration-thickness 0.5s ease-in-out; } a:hover { text-decoration-color: var(--color-text); text-decoration-thickness: 0.05em; } .button_box{ display:inline-block; background:transparent; color:#344557; font-weight: normal; font-style:normal; padding:0.5em 2em; margin-bottom: 1em; border: 1.5px solid currentColor; -webkit-border-radius: 2em; border-radius: 2em; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none !important; } .button_box:hover{ background:#344557; border-color: #344557; color:#fff; } @media(max-width:600px){ .button_box{font-size: 0.9em; font-weight: 400; padding: 0.5em 1.2em; } } ul.arrow-nav { list-style-type: none; list-style-position:outside; margin:2em 0 3em 0; padding:0; } ul.arrow-nav li { padding: 0; margin: 0; border-bottom: 1.5px solid #a9bbca; } ul.arrow-nav li:first-child { border-top: 1.5px solid #a9bbca; } ul.arrow-nav li a{ position: relative; font-size: 1.2rem; font-weight: 300; display: block; padding:0.5em 2.5em 0.5em 0; text-decoration: none !important; } ul.arrow-nav li a:after { position: absolute; right:0; top:calc(50% - 0.35em); transform:translateX(-1em); -webkit-transition: transform 0.3s ease;-o-transition: transform 0.3s ease;transition: transform 0.3s ease; background-color: currentColor; content: ""; width: 0.75em; height: 0.75em; -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23000000' points='10,1.8 18,10 10,18.2 '/%3E%3Cline fill='none' stroke='%23000000' x1='2' y1='10' x2='18' y2='10'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; /* -webkit-clip-path: padding-box inset(0.75em 0); clip-path: padding-box inset(0.75em 0);*/ } ul.arrow-nav li a:hover:after{transform:translateX(0);} #display { display:none; height: 50px; background-image:url("data:image/svg+xml;utf8,WIR ZIEHEN UM!"); animation: moveBackground 5s linear infinite; -webkit-animation: moveBackground 5s linear infinite; } @keyframes moveBackground { 0% { background-position: 0 0; } 100% { background-position: -300px 0; } } @-webkit-keyframes moveBackground { 0% { background-position: 0 0; } 100% { background-position: -300px 0; } } main { display: grid; grid-gap: 0; grid-template-columns: 50% 50%; min-height: 100vh} main>div {padding: clamp(2rem, 5vw, 5rem);} main>div:first-child{grid-column: 1; grid-row: 1 / 3; align-self: anchor-center;} main>div:nth-child(2) { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end;} main>div:nth-child(3) { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: flex-start;} main>div>*{max-width:36rem} @media(max-width:1150px){ main {display: block;} #display{display: block;} } @media(max-width:600px){ main>div:nth-child(3) { min-height: 100vh} } .bg-color-01 {background-color: #627c97; color: #fff; --color-text: #fff} .bg-color-02 {background-color: #5d8480; color: #fff; --color-text: #fff} .cols {display: flex; justify-content: space-between} @media(max-width:480px){ .cols {flex-direction: column; gap:1em} } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: normal; font-weight: 100; src: url('../fonts/Metropolis-Thin.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: italic; font-weight: 100; src: url('../fonts/Metropolis-ThinItalic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: normal; font-weight: 200; src: url('../fonts/Metropolis-ExtraLight.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: italic; font-weight: 200; src: url('../fonts/Metropolis-ExtraLightItalic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: normal; font-weight: 300; src: url('../fonts/Metropolis-Light.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: italic; font-weight: 300; src: url('../fonts/Metropolis-LightItalic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: normal; font-weight: 400; src: url('../fonts/Metropolis-Regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: italic; font-weight: 400; src: url('../fonts/Metropolis-Italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: normal; font-weight: 500; src: url('../fonts/Metropolis-Medium.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: italic; font-weight: 500; src: url('../fonts/Metropolis-MediumItalic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: normal; font-weight: 600; src: url('../fonts/Metropolis-SemiBold.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: italic; font-weight: 600; src: url('../fonts/Metropolis-SemiBoldItalic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: normal; font-weight: 700; src: url('../fonts/Metropolis-Bold.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: italic; font-weight: 700; src: url('../fonts/Metropolis-BoldItalic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: normal; font-weight: 800; src: url('../fonts/Metropolis-ExtraBold.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: italic; font-weight: 800; src: url('../fonts/Metropolis-ExtraBoldItalic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: normal; font-weight: 900; src: url('../fonts/Metropolis-Black.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Metropolis'; font-style: italic; font-weight: 900; src: url('../fonts/Metropolis-BlackItalic.woff2') format('woff2'); }