@charset "UTF-8";
/*
 * Estrel Tower — Process Steps (Services-Meetings "Ablauf")
 * Figma 467:7472 → Ablauf group: heading+body+CTAs left, image+steps right.
 */

.estrel-process {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    --pr-navy: #14172D;
    --pr-cream: #FEF5EC;
    --pr-rose:  #FED3CD;
    background: #FFFBF7;
    padding: calc(60 * var(--u)) calc(162 * var(--u)) !important;
    color: var(--pr-navy);
}
.estrel-process__inner {
    display: grid;
    grid-template-columns: calc(604 * var(--u)) 1fr;
    gap: calc(190 * var(--u));
    align-items: start;
    max-width: calc(1596 * var(--u));
    margin: 0 auto;
}

.estrel-process__intro {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
}
.estrel-process__heading {
    margin: 0;
    font-size: calc(40 * var(--u));
    line-height: calc(49 * var(--u));
    color: var(--pr-navy);
    letter-spacing: 0;
    max-width: calc(468 * var(--u));
}
.estrel-process__heading-main {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
}
.estrel-process__heading-accent {
    display: block;
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
}

.estrel-process__body,
.estrel-process__body p {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    color: var(--pr-navy);
    margin: 0;
}
.estrel-process__body p { margin: 0 0 calc(12 * var(--u)); }
.estrel-process__body p:last-child { margin-bottom: 0; }

.estrel-process__ctas {
    display: flex;
    gap: calc(16 * var(--u));
    margin-top: calc(20 * var(--u));
}
.estrel-process__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(30 * var(--u));
    padding: 0 calc(28 * var(--u));
    border-radius: calc(41.5 * var(--u));
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: calc(0.95 * var(--u));
    text-decoration: none;
    transition: opacity 0.18s ease;
}
.estrel-process__cta--primary {
    background: var(--pr-rose);
    color: var(--pr-navy);
    border: 1px solid var(--pr-rose);
}
.estrel-process__cta--outline {
    background: transparent;
    color: var(--pr-navy);
    border: 1px solid var(--pr-rose);
}
.estrel-process__cta:hover { opacity: 0.85; }

/* Right side: image + steps */
.estrel-process__media {
    position: relative;
    aspect-ratio: 763/742;
    width: 100%;
    border-radius: calc(2 * var(--u));
    overflow: visible;
}
.estrel-process__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(2 * var(--u));
    display: block;
}
.estrel-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(56 * var(--u));
    left: calc(47 * var(--u));
    right: calc(35 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
}
.estrel-process__step {
    background: #FFFFFF;
    padding: calc(20 * var(--u)) calc(28 * var(--u));
    border-radius: calc(2 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(20 * var(--u)) rgba(20, 23, 45, 0.08);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: calc(20 * var(--u));
    row-gap: calc(6 * var(--u));
}
.estrel-process__step-number {
    grid-column: 1;
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(48 * var(--u));
    height: calc(48 * var(--u));
    border-radius: 50%;
    background: var(--pr-navy);
    color: var(--pr-cream);
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(24 * var(--u));
    align-self: center;
}
.estrel-process__step-title {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(22 * var(--u));
    line-height: calc(28 * var(--u));
    color: var(--pr-navy);
}
.estrel-process__step-desc {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(16 * var(--u));
    line-height: calc(22 * var(--u));
    color: var(--pr-navy);
    opacity: 0.75;
}

/* Tablet */
@media (max-width: 1024px) {
    .estrel-process {
        --u: calc(100cqi / 1024);
        padding: calc(48 * var(--u)) calc(36 * var(--u)) !important;
    }
    .estrel-process__inner {
        grid-template-columns: 1fr;
        gap: calc(48 * var(--u));
    }
    .estrel-process__steps {
        position: static;
        margin-top: calc(20 * var(--u));
    }
    .estrel-process__media { aspect-ratio: auto; }
}
@media (max-width: 768px) {
    .estrel-process {
        --u: calc(100cqi / 375);
        padding: calc(32 * var(--u)) calc(20 * var(--u)) !important;
    }
    .estrel-process__heading { font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); }
    .estrel-process__step-number { font-size: calc(20 * var(--u)); min-width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
    .estrel-process__step-title { font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }
    .estrel-process__step-desc { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
    .estrel-process__ctas { flex-direction: column; align-items: flex-start; }
}