/* ============================================================
   SfKuK — Mobile interpretation of the landing page
   ------------------------------------------------------------
   Loaded AFTER styles.css + events.css. The desktop layout is
   left completely untouched; everything here lives inside a
   max-width media query and only re-flows the page for phones.
   To roll this experiment back, simply unlink this file.
   ============================================================ */

/* Mobile-only hero controls — never shown on desktop. */
.vhero__mnews,
.vhero__mbtn,
.vhero__mcue { display: none; }

@media (max-width: 1050px) {

  /* =========================================================
     HERO  ·  two mobile states driven by `.vhero.is-mnews`
     ---------------------------------------------------------
     State A (default): rounded video card + 40-Jahre logo pill
       (top-right), dark glass burger (top-left), big red word-
       mark below, a red "Was gibt's neues?" button low-right of
       the video, and a "wische runter" scroll cue at the foot.
       The search bar is intentionally hidden for now.
     State B (.is-mnews): the video group slides out left and a
       full-screen "Aktuelles auf einen Blick" news panel slides
       in from the right; the red button shrinks into a back-dot
       bottom-left, the scroll cue moves bottom-right.
     ========================================================= */
  .vhero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
    padding: 0 !important;
    --vh-card: 57svh;
  }

  /* Hide the desktop drag pieces + (for now) the search */
  .vhero__handle,
  .vhero__search,
  .vhero__projects { display: none !important; }

  /* ── Video group: the card + wordmark slide together ── */
  .vhero__track {
    position: absolute !important;
    top: 14px; left: 0; right: 0;
    height: var(--vh-card);
    padding: 0 14px !important;
    gap: 0 !important;
    transform: none !important;
    transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .45s ease;
    z-index: 4;
  }
  .vhero__stage {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    border-radius: 30px;
  }

  /* Burger — dark glass dot, top-left inside the video */
  /* Burger — solid BLACK dot (matches desktop), top-left. Same Y and the
     same inset from the video edge as the logo pill (≈14px on each side). */
  .vhero__burger {
    top: 36px !important;
    left: 36px !important;
    right: auto !important;
    width: 50px; height: 50px;
    transform: none !important;
    background: #111 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    z-index: 6;
    transition: opacity .4s ease;
  }

  /* Logo pill — top-RIGHT, same Y + same edge-inset as the burger (22px from
     the card edges; burger is +14 because it is anchored to the screen, not
     the card, so 36 − 14 card-inset = 22 from the card edge too). */
  .vhero__chrome {
    top: 22px !important;
    left: auto !important;
    right: 22px !important;
    width: auto;
    gap: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  .gnav { display: none !important; }
  .glogo {
    width: auto !important;
    height: 50px !important;
    padding: 0 14px !important;
    gap: 0 !important;
  }
  .glogo__mark, .glogo__word { height: 30px !important; }

  /* Big red wordmark below the video */
  .vhero__wordmark {
    position: absolute !important;
    top: calc(14px + var(--vh-card) + 20px);
    left: 0; right: 0;
    text-align: left !important;
    padding: 0 22px !important;
    z-index: 4;
    transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .45s ease;
  }
  .vhero__wordmark .line {
    font-size: clamp(27px, 8.4vw, 44px) !important;
    height: auto !important;
    line-height: 1.0 !important;
    display: block;
  }

  /* ── State B: slide the video group out, fade the burger ── */
  .vhero.is-mnews .vhero__track,
  .vhero.is-mnews .vhero__wordmark {
    transform: translateX(-22%);
    opacity: 0;
    pointer-events: none;
  }
  .vhero.is-mnews .vhero__burger { opacity: 0; pointer-events: none; }

  /* ── Mobile news overlay ── */
  .vhero__mnews {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 10;
    background: #fff;
    padding: 40px 20px 92px;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .4s ease;
  }
  .vhero.is-mnews .vhero__mnews {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  .vhero__mnews-head { flex: 0 0 auto; margin-bottom: 8px; }
  .vhero__mnews-kicker {
    font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--red); margin-bottom: 10px;
  }
  .vhero__mnews-title {
    font-family: var(--sf), "SF Pro Display", -apple-system, sans-serif;
    font-size: clamp(28px, 8vw, 36px); line-height: 1.02;
    letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px;
  }
  .vhero__mnews-lead {
    font-size: 13.5px; line-height: 1.5; color: var(--muted);
    margin: 0; max-width: 40ch; text-wrap: pretty;
  }
  /* Cards stack from the top with a capped gap; any leftover space falls
     BELOW the list (between the news and the "wische runter" cue) instead
     of inflating the gaps on tall tablets. On very narrow/short screens
     (e.g. iPhone SE, ≤342px wide) the list scrolls internally instead of
     clipping the last card. */
  .vhero__mnews-list {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    justify-content: flex-start; gap: clamp(14px, 2.6svh, 30px);
    padding-top: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vhero__mnews-list::-webkit-scrollbar { display: none; }
  .vmnews { flex: 0 0 auto; }
  .vmnews { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
  .vmnews__media {
    position: relative;            /* anchor for the absolutely-positioned <img> */
    overflow: hidden;              /* keep the cover-crop inside the rounded frame */
    width: 100%;
    height: clamp(72px, 15svh, 142px); /* taller on real phones (15svh) → ~15% less whitespace; the low floor keeps short/landscape windows from clipping */
    border-radius: 16px;
    background:
      linear-gradient(135deg,
        oklch(0.64 0.17 var(--h, 12)),
        oklch(0.45 0.16 calc(var(--h, 12) + 34)));
  }
  .vmnews__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .vmnews__txt { min-width: 0; }
  .vmnews__title {
    font-size: 15.5px; font-weight: 700; line-height: 1.18;
    color: var(--ink); margin: 0 0 3px; text-wrap: pretty;
  }
  .vmnews__meta { font-size: 12.5px; color: var(--muted); }
  .vmnews__go {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    color: var(--ink);
  }
  .vmnews__go svg { width: 17px; height: 17px; }

  /* ── Morphing red button: "Was gibt's neues?" ⇄ back-dot ── */
  .vhero__mbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: absolute;
    z-index: 30;
    width: 126px; height: 126px;
    left: calc(100vw - 28px - 126px);
    bottom: calc(100svh - var(--vh-card) + 6px);
    border-radius: 50%;
    background: var(--red);
    color: #fff; border: 0; cursor: pointer;
    box-shadow: 0 14px 30px rgba(0,0,0,0.20);
    transition: left .55s cubic-bezier(.65,0,.35,1),
                bottom .55s cubic-bezier(.65,0,.35,1),
                width .5s ease, height .5s ease, box-shadow .3s ease;
  }
  .vhero__mbtn-arrow { width: 34px; height: 34px; transition: transform .5s ease, width .4s, height .4s; }
  .vhero__mbtn-label {
    font-size: 13px; font-weight: 600; line-height: 1.05; max-width: 90px;
    overflow: hidden; max-height: 32px; transition: opacity .25s ease, max-height .4s ease;
  }
  .vhero.is-mnews .vhero__mbtn {
    width: 54px; height: 54px;
    left: 20px;
    bottom: 22px;
    gap: 0;            /* no label gap -> arrow sits dead-centre */
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  }
  .vhero.is-mnews .vhero__mbtn-arrow { transform: rotate(180deg); width: 24px; height: 24px; }
  .vhero.is-mnews .vhero__mbtn-label { display: none; } /* fully gone → arrow exactly centred */

  /* ── Scroll cue pill ── */
  .vhero__mcue {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    position: absolute;
    z-index: 28;
    bottom: 22px;
    right: 50%;
    transform: translateX(50%);
    height: 54px;            /* matches the red back-dot height */
    padding: 0 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    color: var(--ink);
    font-size: 13px; font-weight: 500; white-space: nowrap;
    cursor: pointer;
    transition: right .55s cubic-bezier(.65,0,.35,1), transform .55s cubic-bezier(.65,0,.35,1);
  }
  .vhero__mcue svg { width: 17px; height: 17px; }
  .vhero.is-mnews .vhero__mcue {
    right: 20px;
    transform: translateX(0);
  }

  /* ---------------------------------------------------------
     BURGER MENU DRAWER — full-bleed on mobile; nav pushed down
     so the close (X) button never sits on top of "Projekte".
     --------------------------------------------------------- */
  .nav-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .nav-drawer__head { display: none !important; }
  .nav-drawer__nav { padding: 96px 22px 8px !important; }

  /* ---------------------------------------------------------
     SHARED SECTION RHYTHM
     --------------------------------------------------------- */
  .landing-section { padding: 60px 18px !important; }
  .map-section { padding: 60px 18px !important; }

  .landing-section__head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 30px !important;
  }
  .landing-section__title {
    font-size: clamp(30px, 8.6vw, 46px) !important;
  }
  .landing-section__lead { font-size: 15px !important; }

  /* ---------------------------------------------------------
     ABOUT
     --------------------------------------------------------- */
  .landing-section--about { padding-top: 18px !important; }
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  .about-grid__media { min-height: 0 !important; }
  .about-grid__media--photo img,
  .about-grid__overlay img,
  .about-grid__overlay .placeholder { min-height: 300px !important; }
  .about-grid__pillars {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .about-grid__pillars > div[style] { flex-wrap: wrap; }
  .about-grid__pillars .btn { flex: 1 1 auto; justify-content: center; }

  /* Caption pill: left-aligned like desktop, fixed inset from the image's
     left + bottom edge; wide enough to stay at 1–2 lines on most screens. */
  .about-grid__caption {
    left: 14px !important;
    right: auto !important;
    bottom: 14px !important;
    transform: none;
    max-width: calc(100% - 28px);
    text-align: left;
    line-height: 1.35;
    /* Equalise the two wrapped lines so the shrink-wrapped pill (JS in
       AboutBlock) hugs the text with symmetric padding. */
    text-wrap: balance;
  }

  /* "In figures" — inline 66px headline forced down; 2×2 red dots */
  .figs { margin-top: 48px !important; }
  .figs__title { font-size: clamp(26px, 8vw, 40px) !important; }
  .figs__circles {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-top: 32px !important;
  }
  .figc { padding: 14px !important; }

  /* ---------------------------------------------------------
     PROJECTS IN FOCUS
     --------------------------------------------------------- */
  .focus-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
  }
  .focus-row .btn { align-self: stretch; justify-content: center; }
  /* Two projects per row; the first (the showcase project) spans a full row */
  .focus-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 16px !important; }
  .focus--big { grid-row: auto !important; grid-column: 1 / -1 !important; }
  .focus--big .focus__media {
    aspect-ratio: 16 / 9 !important;
    flex: none !important;
    min-height: 0 !important;
  }
  .focus--sm .focus__media {
    aspect-ratio: 4 / 3 !important;
    flex: none !important;
    min-height: 0 !important;
  }
  /* Titles: max 2 lines on phones (1 on desktop); press-and-hold shows all */
  .focus__title { -webkit-line-clamp: 2; }
  .focus__title:active { -webkit-line-clamp: 99; }

  /* ---------------------------------------------------------
     MAP SECTION
     --------------------------------------------------------- */
  .map-section__head { margin-bottom: 26px !important; }
  .map-section__lead { font-size: 15px !important; }
  .map-section__stage {
    height: 62vh !important;
    min-height: 420px;
    border-radius: 22px !important;
  }

  /* ---------------------------------------------------------
     NEWS HIGHLIGHTS + NEWSLETTER
     --------------------------------------------------------- */
  /* Two news cards per row on the landing page */
  .nh-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 16px !important; }
  .nh-card__lead {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .newsletter-cta { padding: 28px 22px !important; margin-top: 48px !important; }
  .newsletter-cta__title { font-size: 24px !important; }
  /* Drop the single-pill wrapper on mobile — it makes a broken pill-in-pill
     once the input + button stack. Give each its own rounded field. */
  .newsletter-cta__form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .newsletter-cta__input {
    width: 100%;
    flex: none !important;
    height: 52px;
    box-sizing: border-box;
    padding: 0 18px;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 999px;
  }
  .newsletter-cta__btn { width: 100%; height: 52px; justify-content: center; }

  /* ---------------------------------------------------------
     FOOTER
     --------------------------------------------------------- */
  .footer { padding: 54px 18px 30px !important; }
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 24px !important;
    padding-bottom: 40px;
  }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
  .footer__bottom {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    font-size: 11.5px;
  }
}

/* Extra squeeze for the smallest handsets */
@media (max-width: 380px) {
  .vhero__wordmark .line { font-size: clamp(24px, 8vw, 34px) !important; }
  .figc__num { font-size: clamp(34px, 11vw, 46px) !important; }
}