/* ────────────────────────────────────────────────────────
   Reset
───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; }
a { text-decoration: none; color: inherit; }

/* ────────────────────────────────────────────────────────
   Page – center the phone frame on desktop
───────────────────────────────────────────────────────── */
body {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #E8DCCB;
    padding: 24px 0;
}

/* ────────────────────────────────────────────────────────
   Phone shell – exact design canvas 375 × 667 dp
───────────────────────────────────────────────────────── */
.phone {
    position: relative;
    width: 375px;
    height: 667px;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 0;
}

/* Mobile: scale the 375-wide canvas to fill viewport width via `zoom`.
   `zoom` (unlike `transform`) lets the position:fixed tab bar pin to the
   real viewport bottom while still being scaled. --scale is set by
   mobile-scale.js from window.innerWidth (no innerHeight dependency, so it
   is immune to the mobile URL-bar show/hide height jitter). */
@media (max-width: 767px) {
    html { background: #F8F1E7; }
    body {
        display: block;
        min-height: 100dvh;
        padding: 0;
        background: #F8F1E7;
        overflow-x: hidden;
    }
    .phone {
        transform: scale(var(--scale, calc(100vw / 375)));
        transform-origin: top left;
        box-shadow: none;
    }
    /* Pin the bar to the real viewport bottom, scaled to full width.
       It sits outside .phone, so `fixed` is relative to the viewport. */
    .tabbar {
        position: fixed;
        left: 0;
        bottom: 0;
        transform: scale(var(--scale, calc(100vw / 375)));
        transform-origin: bottom left;
        z-index: 10;
    }
    /* The tab bar is no longer inside the canvas, so the scroll window can
       use the full space above the (now viewport-fixed) bar instead of the
       old hardcoded 583.5px. 100dvh is a live browser value (URL-bar safe);
       --scale converts screen px into the design's coordinate space. */
    .page-scroll {
        /* Fit the content when there's room; otherwise cap at the space above
           the fixed bar and scroll. 100dvh is a live, URL-bar-safe value;
           --scale converts screen px into the design coordinate space. */
        height: auto;
        max-height: calc(100dvh / var(--scale, 1) - 83.5px);
    }
}

/* Tablet+: add subtle shadow to show the phone frame */
@media (min-width: 768px) {
    .phone {
        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);
    }
    /* Bar overlays the bottom of the centered 375x667 frame:
       24px body padding-top + 583.5px design bar position = 607.5px. */
    .tabbar {
        position: absolute;
        top: 607.5px;
        left: 50%;
        margin-left: -187.5px;
    }
    .page-scroll { height: 583.5px; }
}

/* ────────────────────────────────────────────────────────
   Scrollable page content wrapper
   Used on pages where design canvas > 583.5px (phone height minus tab bar)
───────────────────────────────────────────────────────── */
.page-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    /* height is set per-breakpoint below (this base rule is later in the
       file than the mobile @media block, so defining height here would
       override it). Desktop = 583.5px; mobile = space above the fixed bar. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.page-canvas {
    position: relative;
    width: 375px;
}

/* ────────────────────────────────────────────────────────
   Background photo  (0, 0 → 375 × 655.5 px)
───────────────────────────────────────────────────────── */
.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 375px;
    height: 655.5px;
    object-fit: cover;
    object-position: center top;
}

/* ────────────────────────────────────────────────────────
   Logo  (28.5, 70.5 → 106.5 × 37.5 px)
───────────────────────────────────────────────────────── */
.logo {
    position: absolute;
    left: 28.5px;
    top: 70.5px;
    width: 106.5px;
    height: 37.5px;
    object-fit: contain;
}

/* ────────────────────────────────────────────────────────
   Headline  (28, 133 → 193.5 × 43 px)
   PNG slice from designer — exact font/line-break match
   TODO: replace with web font once correct font is sourced
───────────────────────────────────────────────────────── */
.headline {
    position: absolute;
    left: 28px;
    top: 133px;
    width: 193.5px;
    height: 43px;
}

/* ────────────────────────────────────────────────────────
   Subtitle  (27.5, 196.5 → 248 × 52.5 px)
   PNG slice from designer — exact font/line-break match
   TODO: replace with web font once correct font is sourced
───────────────────────────────────────────────────────── */
.subtitle {
    position: absolute;
    left: 27.5px;
    top: 196.5px;
    width: 248px;
    height: 52.5px;
}

/* ────────────────────────────────────────────────────────
   Buttons – shared base
   Both: 107.5 X, width 160.5, height 35, radius pill (656dp)
   Font: SourceHanSans SC Normal → Noto Sans SC 400, 13px
───────────────────────────────────────────────────────── */
.btn {
    position: absolute;
    left: 107.5px;
    width: 160.5px;
    height: 35px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-family: 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.01em;
}

/* Filled gold button – "Unsere Geschichte"  (top: 475.5px) */
.btn--filled {
    top: 475.5px;
    background: #CD9825;
    border: 0.5px solid #F8F1E7;
    color: #F8F1E7;
}

/* Outline button – "Entdecke ZHĒN"  (top: 521px) */
.btn--outline {
    top: 521px;
    background: #F8F1E7;
    border: 0.5px solid #CD9825;
    color: #CD9825;
}

.btn__arrow {
    width: 17.5px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────
   Tab bar top line  (0, 0 inside tabbar → 375 × 1.5 px)
───────────────────────────────────────────────────────── */
.tabbar-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: 1.5px;
    display: block;
    z-index: 1;
}

/* ────────────────────────────────────────────────────────
   Tab bar  (0, 583.5 → 375 × 83.5 px)
   Shadow: #000000 10%
───────────────────────────────────────────────────────── */
/* Tab bar is a sibling of .phone (not inside it) so it can pin to the real
   viewport bottom on mobile. Positioning is set per breakpoint below. */
.tabbar {
    width: 375px;
    height: 83.5px;
    background: #F8F1E7;
    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.10);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.tab {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 0;
}

.tab__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.tab__label {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #987649;
    letter-spacing: 0.02em;
}

.tab--active .tab__label {
    color: #CD9825;
}

.tab--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 39.5px;
    height: 1.5px;
    background: #CD9825;
}