/* ══════════════════════════════════════════════════════════════════
   Projektseiten: Korrekturen fuer schmale Schirme.
   Laedt NACH case.css und case-dark.css - die geteilten Dateien
   bleiben unberuehrt (sie bedienen auch den Live-Stand).
   ══════════════════════════════════════════════════════════════════ */

@media (max-width:720px) {

  /* ── 1) Bild steht rechts vom Text? Auf dem Handy gehoert es darueber ── */
  .zp-split, .rd-split, .swm-viz-split,
  .pn-split,
  .bl-award-sec, .psp-award-sec, .uk-award, .al-tisax-sec {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:clamp(20px,5vw,34px) !important;
  }
  .zp-split img, .zp-split .zp-dash,
  .rd-split img, .swm-viz-split .swm-viz,
  .bl-award-medal, .psp-award-medal, .uk-medal, .al-tisax-wrap {
    order:-1 !important;
    justify-self:start !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

    /* ── 1b) Headerbilder der Projektseiten deutlich hoeher: im Querformat
     bleibt auf dem Handy sonst nur ein schmaler Streifen uebrig ── */
  .cs-gallery figure.cs-gal-wide img { height:52vw !important; min-height:190px;
    object-fit:cover !important; }

/* ── 2) Bildpaare nebeneinander werden untereinander ── */
  .cs-gal-row { grid-template-columns:1fr !important; }

  /* ── 3) Mockup-Kacheln hochkant, damit die Handys gross genug sind ── */
  .cs-gallery figure.pn-mock, .cs-gallery figure.swm-mock,
  .cs-gallery figure.zp-mock {
    aspect-ratio:auto !important; height:auto !important;
  }
  .pn-mock iframe, .swm-mock iframe, .zp-mock iframe {
    position:relative !important; height:660px !important;
  }
}

/* ── 4) PASSNGR: Bildausschnitt auf den Reisenden legen ── */
@media (max-width:720px) {
  .pn-hero-figure img, figure.cs-gal-wide img.cs-plx[src*="flughafen-1"] {
    object-position:78% 50% !important;
  }
}

/* ── 5) PASSNGR: Telefon und Panels im Fullscreen-Showcase groesser ── */
@media (max-width:720px) {
  .cs-fs3-canvas { height:min(62vh,540px) !important; aspect-ratio:.98 !important; }
  .fs3-phone, .fs3-screen { left:-2% !important; height:106% !important; top:-2% !important; }
  /* Panels weiter nach links, damit die Flughafen-Zeilen vollstaendig im Bild sind */
  .fs3-panel { right:1% !important; left:auto !important; width:60% !important; top:66% !important; }
}

/* ── 6) SWM: Motiv ruhiger, Leitungen feiner, Symbole groesser ── */
@media (max-width:720px) {
  /* Bild in voller Breite oben, darunter laeuft der Farbton weiter */
  .swm-energy .cs-fs2-base { background-size:100% auto !important; background-position:50% 0 !important;
    background-repeat:no-repeat !important; background-color:#16233A !important; }
  .swm-energy .cs-fs2-base::after { background:rgba(0,0,0,.28) !important; }
  .swm-el .el { stroke-width:1.4 !important; }
  .swm-el .el-glow { stroke-width:5 !important; opacity:.32 !important; }
  .swm-el-ics { gap:14px !important; }
  .swm-el-ics i { width:54px !important; height:54px !important; font-size:22px !important; }
}

/* ── 7) Weniger Weissraum auf schmalen Schirmen ── */
@media (max-width:720px) {
  .cs-txt { padding-top:clamp(34px,8vw,54px) !important;
            padding-bottom:clamp(28px,7vw,46px) !important; }
  .cs-quote { padding-top:clamp(34px,8vw,54px) !important;
              padding-bottom:clamp(34px,8vw,54px) !important; }
  .cs-head { padding-bottom:clamp(20px,5vw,34px) !important; }
  .cs-main--roomy { padding-top:clamp(30px,7vw,48px) !important; }
  .cs-gallery { margin-top:clamp(10px,3vw,20px) !important;
                margin-bottom:clamp(10px,3vw,20px) !important; }
}

/* ── 8) PASSNGR: die Illustration gehoert hinter den Text und darf
      rechts aus dem Bild laufen ── */
@media (max-width:720px) {
  .pn-split { position:relative; }
  .pn-split .pn-illu {
    order:0 !important; position:absolute !important; z-index:0 !important;
    right:-24%; left:auto; top:-4%; width:86%; opacity:.55; pointer-events:none;
  }
  .pn-split > *:not(.pn-illu) { position:relative; z-index:1; }
  .pn-illu-icon { animation:none; }
}

/* ── 9) PSP: Bildausschnitte und Screenhoehen ── */
@media (max-width:720px) {
  /* Der Lachende sitzt rechts im Bild */
  .psp-hero img[src*="team-rooftop"] { object-position:72% 40% !important; }
  /* Lange Screenshot-Kacheln nicht ueber die halbe Bildschirmhoehe hinaus */
  .psp-hero img, .psp-hero video { height:clamp(300px,52vh,460px) !important; }
}