/* PHONE · Process page (2026-10-02, final pass). Reference: cuberto.com mobile (tophead, dark chapter with square media cards
   + title + text, Summary entries with a media card). The phone has its own sections (#ph-steps, #ph-after): the page explains
   HOW Gmax works; the desktop #ablauf / #traffic sections are hidden on phone. */
@media (max-width:940px){
  /* tophead */
  main .prz-hero{padding-top:32vw!important;padding-bottom:26.6667vw!important;text-align:left!important}
  main .prz-hero > .wrap > .phs-label{font-size:4.2667vw!important;line-height:1.2!important;margin:0 0 3.2vw!important;opacity:1}
  main .prz-hero h1{font-size:clamp(28px, 11.1vw, 52px)!important;line-height:1!important;font-weight:600!important;letter-spacing:-.02em!important;text-align:left!important;margin:0!important;max-width:none!important;text-wrap:wrap}
  main .prz-hero .sec-lead{margin:6.4vw 0 0!important}
  main #ablauf,main #traffic{display:none!important}
  /* steps: dark chapter, square full-bleed media card, then title + text */
  main #ph-steps{display:block!important;padding:22.1867vw 4vw!important}
  #ph-steps h2{color:#fff!important}
  .pz-step{margin:0 0 16.5333vw}
  #ph-steps h2 + .pz-step{margin-top:20.2667vw}   /* heading -> first card = 79px on the reference */
  /* the fold hides the detail paragraph; the statement paragraph always shows whole */
  .pz-step.pm:not(.pm-open) > p:first-of-type,.pz-entry.pm:not(.pm-open) > p:first-of-type{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important}
  .sv-media.-sq{aspect-ratio:1!important;margin:0 0 5.3333vw!important}
  /* dark photo edges vanish on the black section: one light hairline on the card radius (as the KfzAds tile) */
  #ph-steps .sv-media.-sq::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
  .pz-step h3{font-size:6.656vw!important;line-height:1.4!important;font-weight:400!important;letter-spacing:0!important;color:#fff!important;margin:0!important}
  .pz-step p{font-size:4.992vw!important;line-height:1.5!important;color:rgba(255,255,255,.7)!important;margin:2.1333vw 0 0!important;max-width:none!important}
  .pz-step .pm-btn{color:#fff}
  .pz-band{margin:0!important;padding:5.3333vw 0 0!important;border-top:1px solid rgba(255,255,255,.18);font-size:4.2667vw!important;line-height:1.45!important;color:rgba(255,255,255,.7)!important;max-width:none!important}
  /* after launch: Summary entries with a media card */
  main #ph-after{display:block!important;padding-top:26.6667vw!important;padding-bottom:18.6667vw!important}
  .pz-entry{padding:8vw 0;margin:0;border-top:1px solid rgba(0,0,0,.14)}
  #ph-after .sec-lead + .pz-entry{margin-top:10.6667vw}
  .pz-entry h3{font-size:6.4vw!important;line-height:1.15!important;letter-spacing:-.02em!important;font-weight:400!important;margin:0!important}
  .pz-entry p{font-size:4.2667vw!important;line-height:1.45!important;margin:4.2667vw 0 0!important;color:var(--muted)!important;max-width:none!important}
  /* closing section: its own artwork (three nested rings around the pill = the three steps converging on "start here").
     Same two-layer mechanism as outro-art.css (static art + breathing red light), tools/phone/card-art/outro_proc.py. */
  .phs-outro.-proc .phs-oart-b{background-image:url("../outro-proc-art.webp?v=2"),var(--oart-edge);
    background-image:image-set(url("../outro-proc-art-2x.webp?v=2") 2x,url("../outro-proc-art.webp?v=2") 3x),var(--oart-edge)}
  .phs-outro.-proc .phs-oart-g{background-image:url("../outro-proc-glow.webp?v=2")}
}