@charset "UTF-8";
/*
 * Estrel Tower — Feature List (Event-Technik)
 * Figma 466:262 (overview) + 466:351 (expanded "Integrierte Mikrofontechnik").
 * Overview: heading top-left, 14 items as "+ Title" rows with line below.
 * Hovered row shows preview-image on right (325×406).
 * Click expands full-width navy panel with body / features / rooms / CTAs.
 */

.estrel-feature-list {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    --fl-navy: #14172D;
    --fl-line: rgba(20, 23, 45, 0.15);
    --fl-cream: #FEF5EC;
    --fl-rose:  #FED3CD;
    position: relative;
    /* Figma 466:262: items at x=229..1695 in 1920u frame → centered (227u side-pad). */
    padding: calc(60 * var(--u)) calc(227 * var(--u)) !important;
    color: var(--fl-navy);
}

.estrel-feature-list__heading {
    margin: 0 0 calc(48 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(56 * var(--u));
    line-height: calc(60 * var(--u));
    color: var(--fl-navy);
    letter-spacing: 0;
    max-width: calc(700 * var(--u));
}
.estrel-feature-list__heading-main {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
}
.estrel-feature-list__heading-accent {
    display: block;
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
}

.estrel-feature-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    width: calc(1469 * var(--u));
    max-width: 100%;
}

.estrel-feature-list__item {
    border-bottom: 1px solid var(--fl-line);
    position: relative;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.estrel-feature-list__row {
    position: relative;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0 calc(35 * var(--u));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(24 * var(--u));
    cursor: pointer;
    text-align: left;
    transition: background-color 0.18s ease, color 0.18s ease;
    min-height: calc(82 * var(--u));
}
/* Hover — Figma 466:316: row bg becomes #14172D, glyphs cream, plus inverted */
.estrel-feature-list__item:hover:not(.is-expanded) {
    background: var(--fl-navy);
    border-bottom-color: transparent;
}
.estrel-feature-list__item:hover:not(.is-expanded) .estrel-feature-list__title-accent,
.estrel-feature-list__item:hover:not(.is-expanded) .estrel-feature-list__title-main,
.estrel-feature-list__item:hover:not(.is-expanded) .estrel-feature-list__plus {
    color: var(--fl-cream);
}

/* Plus icon — Figma 466:262: GT Alpina 250 italic 64px/80lh, w=38u.
   When expanded the same node renders an en-dash in cream. */
.estrel-feature-list__plus {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(64 * var(--u));
    line-height: calc(80 * var(--u));
    color: var(--fl-navy);
    flex-shrink: 0;
    width: calc(38 * var(--u));
    text-align: center;
    transition: color 0.25s ease;
    position: relative;
}
.estrel-feature-list__item.is-expanded .estrel-feature-list__plus {
    color: transparent;
}
.estrel-feature-list__item.is-expanded .estrel-feature-list__plus::after {
    content: '–';
    position: absolute;
    inset: 0;
    color: var(--fl-cream);
    text-align: center;
}

/* Title — Figma 466:262 character-style mix per row:
   - first word(s) → GT Alpina 250 italic 43px / 80lh (accent)
   - last word     → Söhne 400 40px / 80lh (main)
   Single-word titles render fully as italic accent. */
.estrel-feature-list__title {
    color: var(--fl-navy);
    letter-spacing: 0;
    line-height: calc(80 * var(--u));
    transition: color 0.25s ease;
    padding-top: 6px;
}
.estrel-feature-list__title-accent {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(43 * var(--u));
    line-height: calc(80 * var(--u));
}
.estrel-feature-list__title-main {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: calc(80 * var(--u));
    margin-left: 0.25em;
}

/* Expanded panel — Figma 466:351: Rectangle 341 1466×605u, fill #14172D.
   Title row (above) keeps its position, but its bg becomes navy and text cream. */
.estrel-feature-list__item.is-expanded {
    background: var(--fl-navy);
    border-bottom-color: transparent;
}
.estrel-feature-list__item.is-expanded .estrel-feature-list__row {
    padding-left: calc(35 * var(--u));
    padding-right: calc(35 * var(--u));
    min-height: calc(82 * var(--u));
}
.estrel-feature-list__item.is-expanded .estrel-feature-list__title {
    color: var(--fl-cream);
}
/* Cream underline below title — Figma Line 27, 1381u × 0.5px */
.estrel-feature-list__item.is-expanded .estrel-feature-list__row::after {
    content: '';
    position: absolute;
    left: calc(35 * var(--u));
    right: calc(50 * var(--u));
    bottom: 0;
    height: 0;
    border-bottom: 0.5px solid var(--fl-cream);
    pointer-events: none;
}

/* Detail panel — visible body inside the navy region.
   Two-column body: left=text+CTAs (585u), right=image+features-rooms (373u image, gap 535u left).
   Figma: body left starts at x=374 (rel from row x=229 → indent 145u), aside right at x=1102/1137. */
.estrel-feature-list__detail {
    display: grid;
    grid-template-columns: 1fr calc(373 * var(--u));
    gap: calc(60 * var(--u));
    align-items: start;
    padding: calc(68 * var(--u)) calc(110 * var(--u)) calc(82 * var(--u)) calc(145 * var(--u));
    color: var(--fl-cream);
    animation: estrel-feature-detail 0.3s ease;
}
.estrel-feature-list__detail[hidden] { display: none; }
@keyframes estrel-feature-detail {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.estrel-feature-list__detail-body {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--u));
}
.estrel-feature-list__detail-lead,
.estrel-feature-list__detail-lead p {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(28 * var(--u));
    line-height: calc(34 * var(--u));
    color: var(--fl-cream);
}
.estrel-feature-list__detail-lead p { margin: 0 0 calc(12 * var(--u)); }
.estrel-feature-list__detail-lead p:last-child { margin-bottom: 0; }

.estrel-feature-list__detail-text,
.estrel-feature-list__detail-text p {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(34 * var(--u));
    color: var(--fl-cream);
}
.estrel-feature-list__detail-text p { margin: 0 0 calc(12 * var(--u)); }
.estrel-feature-list__detail-text p:last-child { margin-bottom: 0; }

/* CTAs — Figma: pill 30u tall, GT Alpina 250 italic 19/22.
   Primary = filled rose (#FED3CD), Secondary = outlined rose. */
.estrel-feature-list__detail-ctas {
    display: flex;
    gap: calc(16 * var(--u));
    margin-top: calc(36 * var(--u));
}
.estrel-feature-list__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-feature-list__cta--primary {
    background: var(--fl-rose);
    color: var(--fl-navy);
    border: 1px solid var(--fl-rose);
}
.estrel-feature-list__cta--outline {
    background: transparent;
    color: var(--fl-rose);
    border: 1px solid var(--fl-rose);
}
.estrel-feature-list__cta:hover { opacity: 0.85; }

/* Right aside — image + features/rooms blocks */
.estrel-feature-list__detail-aside {
    display: flex;
    flex-direction: column;
    gap: calc(28 * var(--u));
}
.estrel-feature-list__detail-image {
    width: calc(325 * var(--u));
    height: calc(406 * var(--u));
    object-fit: cover;
    border-radius: calc(3 * var(--u));
    display: block;
    margin-left: auto;
}
.estrel-feature-list__detail-block-title {
    margin: 0 0 calc(6 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 500;
    font-size: calc(20 * var(--u));
    line-height: calc(34 * var(--u));
    color: var(--fl-cream);
}
.estrel-feature-list__detail-list,
.estrel-feature-list__detail-list li {
    margin: 0;
    padding: 0;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(34 * var(--u));
    color: var(--fl-cream);
}
.estrel-feature-list__detail-list { list-style: none; }

/* Hover preview pane — image swaps via JS, position folgt der Maus per
   transform: translate3d() mit lerp im JS (Salient-Style geschmeidiger
   Cursor-Follow). CSS positioniert nur den Anker (top:0 left:0); JS
   verschiebt per transform. transition: transform NICHT setzen — die
   Animation läuft per requestAnimationFrame im JS, transition würde sie
   doppelt animieren und träge wirken lassen.
   Hidden when any row is expanded, since the navy panel uses the same area. */
.estrel-feature-list__hover {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(325 * var(--u));
    height: calc(406 * var(--u));
    border-radius: calc(2 * var(--u));
    overflow: hidden;
    background: #f2eee9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    will-change: transform, opacity;
    z-index: 2;
}
.estrel-feature-list.is-hovering .estrel-feature-list__hover {
    opacity: 1;
}
.estrel-feature-list.has-expanded .estrel-feature-list__hover {
    opacity: 0;
}
.estrel-feature-list__hover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tablet */
@media (max-width: 1024px) {
    .estrel-feature-list {
        --u: calc(100cqi / 1024);
        padding: calc(48 * var(--u)) calc(36 * var(--u));
    }
    .estrel-feature-list__hover { display: none; }
    .estrel-feature-list__detail {
        grid-template-columns: 1fr;
        padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(80 * var(--u));
    }
    .estrel-feature-list__detail-image {
        width: 100%;
        height: auto;
        aspect-ratio: 325/406;
        margin-left: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Desktop-Default padding hat !important und würde sonst gewinnen.
       Plus width:100% damit Section nicht über Viewport hinausragt
       (sonst bricht container-query cqi → --u-circular-Resolution
       collapsed das Heading auf 0px). */
    .estrel-feature-list {
        --u: calc(100cqi / 375);
        padding: calc(32 * var(--u)) calc(20 * var(--u)) !important;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    .estrel-feature-list__heading { font-size: calc(32 * var(--u)); line-height: calc(38 * var(--u)); margin-bottom: calc(28 * var(--u)); }
    .estrel-feature-list__title { font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); }
    .estrel-feature-list__plus { font-size: calc(28 * var(--u)); width: calc(32 * var(--u)); }
    .estrel-feature-list__row { padding: calc(18 * var(--u)) 0; gap: calc(16 * var(--u)); }
    .estrel-feature-list__detail {
        padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)) calc(48 * var(--u));
        gap: calc(28 * var(--u));
    }
    .estrel-feature-list__detail-lead { font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
    .estrel-feature-list__detail-text { font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); }
    .estrel-feature-list__detail-block-title,
    .estrel-feature-list__detail-list { font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); }
    .estrel-feature-list__detail-ctas { flex-direction: column; align-items: flex-start; }
}