/* CSS Dokument */

@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&family=Poppins:wght@200;400&display=swap');


/* ALLGEMEIN */

/* Violett: #570530 */

* { margin: 0; padding: 0; box-sizing: border-box!important; -webkit-box-sizing: border-box!important; outline: none; }
html { background: #ffffff; font-family: 'Poppins'; font-size: 16px; font-weight: 200; line-height: 1.35; }
h1 { color: #750550; font-family: 'Yeseva One', serif; font-size: 6rem; position: absolute; bottom: 2rem; }
h1 span { display: block; font-family: 'Poppins'; }
h2 { color: #750550; font-size: 1.75rem; margin: 0 0 2rem; }
h3 { color: #570530; font-family: 'Poppins'; font-size: 1.25rem; font-weight: 400; letter-spacing: 1px; margin: 0 0 1rem; text-transform: uppercase; }
a { text-decoration: none; }
p { font-size: 1.25rem; margin: 0 0 1rem; }
img { display: block; max-height: 100%; max-width: 100%; }

ul						{ font-size: 1.25rem; margin-bottom: 1rem; list-style: none; }
ul li					{ margin: 0 0 0.5rem 1rem; }
ul li:before	{ color: #570530; content: "■"; margin: 0 0.5rem 0 -1rem; }


.flex { width: 100%; overflow: auto; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }


.legal { background: #570530; margin: 3rem 0 0; padding: 0.375rem 2rem; text-align: right; width: 100%; }
.legal a { color: #ffffff; font-size: 0.875rem; margin: 0 0.5rem; text-transform: uppercase; }

/* Struktur */


/* KACHELN */

.tile { background: #eeefee; color: #414941; position: relative; }
.tile span ,.tile span p { font-size: 1.25rem; }
.tile span.strong { color: #750550; font-size: 1.375rem; font-weight: 400; }
.tile span svg { margin-bottom: 1rem; }
/*
.tile:nth-child(3n+1) { background: #750550; color: #ffffff; }
.tile:nth-child(3n+1) span { color: #ffffff; }
*/

.tile.logo { background: #eeefee; padding: 2rem; }
.tile.logo img { height: 100%; margin: 0 auto; width: auto; }

.tile .placement { bottom: 0; height: auto; padding: 1.5rem; position: absolute; width: 100%; }
.tile span.strong { display: block; margin: 0 0 1rem; }
.tile span.more	{ color: #750550; display: block; font-size: 1rem; font-weight: 400; margin: 0.75rem 0 0; text-transform: uppercase; }

.tile.color { background: #750550; color: #eeefee; }
.tile.color span { color: #ffffff; }

.tile.picture span.animated { bottom: 3rem; color: #ffffff; font-weight: 400; opacity: 0; position: absolute; transition: 0.5s ease all; }
.tile.picture:hover span.animated { bottom: 1.5rem; opacity: 1; transition: 0.5s ease all; }

.tile.headline span {  font-size: 2.25rem; font-weight: 400; text-shadow: 2px 2px #750550; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.tile.icon img { width: 70%; }
.tile.color.icon img { color: #ffffff; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(50deg) brightness(106%) contrast(101%); width: 3rem; }

.single-tile { margin: 1.125rem 1%; height: 40vh; min-height: 350px; width: 18%; }
.double-tile { margin: 1.125rem 1%; height: 40vh; min-height: 350px; width: 38%; }

/* PAGES & THEMES */


.space { padding: 2rem 3rem; }

.ratio_a  { min-height: 100%; padding: 0 0 0 38.2%; right: 0; width: 100%; z-index: 1002; }

.ratio_b  { height: 100%; overflow: hidden; position: fixed; width: 38.2%; z-index: 1001; }
.ratio_b img  { height: 100%; object-fit: cover; width: 100%; }

.nav { }
.nav .menu { width: 50%; }
.nav .menu a { color: #570530; display: block; margin: 0.5rem 0 0; }
.nav .logo { width: 50%; text-align: right; }
.nav .logo a { color: #750550; font-family: 'Yeseva One', serif; font-size: 2rem; }