@charset "UTF-8";
/*
 * Estrel Tower — Design System
 * CSS Custom Properties for Night/Sunrise Theme Toggle
 *
 * Night = Default (dark, Deep Sea gradient)
 * Sunrise = Light (warm, Butter Yellow gradient)
 * Toggle via body.night / body.sunrise class swap
 */

/* ============================
   COLOR TOKENS (constant)
   ============================ */

:root {
    /* Brand Colors */
    --color-deep-sea: #14172D;
    --color-watermelon: #FED3CD;
    --color-butter-yellow: #FEF5EC;
    --color-mid-blue: #283583;
    --color-dark-blue: #16255B;
    --color-purple: #965495;
    --color-mauve: #B28FA6;
    --color-peach: #FFCBB7;
    --color-warm-cream: #FEF0E3;
    --color-light-cream: #FEF2C7;
    --color-off-white: #FFF9F4;
    --color-border-dark: #001A38;

    /* Spacing */
    --section-gap: clamp(60px, 8vw, 120px);
    --container-max: 1920px;
    --container-padding: clamp(20px, 4vw, 80px);

    /* Transitions */
    --theme-transition: 0.8s ease;
    --hover-transition: 0.3s ease;
}


/* ============================
   NIGHT THEME (Default)
   ============================ */

body,
body.night {
    /* Full-page gradient (Rectangle 202) */
    --bg-gradient: linear-gradient(
        to bottom,
        #FEF5EC 0%,
        #FDC6B6 8%,
        #283583 30%,
        #16255B 50%,
        #14172D 70%
    );

    /* Semantic tokens */
    --text-primary: var(--color-butter-yellow);
    --text-secondary: rgba(254, 245, 236, 0.7);
    --text-accent: var(--color-watermelon);
    --text-on-accent: var(--color-deep-sea);

    --bg-primary: var(--color-deep-sea);
    --bg-card: rgba(20, 23, 45, 0.4);
    --bg-opaque: var(--color-deep-sea);

    --overlay-inactive: rgba(20, 23, 45, 0.6);
    --overlay-hover: rgba(20, 23, 45, 0.3);

    --border-color: rgba(254, 245, 236, 0.15);
    --border-accent: var(--color-border-dark);

    --btn-primary-bg: var(--color-watermelon);
    --btn-primary-text: var(--color-deep-sea);
    --btn-secondary-border: var(--color-butter-yellow);
    --btn-secondary-text: var(--color-butter-yellow);

    /* Solid deep-sea base — sunset gradient is provided by .estrel-sunset-bg */
    background-color: var(--color-deep-sea);
    color: var(--text-primary);
    min-height: 100vh;

    /* Smooth theme transition */
    transition:
        background var(--theme-transition),
        color var(--theme-transition);
}

/* ============================
   SUNSET GRADIENT WRAPPER
   JS-positioned absolute div behind hero + intro sections (night mode only).
   Single vertical linear gradient — dark navy top → purple mid → peach/pink
   peak → mauve → dark navy bottom. Shown only in body.night via display
   toggle below.
   ============================ */

.estrel-sunset-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0; /* JS sets height via setupSunsetBackground() */
    z-index: 0;
    pointer-events: none;
    /* Figma node 75:451 (Rectangle 202) — stops mapped onto the extended
       wrapper that now reaches architecture-top (~5317px). Warm wash sustains
       the original hero→intro range (0–2157px ≈ 0–41% of wrapper); deep sea
       holds from accordion-top down to architecture-top. */
    background: linear-gradient(
        to bottom,
        #FEF5EC 0%,
        #FDC6B6 18%,
        #283583 32%,
        #16255B 41%,
        #14172D 84%,
        #14172D 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    display: none;
}

body.night .estrel-sunset-bg {
    display: block;
}

/* Sunrise mode — Figma node 75:894 (Rectangle 204), permanent sichtbar.
   Wrapper now spans page-top to architecture-top (~5317px). Stops preserve
   the navy→peach pixel positions that matched Figma image 17 in the hero/
   intro zone, then continue with Figma's warm-cream → off-white scaled
   into the accordion → news → meetings range (per Figma image 18). */
body.sunrise .estrel-sunset-bg {
    display: block;
    opacity: 1;
    background: linear-gradient(
        to bottom,
        #031432 1%,
        #665495 17%,
        #B28FA6 22%,
        #FFCBB7 27%,
        #FEF0E3 75%,
        #FEF2E7 95%,
        #FFF9F3 100%
    );
}


/* ============================
   SUNRISE THEME
   ============================ */

body.sunrise {
    /* Full-page gradient (Rectangle 204) */
    --bg-gradient: linear-gradient(
        to bottom,
        #FFF9F4 0%,
        #FEF2C7 10%,
        #FEF0E3 25%,
        #FFCBB7 45%,
        #B28FA6 65%,
        #965495 80%,
        #031432 100%
    );

    /* Semantic tokens */
    --text-primary: var(--color-deep-sea);
    --text-secondary: rgba(20, 23, 45, 0.7);
    --text-accent: var(--color-watermelon);
    --text-on-accent: var(--color-deep-sea);

    --bg-primary: var(--color-off-white);
    --bg-card: rgba(254, 245, 236, 0.4);
    --bg-opaque: var(--color-off-white);

    --overlay-inactive: rgba(254, 245, 236, 0.6);
    --overlay-hover: rgba(254, 245, 236, 0.3);

    --border-color: rgba(20, 23, 45, 0.15);
    --border-accent: var(--color-border-dark);

    --btn-primary-bg: var(--color-watermelon);
    --btn-primary-text: var(--color-deep-sea);
    --btn-secondary-border: var(--color-deep-sea);
    --btn-secondary-text: var(--color-deep-sea);

    background: var(--color-off-white);
    color: var(--text-primary);
}


/* ============================
   GLOBAL NIGHT / SUNRISE VISIBILITY TOGGLE
   Used across all sections for image swap, text swap, etc.
   ============================ */

/* Global smooth theme transition for all sections */
.estrel-accordion,
.estrel-news,
.estrel-testimonials,
.estrel-newsletter,
.estrel-contact,
.estrel-architecture,
.estrel-hotspot__card,
.estrel-news__card-content,
.estrel-testimonials__card {
    transition:
        background-color var(--theme-transition),
        color var(--theme-transition);
}

/* Text + button elements inherit color transitions */
h1, h2, h3, h4, p, a, span, blockquote, cite,
.estrel-btn {
    transition:
        color var(--theme-transition),
        background-color var(--theme-transition),
        border-color var(--theme-transition);
}

/* Inline text variants — instant swap (no transition needed for text) */
.estrel-show-sunrise { display: none; }
.estrel-show-night   { display: inline; }
body.sunrise .estrel-show-night   { display: none !important; }
body.sunrise .estrel-show-sunrise { display: inline !important; }

/* Image/div variants — opacity crossfade for smooth theme transition.
   Both images stay display:block (stacked via position:absolute in their
   container), only opacity toggles with a transition. */
img.estrel-show-sunrise,
div.estrel-show-sunrise {
    display: block;
    opacity: 0;
    transition: opacity var(--theme-transition, 0.8s ease);
}
img.estrel-show-night,
div.estrel-show-night {
    display: block;
    opacity: 1;
    transition: opacity var(--theme-transition, 0.8s ease);
}

body.sunrise img.estrel-show-sunrise,
body.sunrise div.estrel-show-sunrise {
    opacity: 1 !important;
}
body.sunrise img.estrel-show-night,
body.sunrise div.estrel-show-night {
    opacity: 0 !important;
}

/* Meetings tab images use their own is-active / GSAP opacity system.
   Override the global theme opacity so tab switching still works. */
.estrel-meetings__tab-image.estrel-show-night,
.estrel-meetings__tab-image.estrel-show-sunrise {
    opacity: 0 !important;
    transition: opacity 0.6s ease;
}
.estrel-meetings__tab-image.is-active {
    opacity: 1 !important;
}
/* Wrong-theme images stay hidden even when is-active */
body.sunrise .estrel-meetings__tab-image.estrel-show-night,
body.sunrise .estrel-meetings__tab-image.estrel-show-night.is-active {
    opacity: 0 !important;
    pointer-events: none;
}
body:not(.sunrise) .estrel-meetings__tab-image.estrel-show-sunrise,
body:not(.sunrise) .estrel-meetings__tab-image.estrel-show-sunrise.is-active {
    opacity: 0 !important;
    pointer-events: none;
}

/* ============================
   Responsive Anchors (2026-04-27)
   - Desktop: --u = 100cqi/1920
   - Tablet:  --u = 100cqi/1024  @ 768-1024
   - Mobile:  --u = 100cqi/375   @ <768
   - Sections setzen --u in ihrem container-type:inline-size Wrapper
   ============================ */
:root {
    --bp-mobile-max: 767px;
    --bp-tablet-min: 768px;
    --bp-tablet-max: 1024px;
    --bp-desktop-min: 1025px;

    --anchor-desktop: 1920;
    --anchor-tablet: 1024;
    --anchor-mobile: 375;

    /* Touch-Target-Minimum (Apple HIG / WCAG 2.5.5 Level AAA: 44×44 CSS px) */
    --touch-target-min: 44px;
}