@charset "UTF-8";
/*
 * Estrel Tower — Webcam Page (Figma 737:109)
 *
 * Frame 1920×3312 #14172D background
 *
 *   Hero (y=254-768):
 *     "Estrel Tow"  Söhne 400 270/284   x=460  y=254  Zeile 1 (color #FED3CD)
 *     "er"          Söhne 400 270/284   x=-15  y=475  Zeile 2 left  (bleed)
 *     "Webcam"      GT Alpina 250 italic 280/274  x=288  y=494  Zeile 2 mid
 *
 *   Webcam-Image (y=886-1837):
 *     Block 1672×951  x=124  radius 0/0/3/3
 *     Image fills inside (#D9D9D9 placeholder)
 *
 *   Play-overlay:
 *     Ellipse 370×371 stroke #FFF w3 at x=796,y=1166 (center 981,1351.5)
 *     Polygon 196×191 #FFF radius 5 at x=883,y=1256 (triangle right)
 *
 *   Tab-Bar (y=1780-1799):
 *     166×19  bg #FEF5EC  radius 20  x=877  (centered 877+83 = 960)
 *     Texts: Söhne 300 12/8  inside Tabs at x=904 (Live Cam) and x=973 (Zeitraffer)
 *
 *   Daten & Fakten section (y=2002-2484):
 *     1980×482  bg #FEF5EC
 *     Title " Daten " (Söhne 400 124/105) + "& Fakten" (GT Alpina italic 124) at y=2079
 *     2-col grid of 4 stat rows at y=2261, 570 wide each
 */

.estrel-webcam {
    container-type: inline-size;
    --u: calc(100cqi / 1920);
    --wc-blue: #14172D;
    --wc-pink: #FED3CD;
    --wc-cream: #FEF5EC;
    --wc-grey: #D9D9D9;
    position: relative;
    width: 100vw;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: var(--wc-blue);
    overflow: hidden;
    isolation: isolate;
    color: var(--wc-pink);
}

/* break out of constrained article wrapper on page-content body */
body.page-content .mod_article:has(.estrel-webcam) {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body:has(.estrel-webcam) {
    padding-top: 0 !important;
}

body:has(.estrel-webcam) .estrel-navbar,
body:has(.estrel-webcam) .estrel-navbar::before,
body:has(.estrel-webcam) .estrel-navbar.is-scrolled,
body:has(.estrel-webcam) .estrel-navbar.is-scrolled::before {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:has(.estrel-webcam) .estrel-theme-toggle {
    display: none !important;
}

.estrel-webcam__inner {
    position: relative;
    width: 100%;
    height: calc(2002 * var(--u));
}

/* ===== Hero Title — 2-line mixed-italic ===== */
.estrel-webcam__title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    color: var(--wc-pink);
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
}

.estrel-webcam__title-line1 {
    position: absolute;
    top: calc(254 * var(--u));
    left: calc(460 * var(--u));
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(270 * var(--u));
    line-height: calc(284 * var(--u));
    letter-spacing: 0;
    white-space: nowrap;
}

.estrel-webcam__title-line2 {
    position: absolute;
    top: calc(475 * var(--u));
    left: calc(-15 * var(--u));
    display: inline-flex;
    align-items: baseline;
    line-height: calc(284 * var(--u));
    white-space: nowrap;
}

.estrel-webcam__title-part2 {
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(270 * var(--u));
    line-height: calc(284 * var(--u));
    /* Reserve gap to "Webcam": Figma "er" ends at -15+246=231,
       "Webcam" starts at 288 → 57u gap */
    margin-right: calc(57 * var(--u));
}

.estrel-webcam__title-part3 {
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    font-size: calc(280 * var(--u));
    line-height: calc(274 * var(--u));
    /* Webcam y=494, line2 y=475 → 19u offset down */
    transform: translateY(calc(19 * var(--u)));
}

/* ===== Webcam media block ===== */
.estrel-webcam__media {
    position: absolute;
    top: calc(886 * var(--u));
    left: calc(124 * var(--u));
    width: calc(1672 * var(--u));
    height: calc(951 * var(--u));
}

.estrel-webcam__bg {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--wc-grey);
    border-radius: 0 0 calc(3 * var(--u)) calc(3 * var(--u));
    overflow: hidden;
}

.estrel-webcam__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* The live webcam feed (webcam-profi.de) is portrait 720×1280 with the
       Estrel Tower centered horizontally in the lower 60% of the frame.
       Container is landscape 1672×951. We use `cover` with focal point at
       50% 70% so the tower stays in view; large sky areas above are cropped. */
    object-fit: cover;
    object-position: 50% 70%;
    background: var(--wc-blue);
    display: block;
}

.estrel-webcam__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    display: none;
}

.estrel-webcam__media[data-media-mode="video"] .estrel-webcam__image {
    display: none;
}

.estrel-webcam__media[data-media-mode="video"] .estrel-webcam__video {
    display: block;
}

/* ===== Tab Bar ===== */
.estrel-webcam__tabs {
    position: absolute;
    /* Tab-Bar (y=1780): 166×19, x=877 (centered)
       Media starts at y=886 → relative top: 1780-886 = 894, left: 877-124 = 753 */
    top: calc(894 * var(--u));
    left: calc(753 * var(--u));
    width: calc(166 * var(--u));
    height: calc(19 * var(--u));
    background: var(--wc-cream);
    border-radius: calc(20 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.estrel-webcam__tab {
    flex: 1;
    height: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--wc-blue);
    font-family: 'Söhne', sans-serif;
    font-weight: 300;
    font-size: calc(12 * var(--u));
    line-height: 1;
    letter-spacing: 0;
    padding: 0;
    transition: opacity 0.15s ease;
}

.estrel-webcam__tab:not(.is-active) {
    opacity: 0.55;
}

.estrel-webcam__tab.is-active {
    font-weight: 400;
}

/* ===== Daten & Fakten section ===== */
.estrel-webcam__data {
    position: relative;
    width: 100%;
    /* Frame y=2002-2484, height 482 */
    height: calc(482 * var(--u));
    background: var(--wc-cream);
    color: var(--wc-blue);
    overflow: hidden;
}

.estrel-webcam__data-title {
    position: absolute;
    /* Title at y=2079, section starts y=2002 → top 77.
       Width 847, x=536 → 536. Söhne 400 124/105 */
    top: calc(77 * var(--u));
    left: calc(536 * var(--u));
    margin: 0;
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(124 * var(--u));
    line-height: calc(105 * var(--u));
    letter-spacing: 0;
    color: var(--wc-blue);
    white-space: nowrap;
}

.estrel-webcam__data-title-l {
    /* Söhne (regular) for " Daten " — leading space preserved */
}

.estrel-webcam__data-title-r {
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    font-size: calc(124 * var(--u));
}

.estrel-webcam__stats {
    position: absolute;
    /* Group y=2261, x=264, w=1392 → from section-top (2002): top 259 */
    top: calc(259 * var(--u));
    left: calc(264 * var(--u));
    width: calc(1392 * var(--u));
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(253 * var(--u)); /* 1087-264-570 = 253 */
    row-gap: 0;
}

.estrel-webcam__stat-row {
    display: grid;
    grid-template-columns: calc(115 * var(--u)) 1fr;
    align-items: center;
    height: calc(48 * var(--u));
    border-bottom: 0.5px solid var(--wc-blue);
    padding-top: calc(11 * var(--u));
    box-sizing: border-box;
}

.estrel-webcam__stat-value {
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    color: var(--wc-blue);
    padding-left: calc(2.5 * var(--u));
    white-space: nowrap;
}

.estrel-webcam__stat-label {
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    color: var(--wc-blue);
    padding-left: calc(36 * var(--u)); /* 1202.5-1087 = 115.5 - 80 ≈ ok */
}

/* ===== Mobile ≤ 640 ===== */
@media (max-width: 640px) {
    .estrel-webcam {
        --u: calc(100cqi / 375);
    }

    .estrel-webcam__inner {
        height: auto;
        padding: calc(120 * var(--u)) 0 calc(40 * var(--u));
    }

    .estrel-webcam__title {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: calc(4 * var(--u));
        padding: 0 calc(20 * var(--u));
    }

    .estrel-webcam__title-line1,
    .estrel-webcam__title-line2 {
        position: relative;
        top: auto;
        left: auto;
        font-size: calc(56 * var(--u));
        line-height: calc(64 * var(--u));
        white-space: normal;
        display: block;
    }

    .estrel-webcam__title-part2 {
        font-size: calc(56 * var(--u));
        line-height: calc(64 * var(--u));
        margin-right: calc(10 * var(--u));
    }

    .estrel-webcam__title-part3 {
        font-size: calc(58 * var(--u));
        line-height: calc(64 * var(--u));
        transform: none;
    }

    .estrel-webcam__media {
        position: relative;
        top: auto;
        left: auto;
        margin: calc(40 * var(--u)) calc(16 * var(--u)) 0;
        width: auto;
        height: calc(245 * var(--u));
    }

    .estrel-webcam__tabs {
        top: auto;
        bottom: calc(12 * var(--u));
        left: 50%;
        transform: translateX(-50%);
        width: calc(166 * var(--u));
        height: calc(24 * var(--u));
    }

    .estrel-webcam__data {
        height: auto;
        padding: calc(60 * var(--u)) calc(20 * var(--u));
    }

    .estrel-webcam__data-title {
        position: relative;
        top: auto;
        left: auto;
        font-size: calc(40 * var(--u));
        line-height: calc(44 * var(--u));
        white-space: normal;
    }

    .estrel-webcam__data-title-r {
        font-size: calc(40 * var(--u));
    }

    .estrel-webcam__stats {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-top: calc(28 * var(--u));
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .estrel-webcam__stat-row {
        grid-template-columns: calc(100 * var(--u)) 1fr;
        height: calc(44 * var(--u));
    }
}

/* ============================================================
   SPLIT LAYOUT (estreltower.com Reference)
   2 Spalten: links Live-Image + Pill, rechts Title + Intro + Stats.
   Aktiviert über zusätzliches Markup .estrel-webcam__inner--split.
   Overridet das ältere Hero+Stats-Layout per höherer Spezifität.
   ============================================================ */

.estrel-webcam__inner.estrel-webcam__inner--split {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(80 * var(--u));
    align-items: start;
    padding: calc(160 * var(--u)) calc(120 * var(--u));
    box-sizing: border-box;
}

/* Image column — re-stelle absolute Positionierung der Kinder ab */
.estrel-webcam__inner--split .estrel-webcam__media {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
}

.estrel-webcam__inner--split .estrel-webcam__bg {
    position: relative;
    width: 100%;
    /* Portrait wie estreltower.com Original — voller Tower sichtbar, kein Crop. */
    aspect-ratio: 3 / 4;
    border-radius: calc(3 * var(--u));
    overflow: hidden;
    background: #14172D;
}

.estrel-webcam__inner--split .estrel-webcam__image,
.estrel-webcam__inner--split .estrel-webcam__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain statt cover — zeigt das komplette Bild ohne Beschneidung,
       Letterbox-Bereich nimmt das __bg background (#14172D) auf. */
    object-fit: contain;
}

.estrel-webcam__inner--split .estrel-webcam__tabs {
    /* Pinned to top of __media (which is position:relative in split mode),
       centered horizontally over the image. */
    position: absolute;
    top: calc(20 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: auto;
    min-width: calc(180 * var(--u));
    white-space: nowrap;
    z-index: 5;
}
.estrel-webcam__inner--split .estrel-webcam__tab {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Info column */
.estrel-webcam__info {
    display: flex;
    flex-direction: column;
    gap: calc(30 * var(--u));
    color: var(--wc-cream);
    padding-top: calc(20 * var(--u));
}

.estrel-webcam__heading {
    margin: 0;
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(60 * var(--u));
    line-height: 1.1;
    color: var(--wc-cream);
}
.estrel-webcam__heading-r {
    font-family: 'GT Alpina', serif;
    font-weight: 250;
    font-style: italic;
}

.estrel-webcam__intro {
    margin: 0;
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: 1.5;
    color: var(--wc-cream);
    max-width: calc(620 * var(--u));
}

.estrel-webcam__location {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    color: var(--wc-cream);
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(18 * var(--u));
}
.estrel-webcam__location-pin {
    width: calc(14 * var(--u));
    height: calc(18 * var(--u));
    flex-shrink: 0;
}

/* Vertikale Stats mit Trennlinien */
.estrel-webcam__inner--split .estrel-webcam__stats {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: calc(720 * var(--u));
}

.estrel-webcam__inner--split .estrel-webcam__stat-row {
    display: grid;
    grid-template-columns: calc(220 * var(--u)) 1fr;
    column-gap: calc(40 * var(--u));
    align-items: center;
    padding: calc(20 * var(--u)) 0;
    border-bottom: 1px solid rgba(254, 245, 236, 0.25);
    margin: 0;
    height: auto;
}

.estrel-webcam__inner--split .estrel-webcam__stat-value {
    margin: 0;
    font-family: 'GT Alpina', serif;
    font-weight: 250;
    font-style: italic;
    font-size: calc(28 * var(--u));
    line-height: 1.2;
    color: var(--wc-cream);
}

.estrel-webcam__inner--split .estrel-webcam__stat-label {
    margin: 0;
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: 1.2;
    color: var(--wc-cream);
}

/* Hide alte Hero-Title-Komponenten (in alter Markup-Variante; harmlos hier) */
.estrel-webcam__inner--split .estrel-webcam__title,
.estrel-webcam__inner--split .estrel-webcam__data-title {
    display: none;
}

/* Hide das alte separate .estrel-webcam__data Container (alte Markup) */
.estrel-webcam:has(.estrel-webcam__inner--split) > .estrel-webcam__data {
    display: none;
}

/* Tablet (=1024) — Spalten enger */
@media (max-width: 1024px) {
    .estrel-webcam__inner.estrel-webcam__inner--split {
        column-gap: calc(40 * var(--u));
        padding: calc(120 * var(--u)) calc(60 * var(--u));
    }
    .estrel-webcam__inner--split .estrel-webcam__heading {
        font-size: calc(48 * var(--u));
    }
}

/* Mobile (=640) — Stacked */
@media (max-width: 640px) {
    .estrel-webcam__inner.estrel-webcam__inner--split {
        --u: calc(100cqi / 375);
        grid-template-columns: 1fr;
        row-gap: calc(40 * var(--u));
        padding: calc(120 * var(--u)) calc(20 * var(--u)) calc(60 * var(--u));
    }
    .estrel-webcam__inner--split .estrel-webcam__heading {
        font-size: calc(40 * var(--u));
    }
    .estrel-webcam__inner--split .estrel-webcam__intro {
        font-size: calc(16 * var(--u));
    }
    .estrel-webcam__inner--split .estrel-webcam__stat-row {
        grid-template-columns: calc(120 * var(--u)) 1fr;
        column-gap: calc(20 * var(--u));
        padding: calc(16 * var(--u)) 0;
    }
    .estrel-webcam__inner--split .estrel-webcam__stat-value {
        font-size: calc(20 * var(--u));
    }
    .estrel-webcam__inner--split .estrel-webcam__stat-label {
        font-size: calc(16 * var(--u));
    }
}

/* ============================================================
   INFO-HERO Overrides für Webcam-Page (dark variant)
   Figma webcam-737-109: Hero-Group y=254 bis y=768 → 514 hoch,
   "Estrel Tow" text-box endet bei x=1928 (right edge). cssID
   estrel-info-hero-dark ist am CE gesetzt — wir scopen die Overrides
   trotzdem über body:has(.estrel-webcam) für robusten Match.
   ============================================================ */

body:has(.estrel-webcam) .estrel-info-hero {
    background: #14172D !important;
    color: #FED3CD !important;
}

body:has(.estrel-webcam) .estrel-info-hero__inner {
    /* Figma Hero-Group y=254..768 → Container muss bis y=768 reichen, sonst
       wird line2 (top=475u + line-height=284u = ends at 759u) per overflow:hidden
       abgeschnitten. 768u vs FAQ 1022u → −254u weniger Leerraum unter Hero. */
    height: calc(768 * var(--u));
}

body:has(.estrel-webcam) .estrel-info-hero__title,
body:has(.estrel-webcam) .estrel-info-hero__line1,
body:has(.estrel-webcam) .estrel-info-hero__line2,
body:has(.estrel-webcam) .estrel-info-hero__line2 .estrel-info-hero__main-b,
body:has(.estrel-webcam) .estrel-info-hero__line2 .estrel-info-hero__accent-a {
    color: #FED3CD;
}

body:has(.estrel-webcam) .estrel-info-hero__line1 {
    /* "Estrel Tow" rechts angedockt — "Tow" am rechten Bildschirmrand statt
       links-fix bei x=475 (FAQ-Pattern). Mirror zur __line2-Bleed links. */
    left: auto;
    right: 0;
}