@charset "UTF-8";
/*
 * Estrel Tower — Pricing Grid (Daily Delegate Rate)
 * Figma 448:3139 (Header) + 448:3249 (Cards)
 *
 * Cards Container 1598×648 (4× 386×618, 16u gap).
 *
 * DEFAULT Card (Business/Premium/Individual):
 *   bg #FFFFFF, border 1px #D9D9D9, r=3, drop-shadow 0 2px 4px rgba(201,201,201,0.15)
 *   Title: Söhne 500 31/37.2 #000
 *   Subline: Söhne 400 20/24 #000
 *   Underline: 320×1 #000 at y=176
 *   Bullets: Söhne 400 18/17 #000 + 19×15 check-icon
 *   CTA: 316×48 r=30 bg #14172D, color #FFFFFF, Söhne 400 16/24
 *
 * HIGHLIGHT Card (Starter):
 *   bg #14172D, drop-shadow 0 2px 4px rgba(20,23,45,0.16), r=3
 *   Title: GT Alpina 250 italic 41/49.2 #FEF5EC
 *   Subline: Roboto 400 20/24 #FEF5EC
 *   Underline: 320×1 #FEF5EC
 *   Bullets: Roboto 400 18/17 #FEF5EC + 19×15 check-icon #FEF5EC
 *   CTA: bg #FED3CD, color #14172D, Söhne 400 16/24
 */

.estrel-pricing-grid {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    --pg-navy: #14172D;
    --pg-cream: #FEF5EC;
    --pg-pink: #FED3CD;
    --pg-black: #000000;
    --pg-line: #D9D9D9;
    /* Figma 448:3026: 194u gap from preceding RoomFokus section bottom (y=2028)
       to header top (y=2222). 90u bottom padding to next section. */
    padding: calc(194 * var(--u)) calc(91 * var(--u)) calc(90 * var(--u)) !important;
    margin: 0 !important;
}

/* Header — Figma 448:3139 ("Enthalten" 869×134 at x=162, y=2222 in frame).
   Aligned with cards-container (max-width 1598u centered) so header's left
   edge sits at the same x as the first card. Title 384×49 + 21u gap to
   body 869×64. 50u gap below to cards. */
.estrel-pricing-grid__header {
    max-width: calc(1598 * var(--u));
    margin: 0 auto calc(50 * var(--u));
    text-align: left;
    color: var(--pg-navy);
}
.estrel-pricing-grid__heading {
    margin: 0 0 calc(21 * var(--u));
    font-family: var(--font-soehne);
    font-style: normal;
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: calc(49 * var(--u));
    letter-spacing: 0;
    color: var(--pg-navy);
    max-width: calc(869 * var(--u));
}
/* charStyleOverride 0-9 in Figma 448:3140: "Überblick" GT Alpina 250 italic 43px */
.estrel-pricing-grid__heading em {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(43 * var(--u));
    line-height: inherit;
}
.estrel-pricing-grid__subline {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(24 * var(--u));
    line-height: calc(32 * var(--u));
    letter-spacing: 0;
    color: var(--pg-navy);
    max-width: calc(869 * var(--u));
}
.estrel-pricing-grid__subline p { margin: 0; }

/* Cards Container — Figma 1598×648 with 4 cards 386×618 + 16u gap */
.estrel-pricing-grid__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, calc(386 * var(--u)));
    gap: calc(16 * var(--u));
    max-width: calc(1598 * var(--u));
    margin-inline: auto;
    justify-content: start;
}

.estrel-pricing-grid__item { min-width: 0; display: flex; }

/* DEFAULT Card — alle Cards weiß. :hover swappt zu navy/cream (siehe unten).
   Transitions auf BG + color + child-elements für sanften Wechsel. */
.estrel-pricing-grid__card {
    position: relative;
    background: #FFFFFF;
    color: var(--pg-black);
    border: 1px solid var(--pg-line);
    border-radius: calc(3 * var(--u));
    box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(201, 201, 201, 0.15);
    padding: calc(67 * var(--u)) calc(30 * var(--u)) calc(53 * var(--u));
    width: calc(386 * var(--u));
    min-height: calc(618 * var(--u));
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    cursor: default;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.estrel-pricing-grid__card,
.estrel-pricing-grid__title,
.estrel-pricing-grid__sub,
.estrel-pricing-grid__price,
.estrel-pricing-grid__bullet-icon,
.estrel-pricing-grid__head::after,
.estrel-pricing-grid__cta {
    transition-property: background, color, border-color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* HOVER + HIGHLIGHT state — beide bekommen den dunklen Look (Starter-Pattern).
   .is-highlight wird im Backend via "Hervorheben" gesetzt und ist permanent. */
.estrel-pricing-grid__item:hover .estrel-pricing-grid__card,
.estrel-pricing-grid__item.is-highlight .estrel-pricing-grid__card {
    background: var(--pg-navy);
    color: var(--pg-cream);
    box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(20, 23, 45, 0.16);
}

.estrel-pricing-grid__head {
    /* Title at y=97 (rel 67 from card top after padding 67), Sub at y=134 (rel 104),
       Underline at y=176 (rel 146). Bullets at y=333 (rel 303). */
    margin: 0 0 calc(12 * var(--u));
}

.estrel-pricing-grid__title {
    margin: 0 0 calc(8 * var(--u));
    font-family: var(--font-soehne);
    font-style: normal;
    font-weight: 500;
    font-size: calc(31 * var(--u));
    line-height: calc(37.2 * var(--u));
    color: inherit;
    letter-spacing: 0;
}
/* Hover + Highlight: Title swaps to GT Alpina (Starter-Pattern). */
.estrel-pricing-grid__item:hover .estrel-pricing-grid__title,
.estrel-pricing-grid__item.is-highlight .estrel-pricing-grid__title {
    font-family: var(--font-alpina);
}

.estrel-pricing-grid__sub {
    margin: 0;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(24 * var(--u));
    color: inherit;
    letter-spacing: 0;
}
/* Sub: keine Font-Änderung auf Hover (verhindert Reflow). */

/* Underline 320×1 below the head */
.estrel-pricing-grid__head::after {
    content: '';
    display: block;
    width: calc(320 * var(--u));
    height: 1px;
    background: var(--pg-black);
    margin-top: calc(18 * var(--u));
}
.estrel-pricing-grid__item:hover .estrel-pricing-grid__head::after,
.estrel-pricing-grid__item.is-highlight .estrel-pricing-grid__head::after {
    background: var(--pg-cream);
}

.estrel-pricing-grid__price {
    margin: calc(29 * var(--u)) 0 calc(34 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 500;
    font-size: calc(55 * var(--u));
    line-height: calc(66 * var(--u));
    color: inherit;
    letter-spacing: 0;
}
/* Price: weight bleibt unverändert (verhindert leichten Strich-Jump). */

.estrel-pricing-grid__bullets {
    list-style: none;
    margin: 0 0 calc(30 * var(--u));
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(19 * var(--u));
    flex: 1;
}

.estrel-pricing-grid__bullet {
    display: flex;
    align-items: flex-start;
    gap: calc(14 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(18 * var(--u));
    line-height: calc(20 * var(--u));
    color: inherit;
    letter-spacing: 0;
}
/* Bullet: keine Font-Änderung auf Hover (verhindert Reflow). */
.estrel-pricing-grid__bullet-icon {
    flex-shrink: 0;
    width: calc(19 * var(--u));
    height: calc(15 * var(--u));
    margin-top: calc(2 * var(--u));
    color: var(--pg-black);
}
.estrel-pricing-grid__item:hover .estrel-pricing-grid__bullet-icon,
.estrel-pricing-grid__item.is-highlight .estrel-pricing-grid__bullet-icon {
    color: var(--pg-cream);
}

/* CTA — Default: navy bg + white text, Highlight: pink bg + navy text */
.estrel-pricing-grid__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(48 * var(--u));
    border-radius: calc(30 * var(--u));
    background: var(--pg-navy);
    color: #FFFFFF;
    font-family: var(--font-soehne);
    font-style: normal;
    font-weight: 400;
    font-size: calc(16 * var(--u));
    line-height: calc(24 * var(--u));
    letter-spacing: 0;
    text-decoration: none;
    transition: filter 0.2s ease, background 0.2s ease;
    width: 100%;
}
.estrel-pricing-grid__cta:hover { filter: brightness(0.85); }

.estrel-pricing-grid__item:hover .estrel-pricing-grid__cta,
.estrel-pricing-grid__item.is-highlight .estrel-pricing-grid__cta {
    background: var(--pg-pink);
    color: var(--pg-navy);
}
.estrel-pricing-grid__item:hover .estrel-pricing-grid__cta:hover,
.estrel-pricing-grid__item.is-highlight .estrel-pricing-grid__cta:hover {
    filter: brightness(0.95);
}

/* Single-highlight rule: when ANY item in the list is hovered, the .is-highlight
   card temporarily reverts to default look (so only one card is dark at a time).
   On mouse-leave, the highlight returns. Uses :has() for sibling-state detection. */
.estrel-pricing-grid__list:has(.estrel-pricing-grid__item:hover) .estrel-pricing-grid__item.is-highlight:not(:hover) .estrel-pricing-grid__card {
    background: #FFFFFF;
    color: var(--pg-black);
    box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(201, 201, 201, 0.15);
}
.estrel-pricing-grid__list:has(.estrel-pricing-grid__item:hover) .estrel-pricing-grid__item.is-highlight:not(:hover) .estrel-pricing-grid__head::after {
    background: var(--pg-black);
}
.estrel-pricing-grid__list:has(.estrel-pricing-grid__item:hover) .estrel-pricing-grid__item.is-highlight:not(:hover) .estrel-pricing-grid__bullet-icon {
    color: var(--pg-black);
}
.estrel-pricing-grid__list:has(.estrel-pricing-grid__item:hover) .estrel-pricing-grid__item.is-highlight:not(:hover) .estrel-pricing-grid__cta {
    background: var(--pg-navy);
    color: #FFFFFF;
}
.estrel-pricing-grid__list:has(.estrel-pricing-grid__item:hover) .estrel-pricing-grid__item.is-highlight:not(:hover) .estrel-pricing-grid__title {
    font-family: var(--font-soehne);
}

/* Tablet — 2 columns */
@media (max-width: 1024px) {
    .estrel-pricing-grid {
        --u: calc(100cqi / 1024);
        padding: calc(48 * var(--u)) calc(36 * var(--u)) !important;
    }
    .estrel-pricing-grid__list {
        grid-template-columns: repeat(2, minmax(0, calc(386 * var(--u))));
        justify-content: center;
    }
    .estrel-pricing-grid__card { height: auto; min-height: calc(540 * var(--u)); }
}

/* Mobile — 1 column */
@media (max-width: 768px) {
    .estrel-pricing-grid {
        --u: calc(100cqi / 375);
        padding: calc(32 * var(--u)) calc(20 * var(--u)) !important;
    }
    .estrel-pricing-grid__list {
        grid-template-columns: minmax(0, 1fr);
        gap: calc(16 * var(--u));
    }
    .estrel-pricing-grid__card {
        width: 100%;
        height: auto;
        padding: calc(40 * var(--u)) calc(24 * var(--u));
    }
}