/* ====== Pattern: ====== */

.area-grid {
    --area-grid-gap-h: 2rem;
    --area-grid-gap-v: 2rem;
    position: static;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--area-grid-gap-h) var(--area-grid-gap-v);
}
.area-grid > * {
    position: static;
    margin: 0;
}

/* ====== Global: ====== */

.wrap--global, .wrap--global-dark {
    overflow: hidden;
    padding: 1.5rem 3rem;
}
.wrap--global-dark {
    background: var(--color-id-cobalt);
    color: var(--color-id-oyster);
}
.area--global {
    position: relative;
    max-width: 1600px;
    margin: 10% auto; 
}

/* ====== Project: ====== */

.wrap--home-project {
    position: relative;
}
.area--home-project > * {
    position: relative;
    z-index: 1;
}
.area--home-project .role--circle {
    position: absolute;
    width: 66%;
    max-width: 66vh;
    background: var(--color-id-perla);
    border-radius: 1000vw;
    aspect-ratio: 1/1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.area--home-project .role--title {
    grid-area: 1/2/1/13;
    margin-bottom: 5%;
}
.area--home-project .role--text {
    grid-area: 2/2/2/6;
}
.area--home-project .role--image {
    grid-area: 2/7/2/13;
}

/* ====== Location: ====== */

.wrap--home-location {
    padding: 1.5rem 3rem;
    position: relative;
}

.area--home-location {
    margin-bottom: 5%;
}
.area--home-location .role--title {
    grid-area: 1/2/1/8;
    margin-bottom: 5%;
    position: relative;
    z-index: 1;
}
.area--home-location .role--text {
    grid-area: 2/2/2/5;
    position: relative;
    z-index: 1;
}
.area--home-location .role--image {
    grid-area: 1/5/4/13;
}

/* ====== Video: ====== */

.area--home-video {
    position: relative;
}
.area--home-video .role--video {
    grid-area: 1/2/1/12;
    aspect-ratio: 16/9;
}
.area--home-video .role--video > video {
    display: none;
}

/* ====== Visual: ====== */

.wrap--home-visual {
    position: relative;
    margin-top: -2px;
}
.wrap--home-visual:before {
    content: '';
    display: block;
    position: absolute;
    background: var(--color-id-cobalt);
    left: 0;
    right: 0;
    top: 0;
    bottom: 50%;
}
.area--home-visual .role--image {
    position: relative;
    grid-area: 1/2/1/12;
    aspect-ratio: 16/9;
}

/* ====== Concept: ====== */

.area--home-concept {
    position: relative;
}

.area--home-concept .role--title {
    grid-area: 1/1/2/13;
    margin-bottom: 5%;
    text-align: center;
}
.area--home-concept .role--text {
    grid-area: 2/8/3/12;
}
.area--home-concept .role--image {
    grid-area: 2/1/3/7;
}

/* ====== Service: ====== */

.wrap--home-service {
    position: relative;
    margin-top: -2px;
}
.wrap--home-service:before {
    content: '';
    display: block;
    position: absolute;
    background: var(--color-id-oyster);
    left: 0;
    right: 0;
    top: 0;
    bottom: 80%;
}
.area--home-service {
    position: relative;
    margin-top: 0;
}
.area--home-service .role--image {
    grid-area: 1/2/2/12;
    aspect-ratio: 1.5/1;
    overflow: hidden;
}
.area--home-service .role--image > img {
    display: block;
    width: 100%;
}
.area--home-service .role--box {
    grid-area: 2/3/3/11;
    margin-top: -4.5rem;
    position: relative;
    z-index: 1;
    background: var(--color-id-perla);
    color: var(--color-id-urban-grey);
    border: 1px solid rgba(0,0,0, 0.1);
    padding: 2.5rem 3rem;
    box-shadow: 0 15px 20px rgba(0,0,0,0.5);
    overflow: hidden;
}

.area--home-service .role--box .role--title {
    grid-area: 1/1/2/13;
    margin-bottom: 2.5rem;
    font-size: min(3rem, 3.75vw);
}
.area--home-service .role--box .role--text {
    grid-area: 2/3/3/11;
}

/* ====== Health: ====== */

.area--home-health {
    position: relative;
    margin-bottom: 4rem;
}

.area--home-health .role--title {
    grid-area: 1/2/2/12;
    margin-bottom: 5%;
}

.area--home-health .role--image {
    grid-area: 2/3/3/11;
}
.area--home-health .role--text {
    grid-area: 3/3/4/11;
}
.area--home-health .role--image > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.45/1;
}
.area--home-health-features {
    margin-top: 5%;
    margin-bottom: 5%;
    max-width: 1000px
}
.area--home-health-features .role--icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 7%;
    padding-top: 1rem;
}
@media(max-width: 400px){
    .area--home-health-features .role--icon-grid {
        gap: 0 1rem;
    }
}
.area--home-health-features .role--button {
    border: none;
    border-radius: 1000vw;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    aspect-ratio: 1/1;
    grid-row: 1;
    margin-bottom: 70px;
    position: relative;
    padding: 0;
}
.area--home-health-features .role--button > img {
    display: block;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.area--home-health-features .role--info {
    grid-area: 2/1/3/5;
    position: relative;
    max-height: 0;
    overflow: hidden;
    transform: translateX(-100vw);
}
.area--home-health-features .role--box {
    background: var(--color-id-perla);
    padding: 2em;
}
.area--home-health-features .role--box > * {
    max-width: 600px;
    margin: 0 auto;
}
.area--home-health-features .role--button:after {
    content: '';
    display: block;
    position: absolute;
    top: calc(10px + 100%);
    left: 50%;
    border-left: 2px solid var(--color-id-urban-grey);
    margin-left: -1px;
    margin-top: 0;
    opacity: 0.5;
    height: 0;
    transition: all 0.5s;
}
.area--home-health-features .role--button.is-active:after{
    height: 50px;
}
.area--home-health-features .role--headline {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5em;
}


/* ====== Subpages: ====== */

.wrap--global-subpage-intro {
    padding-top: var(--header-height);
}
.area--global-subpage-intro {
    margin: 5% auto;
}
.area--global-subpage-intro .role--title {
    grid-area: 1/3/2/11;
}
.area--global-subpage-intro .role--leadtext {
    grid-area: 2/3/3/9;
    font-size: 1.25rem;
}
.area--global-subpage-intro .role--text {
    grid-area: 3/3/4/9;
    margin-top: 5%;
}
.area--global-subpage-intro .role--leadtext a[href],
.area--global-subpage-intro .role--text a[href] {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--color-id-accent);
}

/* ====== Subpage: Project ====== */

.wrap--project-section-1 {
    position: relative;
}
.wrap--project-section-1:before {
    content: '';
    display: block;
    position: absolute;
    background: var(--color-id-cobalt);
    left: 0;
    right: 0;
    bottom: 0;
    top: 80%;
}
.area--project-section-1 {
    margin-top: 0;
    margin-bottom: 0;
}
.area--project-section-1 .role--image-aerial {
    grid-area: 1/2/2/12;
    aspect-ratio: 1.5/1;
    overflow: hidden;
}
.area--project-section-1 .role--image-aerial > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5/1;
}
.area--project-section-1 .role--text {
    grid-area: 2/3/3/9;
    margin-top: 10%;
}
.area--project-section-1 .role--image-1 > img,
.area--project-section-1 .role--image-2 > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5/1;
}
.area--project-section-1 .role--image-1 {
    grid-area: 3/2/4/7;
    margin-top: 10%;
}
.area--project-section-1 .role--image-2 {
    grid-area: 3/7/4/12;
}

.wrap--project-section-2 {
    position: relative;
    margin-top: -2px;
}
.wrap--project-section-2:before {
    content: '';
    display: block;
    position: absolute;
    background: var(--color-id-oyster);
    left: 0;
    right: 0;
    bottom: 0;
    top: 50%;
}
.area--project-section-2 {
    margin-top: 0;
    margin-bottom: 0;
}
.area--project-section-2 .role--text {
    grid-area: 1/3/2/9;
    margin: 5% 0;
}
.area--project-section-2 .role--image {
    grid-area: 2/3/3/11;
}
.area--project-section-2 .role--image > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5/1;
}
.wrap--project-section-3 {
    position: relative;
    background: var(--color-id-oyster);
    margin-top: -2px;
}
.area--project-section-3 {
    margin-top: 0;
    margin-bottom: 0;   
}
.area--project-section-3 .role--text {
    grid-area: 1/6/2/11;
    margin: 5% 0;
}

/* ====== Subpage: Location ====== */

.wrap--location-section-1 {
    padding: 0;
    margin: 0 auto;
}
.wrap--location-section-1 .role--image {
    max-width: 1280px;
    margin: 0 auto;
}
.wrap--location-section-1 .role--image > img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
}
.area--location-section-2 .role--text {
    grid-area: 1/8/2/12;
    position: relative;
    z-index: 1;
    align-self: center;
}
.area--location-section-2 .role--composition {
    grid-area: 1/2/2/8;
    margin-top: 0;
    position: relative;
    aspect-ratio: 1/1;
}
.area--location-section-2 .role--circle {
    position: relative;
    width: 80%;
    background: var(--color-id-perla);
    border-radius: 1000vw;
    aspect-ratio: 1/1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.area--location-section-2 .role--layer-1,
.area--location-section-2 .role--layer-2 {
    width: 55%;
    position: absolute;
}
.area--location-section-2 .role--layer-3,
.area--location-section-2 .role--layer-4 {
    width: 25%;
    position: absolute;
}
.area--location-section-2 .role--layer-1 > img,
.area--location-section-2 .role--layer-2 > img,
.area--location-section-2 .role--layer-3 > img,
.area--location-section-2 .role--layer-4 > img {
    display: block;
    max-width: 100%;
    aspect-ratio: 1.5/1;
}
.area--location-section-2 .role--layer-1 {
    left: 5%;
    bottom: 45%;
}
.area--location-section-2 .role--layer-2 {
    right: 5%;
    top: 45%;
}
.area--location-section-2 .role--layer-3 {
    right: 13%;
    bottom: 57%;
}
.area--location-section-2 .role--layer-4 {
    right: 62%;
    top: 57%;
}

.area--location-section-3 .role--title {
    grid-area: 1/2/2/13;
    margin-bottom: 0rem;
}
.area--location-section-3 .role--text {
    grid-area: 2/2/3/6;
}
.area--location-section-3 .role--text > * {
    margin-top: 2rem;
    margin-bottom: 0rem;
}
.area--location-section-3 .role--image {
    grid-area: 2/7/3/13;
} 
.area--location-section-3 .role--image > img {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
}

.area--location-section-3 .role--table {
    max-width: 300px;
    margin-bottom: 2.5rem;
}
.area--location-section-3 .role--table > * {
    border-bottom: 1px solid currentColor;
    padding: 0.5em 0;
}
.area--location-section-3 .role--table .role--table-head {
    font-weight: bold;
}
.area--location-section-3 .role--table .role--table-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}
.area--location-section-3 .role--table .role--table-row > *:last-child {
    text-align: right;
}

/* ====== Subpage: Concept ====== */

.wrap--concept-intro .role--title {
    font-size: min(4rem, 3vw);
}

.wrap--concept-section-1 {
    padding: 0;
    position: relative;
    z-index: 1;
    margin-bottom: -2rem;
}
.wrap--concept-section-1 .role--image {
    grid-area: 1/2/2/12;
    
}
.wrap--concept-section-1 .role--image > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5/1;
}

.wrap--concept-section-2 {
    padding-top: 3.5rem; 
    overflow: visible;
    position: relative;
}
.area--concept-section-2 {
    margin: 5% auto;   
}
.area--concept-section-2 .role--title-1,
.area--concept-section-2 .role--title-2,
.area--concept-section-2 .role--title-3, 
.area--concept-section-2 .role--title-full {
    font: inherit;
    font-weight: bold;
    font-size: 1.5em;
}
.area--concept-section-2 .role--title-1 {
    grid-area: 1/3/2/7;
}
.area--concept-section-2 .role--title-2 {
    grid-area: 1/7/2/11;
}
.area--concept-section-2 .role--title-3 {
    /*
    padding: 0 1.8rem 0 1.8rem;
    font-weight: 400;
    margin-bottom: 1rem;
    */
    margin-top: 0;
}
.area--concept-section-2 .role--title-full {
    grid-area: 1/3/2/11;
}
.area--concept-section-2 .role--text-1 {
    grid-area: 2/3/3/7;
}
.area--concept-section-2 .role--text-2 {
    grid-area: 2/7/3/11;
}
.area--concept-section-2 .role--title-2-left {
    grid-area: 3 / 3 / 3 / 7;
}
.area--concept-section-2 .role--text-2-left {
    grid-area: 4 / 3 / 5 / 7;
}

.area--concept-section-2 .role--divider {
    grid-column: 2/11;
    margin: 5% auto;
    border-top: 2px solid currentColor;
    padding-bottom: 1rem;
    opacity: 0.5;
    width: 50%;
}

.wrap--concept-section-3 {
    position: relative;
    overflow: hidden;
}
.wrap--concept-section-3 .role--circle {
    position: absolute;
    width: 66%;
    max-width: 100vh;
    background: var(--color-id-perla);
    border-radius: 1000vw;
    aspect-ratio: 1/1;
    left: 50%;
    top: 0%;
    transform-origin: top center;
    transform: translate(-50%, -50%);
}
.area--concept-section-3 .role--image {
    grid-area: 1/5/2/13;
}
.area--concept-section-3 .role--image > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.9/1;
}
.area--concept-section-3 .role--text {
    grid-area: 2/2/3/7;
}

/* ====== Subpage: Concept > Video ====== */

.area--concept-video {
    position: relative;
    margin: 5% 0;
}
.area--concept-video .role--video {
    grid-area: 1/3/1/11;
    aspect-ratio: 16/9;
}
.area--concept-video .role--video > video {
    display: none;
}


/* ====== Subpage: Service ====== */

.area--service-section-1 {
    margin-top: 0;
}
.area--service-section-1 .role--image-1 {
    grid-area: 1/1/2/8;
    margin-top: 10%;
}
.area--service-section-1 .role--image-2 {
    grid-area: 1/8/2/13;
}

.area--service-section-1 .role--image-1 > img,
.area--service-section-1 .role--image-2 > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5/1;
}
.area--service-section-2 {
    margin: 5% auto;   
}
.area--service-section-2 .role--title {
    font: inherit;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 0
}
.area--service-section-2 .role--text-1 {
    grid-area: 2/3/3/7;
}
.area--service-section-2 .role--text-2 {
    grid-area: 2/7/3/11;
}

.area--service-section-3 .role--text {
    grid-area: 1/2/2/6;
}
.area--service-section-3 .role--image {
    grid-area: 1/7/2/13;
}
.area--service-section-3 .role--image > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5/1;
}
.area--service-section-3 .role--list {
    list-style: none;
    padding: 0;
    margin: 2em 0;
}
.area--service-section-3 .role--list > * {
    padding: 0.25em 0 0.25em 1.5em;
    position: relative;
}
.area--service-section-3 .role--list > *:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 1em;
    margin-top: 1px;
    width: 0.75em;
    border-top: 1px solid var(--color-id-accent);
    
}

/* ====== Subpage: Health ====== */

.wrap--health-intro-text .role--title {
    font: inherit;
    font-weight: bold;
    font-size: 1em;
    margin: 0 0 1em 0;
}

.wrap--health-section-1 {
    padding: 0;
}
.wrap--health-section-1 .role--image {
    aspect-ratio: 3/1;
    overflow: hidden;
}
.wrap--health-section-1 .role--image > div {
    background-image: url(../images/Elevation-Davos_Health-1.jpg);
    background-position: center right;
    background-size: cover;
    width: 100%;
    height: 200%;
}

.area--health-section-2 {
    margin: 5% auto 15% auto;
}
.area--health-section-2 .role--title {
    grid-area: 1/3/2/7;
    font: inherit;
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0
}
.area--health-section-2 .role--text-1 {
    grid-area: 2/3/3/7;
}
.area--health-section-2 .role--text-2 {
    grid-area: 2/7/3/11;
}

.wrap--health-section-3 {
    overflow: visible;
    padding-top: 0;
}
.area--health-section-3 {
    margin: 0 auto;   
}
.area--health-section-3 .role--image {
    grid-area: 1/5/2/12;
    margin-top: -15%;
}
.area--health-section-3 .role--image > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5/1;
}
.area--health-section-4 {
    margin: 5% auto;
}
.area--health-section-4 .role--image {
    grid-area: 1/1/2/7;
}
.area--health-section-4 .role--image > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5/1;
}
.area--health-section-4 .role--title {
    font: inherit;
    font-weight: bold;
    font-size: 1rem;
    margin: 0
}
.area--health-section-4 .role--text {
    grid-area: 1/8/2/13;
}

.area--health-partner {
    text-align: center;
    margin-top: 5%;
}
.area--health-partner .role--logos > a {
    display: inline-block;
    width: 80%;
    max-width: 300px;
    padding: 2rem;
    vertical-align: middle;
}
.area--health-partner .role--logos > a > img {
    display: block;
    width: 100%;
    margin: 0 auto;
}
.area--health-partner .role--logos > a:nth-child(1) > img { max-width: 260px; }
.area--health-partner .role--logos > a:nth-child(2) > img { max-width: 200px; }
.area--health-partner .role--logos > a:nth-child(3) > img { max-width: 270px; }
.area--health-partner .role--logos > a:nth-child(4) > img { max-width: 300px; }


.area--health-page-features {
    margin-top: 5%;
    margin-bottom: 5%;
    max-width: 1000px
}
.area--health-page-features .role--info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1em 2em;
    margin-bottom: 3em;
}
.area--health-page-features .role--info img {
    display: block;
    object-fit: contain;
    width: 6em;
    height: 6em;
    flex-grow: 0;
}
.area--health-page-features .role--info > div > * {
    max-width: 600px;
    margin: 0 auto;
}
.area--health-page-features .role--info .role--headline {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5em;
}
@media(max-width: 400px){
    .area--health-page-features .role--info {
        font-size: 0.8em;
    }
    .area--health-page-features .role--info img {
        width: 5em;
        height: 5em;
    }
}

/* ====== Subpage: Apartments ====== */

.wrap--apartments-overview {
    margin-top: 3rem;
}
.wrap--apartments-overview .role--image {
    grid-area: 1/3/2/11;
}
.wrap--apartments-overview .role--image > svg {
    display: block;
    width: 100%;
    aspect-ratio: 1.9/1;
    max-width: 700px;
    margin: 0 auto;
}

.wrap--apartments-building-switch {
    
}

.wrap--apartments-building-switch .role--tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em auto;
    border-bottom: 1px solid var(--color-id-accent);
    max-width: 900px;
}
.wrap--apartments-building-switch .role--tabs > button {
    cursor: pointer;
    background: transparent;
    padding: 0.5em 1em;
    font: inherit;
    border: none;
    box-shadow: none;
    border-radius: 0;
    font-weight: bold;
    color: inherit;
    border-bottom: 4px solid transparent;
    font-size: 1.2rem;
    transition: all 0.5s;
}
.wrap--apartments-building-switch .role--tabs > button:not(.is-active) > * {
    color: var(--color-id-urgban-grey);
}
.wrap--apartments-building-switch .role--tabs > button.is-active {
    border-bottom-color: var(--color-id-accent);
}
.wrap--apartments-building-switch .role--select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 14\"><polyline fill=\"none\" stroke=\"%23000000\" stroke-width=\"3\" points=\"2 2 12 12 22 2\"/></svg>");
    background-repeat: no-repeat;
    background-position: right 1em center;
    background-size: 1em auto;
    padding-right: 2em !important;
    font-size: inherit;
    color: inherit;
    font-weight: bold;
    border-bottom: 1px solid var(--color-id-accent);
    width: 100%;
    max-width: 400px;
    margin: 1em auto;
    font-size: 1.2rem;
    display: none;
}
@media(max-width: 1000px){
    .wrap--apartments-building-switch .role--tabs {
        display: none;
    }
    .wrap--apartments-building-switch .role--select {
        display: block;
    }
}

.wrap--apartments-selection {
    display: none;
}
.wrap--apartments-selection.is-active {
    display: block;
}
.area--apartments-selection {
    margin: 0 auto 5% auto;
}
.area--apartments-selection .role--title {
    grid-area: 1/5/2/12;
}
.area--apartments-selection .role--model {
    grid-area: 1/1/3/5;
}
.area--apartments-selection .role--model > svg {
    aspect-ratio: 1/1;
}
.area--apartments-selection .role--list {
    grid-area: 1/5/3/13;
}

.area--apartments-selection .role--list-headline {
    font-size: 1.2rem;
    margin-bottom: 1em;
}
.area--apartments-selection .role--level-headline {
    font-weight: bold;
    background: var(--color-id-perla);
    padding: 0.25em 0.5em;
    margin: 0 0 0.5em 0;
    cursor: pointer;
}
.area--apartments-selection .role--level-headline:after {
    content: '';
    display: block;
    float: right;
    width: 0.75em;
    height: 0.75em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform-origin: center;
    transform: rotate(-45deg);
    margin: 0.5em 0.35em 0 0;
}
.area--apartments-selection .is-active .role--level-headline {
    cursor: default;
}
.area--apartments-selection .is-active .role--level-headline:after {
    transform: rotate(45deg);
    margin: 0.25em 0.25em 0 0;
}
.area--apartments-selection .role--table {
    
    margin-bottom: 1em;
    display: none;
}
.area--apartments-selection .role--table sup {
    font-size: 0.8em;
    display: inline-block;
    vertical-align: text-top;
    line-height: 1;
}
.area--apartments-selection .is-active .role--table {
    display: block;
}

.area--apartments-selection .role--table .is-nowrap {
    white-space: nowrap;
}
.area--apartments-selection .role--table-head,
.area--apartments-selection .role--table-row {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 10% 10% 25% 15% 20%;
    gap: 0.5em 0.5em;
    border-bottom: 1px solid currentColor;
    position: relative;
    z-index: 2;
}
.area--apartments-selection .role--table-head.is-qm-preis,
.area--apartments-selection .role--table-row.is-qm-preis {
    grid-template-columns: 10% 8% 22% 10% 15% auto;
    grid-template-columns: 10% 7% 23% 12% 15% 15% auto;
}

.area--apartments-selection .role--table-head > * {
    font-size: 0.8em;
    font-weight: bold;
    opacity: 0.75;
    padding: 0.25rem 0.5rem;   
}
.area--apartments-selection .role--table-head {
    z-index: 3;
}
.area--apartments-selection .role--table-row {
    z-index: 3;
    font-variant-numeric: tabular-nums;
}
.area--apartments-selection .role--table-row > * {
    position: relative;
    z-index: 2;
    padding: 0.25rem 0.5rem;
}
.area--apartments-selection .role--table .role--align-right {
    text-align: right;
}
.area--apartments-selection .role--table .role--link-pdf {
    color: var(--color-id-accent);
    text-decoration: none;
}
.area--apartments-selection .role--table-row:before {
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    right: 1px;
    background: var(--color-id-accent);
    opacity: 0;
    z-index: 1;
}
.area--apartments-selection .role--table-row.highlight:before {
    opacity: 0.7;
}

.area--apartments-selection .role--table-row[data-object$="_A"]:before { background: rgba(153, 169, 181, 0.7); }
.area--apartments-selection .role--table-row[data-object$="_B"]:before { background: rgba(183, 184, 181, 0.7); }
.area--apartments-selection .role--table-row[data-object$="_C"]:before { background: rgba(160, 178, 163, 0.7); }
.area--apartments-selection .role--table-row[data-object$="_D"]:before { background: rgba(219, 216, 208, 1.0); }
.area--apartments-selection .role--table-row[data-object$="_E"]:before { background: rgba(213, 195, 175, 0.8); }

@media(max-width: 1200px) and (min-width: 1001px), (max-width: 800px)  {
    .area--apartments-selection .role--table .is-minor {
        display: none;
    }
    .area--apartments-selection .role--table-head.is-qm-preis,
    .area--apartments-selection .role--table-row.is-qm-preis {
        grid-template-columns: 18% 10% 27% 25% auto;
    }
}
@media(max-width: 700px){
    .area--apartments-selection .role--table {
        font-size: 15px;
    }
    /*
    .area--apartments-selection .role--table .is-minor {
        display: none;
    }
    */
    .area--apartments-selection .role--table-head,
    .area--apartments-selection .role--table-row {
        grid-template-columns: 17% 13% 25% 30%;
    }
    /*
    .area--apartments-selection .role--table-head.is-qm-preis,
    .area--apartments-selection .role--table-row.is-qm-preis {
        grid-template-columns: 20% 10% 20% 25% auto;
    }
    */
    .area--apartments-selection .role--table .role--link-pdf > span {
        display: none
    }
    .area--apartments-selection .role--table .role--link-pdf:before {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background-image: url(img/pdf-file.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: auto;
    }
}
@media(max-width: 400px){
    .area--apartments-selection .role--table {
        font-size: 14px;
    }
    .area--concept-video {
        margin: 3rem 0;
    }
}

/* ====== Subpage: Contact ====== */

.wrap--contact {
    padding-top: var(--header-height);
    background: var(--color-id-cobalt);
    padding-bottom: 2px;
    margin-bottom: -2px;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.wrap--contact .role--image  {
    aspect-ratio: 16/9;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.wrap--contact .role--image > div {
    aspect-ratio: 16/9;
    width: 100%;
    background-image: url(../images/davos-by-night-v2.jpg);
    background-size: cover;
    background-position: center;
}

.area--contact {
    margin: 0 auto;
    transform: translateY(100%);
}

.wrap--contact .role--box {
    position: relative;
    padding: 3rem 3rem;
    margin: 20vw 3rem 0 3rem;
    color: var(--color-id-urban-grey);
    background: var(--color-id-oyster);
    overflow: hidden;
}

.wrap--contact .role--box a[href] {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--color-id-accent);
}
.wrap--contact .role--box > * {
    position: relative;
    padding: 0;
    max-width: 1000px;
    margin: 0 auto;
}
.wrap--contact .role--box .role--circle {
    position: absolute;
    width: 60vw;
    background: var(--color-id-perla);
    border-radius: 1000vw;
    aspect-ratio: 1/1;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
}
.wrap--contact .role--box > .h1 {
    margin-bottom: 3rem;
}

.wrap--contact .role--contact-details {
    grid-area: 1/1/2/5;
    display: flex;
    flex-direction: column;
}
.wrap--contact .role--contact-details > *:first-child {
    flex-grow: 1;
    max-height: 24.75em;
    margin: 0;
    padding: 1.25rem 0;
}
.wrap--contact .role--contact-details > *:last-child {
    flex-grow: 0;
    margin: 0;
    padding: 1.25rem 0;
}
.wrap--contact .role--contact-details [data-phone],
.wrap--contact .role--contact-details [data-email] {
    opacity: 0;
    transition: opacity 0.75s;
}
.wrap--contact .role--contact-form {
    grid-area: 1/5/2/13;
}

@media(max-width: 1000px){
    .wrap--contact .role--box .area-grid {
        display: block;
    }
}
@media(max-width: 700px){
    .area--contact {
        margin-bottom: 0;
    }
    .wrap--contact .role--image {
        padding: 0;
    }
    .wrap--contact .role--box {
        margin: 0;
        box-shadow: none;
        border: none;
    }
    .wrap--contact .role--box .area-grid {
        display: block;
    }
    
    .wrap--contact .role--box .role--circle {
        width: 80vw;
    }
}
@media(max-width: 500px){
    .wrap--contact .role--box {
        padding: 1.5rem;
    }
    .wrap--contact .role--box .role--circle {
        width: 95vw;
    }
}


/* ====== Responsive: Raw ====== */

@media(max-width: 1200px){
    .area--home-service .role--box .role--title {
        font-size: min(3rem, 3vw);
    }
}

@media(max-width: 1000px){
    .wrap--global .area-grid,
    .wrap--global-dark .area-grid 
    {
        display: block;
    }
    .area-grid .role--title,
    .area-grid .role--leadtext,
    .area-grid .role--text,
    .area-grid [class*="role--title-"],
    .area-grid [class*="role--text-"]
    {
        max-width: 40rem;
        margin-left: auto;
        margin-right: auto;
        
    }
    .area-grid .role--title.h1
    {
        margin-bottom: 5%;
    }
    .area-grid .role--image, 
    .area-grid [class*="role--image-"],
    .role--video
    {
        max-width: 40rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5%;
    }
    .role--composition [class*="role--image-"] {
        max-width: none;
        margin-left: none;
        margin-right: none;
        margin-bottom: none;
    }
    
    .area-grid .role--text:last-child,
    .area-grid [class*="role--text-"]:last-child,
    .area-grid .role--image:last-child, 
    .area-grid [class*="role--image-"]:last-child,
    .role--video:last-child
    {
        margin-bottom: 0;
    }
    
    .area-grid .role--text + .role--image {
        margin-top: 3rem;
    }
    
    /* === customize === */
    
    .area--home-service .role--box .role--title {
        font-size: min(3rem, 4.5vw);
    }
    .area--home-concept .role--title {
        max-width: 100%;
    }
    .wrap--project-section-2:before {
        display: none;
    }
    .area--project-section-2 .role--text:last-child,
    .area--project-section-3 .role--text:last-child 
    {
        margin-bottom: 5%
    }
    .area--concept-section-2 .role--title-1,
    .area--concept-section-2 .role--title-2,
    .area--concept-section-2 .role--title-3,
    .area--concept-section-2 .role--title-full {
        font-size: 1.25em;
        margin-bottom: 0.5em;
    }
    .area--concept-section-2 .role--title-2,
    .area--concept-section-2 .role--title-3 {
        margin-top: 3rem;
    }
    .area--concept-section-2 .role--divider {
        margin-top: 3rem;
    }
    
    .area--health-section-2 .role--title {
        font-size: 1.25em;
        margin-bottom: 0.5em;
    }
    .area--health-section-2 {
        padding-bottom: 3rem;
    }
    
    .area--apartments-selection .role--model {
        max-width: 400px;
        margin: 0 auto;
    }
    
}

@media(max-width: 700px){
    .wrap--global,
    .wrap--global-dark
    {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
    .area-grid .role--leadtext {
        font-size: 1rem;
        margin-bottom: 4rem;
    }
}
@media(max-width: 500px){
    .wrap--global,
    .wrap--global-dark
    {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .area-grid .role--leadtext {
        font-size: 1rem;
        margin-bottom: 4rem;
    }
}

/* Example Unit Animation */
.area--example-unit {
    grid-area: 1 / 7 / 6 / 11;
}
#example_unit_anim {
    position: relative;
    aspect-ratio: 1/2;
    margin: 3rem auto 0 auto;
    max-width: 300px;
}
#example_unit_anim .role--animation-wrap {
    position: relative;
    height: 100%; /* Safari Fix */
}
#example_unit_anim img {
    display: block;
    width: 100%;
}
#example_unit_anim .role--top,
#example_unit_anim .role--bottom {
    position: relative;
    top: 8%;
    font-weight: bold;
}
#example_unit_anim .role--top {
    top: 0%;
}
#example_unit_anim .role--bottom {
    top: 15%;
}
#example_unit_anim .role--top div {
    font-size: 0.8rem;
    padding-bottom: 0.2rem;
}
#example_unit_anim .role--bottom div {
    font-size: 0.8rem;
    padding-top: 0.2rem;
    padding-left: 4%;
}

.area--downloads ul.role--list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 1.25em;
    max-width: 100%;
}
.area--downloads ul.role--list li {
    display: block;
}
.area--downloads ul.role--list a[href] {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
    display: block;
    position: relative;
    background: #fff;
    padding: 1em 1.75em 1em 3.25em;
    border: none;
    transition: all 0.5s;
    transform-origin: center;
}
.area--downloads .role--link-pdf:before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background-image: url(img/pdf-file.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 1em;
    top: 1.05em;
}
@media(hover:hover){
    .area--downloads ul.role--list a[href]:hover {
        transform: scale(1.05);
        color: var(--color-id-accent);
    }
}
/*
.area--example-unit {
    grid-area: 1 / 7 / 6 / 11;
}
#example_unit_anim {
    position: relative;
    aspect-ratio: 1/2;
    margin: 0 2rem;
}
#example_unit_anim img {
    display: block;
    width: 100%;
}
#example_unit_anim > .role--top,
#example_unit_anim > .role--bottom {
    position: absolute;
    top: 8%;
    font-weight: bold;
}
#example_unit_anim > .role--top {
    top: 0%;
}
#example_unit_anim > .role--bottom {
    top: 46%;
}
#example_unit_anim > .role--top div {
    font-size: 0.8rem;
    padding-bottom: 0.2rem;
}
#example_unit_anim > .role--bottom div {
    font-size: 0.8rem;
    padding-top: 0.2rem;
    padding-left: 4%;
}
*/