@charset "UTF-8";
/*
 * Estrel Tower — Event Banner (Karriere "Event Tower / Career Day")
 * Screendesign 1920 - Karriere-v02 (PDF, 1:1 Koordinaten):
 *   Heading "Event" Söhne 124 @ x142/y2183, "Tower" GT Alpina Italic 124 @ y2288 (step 105)
 *   Card y2490–2895: Bild links 720×405 bündig zum linken Rand,
 *   Creme-Panel (#FEF5EC) rechts: Titel 47/53 + Accent Italic 47,
 *   Datum Italic 24, Body 19/27, Textlink Italic 20 mit Pfeil.
 */

.estrel-event-banner {
    --u: calc(min(100vw, 1920px) / 1920);
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: calc(57 * var(--u)) 0 0;
    background: transparent;
}

.estrel-event-banner__heading {
    margin: 0 0 calc(52 * var(--u)) calc(142 * var(--u));
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-butter-yellow, #FEF5EC);
}

.estrel-event-banner__heading-main {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(124 * var(--u));
    line-height: calc(105 * var(--u));
}

.estrel-event-banner__heading-accent {
    display: block;
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(124 * var(--u));
    line-height: calc(105 * var(--u));
    padding-top: calc(15 * var(--u));
}

.estrel-event-banner__card {
    display: grid;
    grid-template-columns: calc(720 * var(--u)) 1fr;
    width: 100%;
    min-height: calc(405 * var(--u));
    background: var(--color-butter-yellow, #FEF5EC);
}

.estrel-event-banner__media {
    height: calc(405 * var(--u));
    overflow: hidden;
}

.estrel-event-banner__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.estrel-event-banner__content {
    padding: calc(39 * var(--u)) calc(80 * var(--u)) calc(39 * var(--u)) calc(62 * var(--u));
    color: var(--color-deep-sea, #14172D);
}

.estrel-event-banner__title {
    margin: 0;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-deep-sea, #14172D);
}

.estrel-event-banner__title-main {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(47 * var(--u));
    line-height: calc(53 * var(--u));
}

.estrel-event-banner__title-accent {
    display: block;
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(47 * var(--u));
    line-height: calc(53 * var(--u));
}

.estrel-event-banner__date {
    margin: calc(9 * var(--u)) 0 0;
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(24 * var(--u));
    line-height: calc(29 * var(--u));
    color: var(--color-deep-sea, #14172D);
}

.estrel-event-banner__body {
    margin-top: calc(40 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(19 * var(--u));
    line-height: calc(27 * var(--u));
    max-width: calc(680 * var(--u));
}

.estrel-event-banner__body p {
    margin: 0;
    color: var(--color-deep-sea, #14172D);
}

.estrel-event-banner__link {
    display: inline-flex;
    align-items: center;
    gap: calc(22 * var(--u));
    margin-top: calc(44 * var(--u));
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(20 * var(--u));
    color: var(--color-deep-sea, #14172D);
    text-decoration: none;
}

.estrel-event-banner__link-arrow {
    width: calc(25 * var(--u));
    height: auto;
    transition: transform var(--hover-transition, 0.3s ease);
}

.estrel-event-banner__link:hover .estrel-event-banner__link-arrow {
    transform: translateX(6px);
}

/* --- Tablet / Mobile: Karte stapeln --- */
@media (max-width: 1024px) {
    .estrel-event-banner {
        --u: calc(100vw / 1024);
        padding-top: calc(48 * var(--u));
    }
    .estrel-event-banner__heading {
        margin-left: calc(48 * var(--u));
    }
    .estrel-event-banner__heading-main,
    .estrel-event-banner__heading-accent {
        font-size: calc(88 * var(--u));
        line-height: calc(76 * var(--u));
    }
    .estrel-event-banner__card {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .estrel-event-banner__media {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .estrel-event-banner__content {
        padding: calc(32 * var(--u)) calc(48 * var(--u)) calc(40 * var(--u));
    }
    .estrel-event-banner__title-main,
    .estrel-event-banner__title-accent {
        font-size: calc(40 * var(--u));
        line-height: calc(46 * var(--u));
    }
    .estrel-event-banner__date { font-size: calc(22 * var(--u)); }
    .estrel-event-banner__body { font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); max-width: none; }
    .estrel-event-banner__link { font-size: calc(19 * var(--u)); }
}

@media (max-width: 767px) {
    .estrel-event-banner {
        --u: calc(100vw / 375);
        padding-top: calc(40 * var(--u));
    }
    .estrel-event-banner__heading {
        margin: 0 calc(24 * var(--u)) calc(28 * var(--u));
    }
    .estrel-event-banner__heading-main,
    .estrel-event-banner__heading-accent {
        font-size: calc(56 * var(--u));
        line-height: calc(50 * var(--u));
    }
    .estrel-event-banner__content {
        padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u));
    }
    .estrel-event-banner__title-main,
    .estrel-event-banner__title-accent {
        font-size: calc(28 * var(--u));
        line-height: calc(33 * var(--u));
    }
    .estrel-event-banner__date { font-size: calc(17 * var(--u)); margin-top: calc(8 * var(--u)); }
    .estrel-event-banner__body { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); margin-top: calc(20 * var(--u)); }
    .estrel-event-banner__link { font-size: calc(16 * var(--u)); margin-top: calc(28 * var(--u)); }
}