/* PHONE · Examples page (2026-10-02, pass 2). Reference: cuberto.com/projects mobile (measured @390: H1 y125 46.8px/500,
   filter row 18.72px, card list 359 wide with a 63px gap, caption = bold name + description).
   Owner call 2026-10-02: the project lists sit on a DARK section like the homepage (approved loops keep their presentation). */
@media (max-width:940px){
  /* tophead: the desktop H1 is visually hidden; on phone it is the page title. The desktop section is a dark slab with light text. */
  main #kunden{padding-top:32vw!important;padding-bottom:0!important;background:#fff!important;color:#000!important}
  main #kunden::before{display:none!important}
  main #kunden h1.sr-only{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;
    color:#000!important;font-size:clamp(28px, 11.1vw, 52px)!important;line-height:1!important;font-weight:600!important;letter-spacing:-.02em!important;text-align:left!important;text-wrap:wrap}
  /* desktop blocks that the phone replaces with its own sections */
  .mob-hint,#kunden .proj-grid,#kunden .addons,#mf-evidence{display:none!important}
  /* filter row */
  .ex-filter{display:flex!important;gap:8.5333vw;margin:12.8vw -4vw 0;padding:0 4vw;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ex-filter::-webkit-scrollbar{display:none}
  .ex-f{flex:none;padding:1.6vw 0 2.1333vw;margin:0;border:0;background:none;font:inherit;font-size:4.8vw;line-height:1.2;color:#000;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
    background-image:linear-gradient(#000,#000);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .45s cubic-bezier(.19,1,.22,1)}
  .ex-f.is-on{background-size:100% 1px}
  /* dark project chapter (homepage .phs-dark .phs-work); one caption pattern: bold name + description */
  /* filter -> first tile = 53px on the reference (measured @390): 24 white + 30 black here */
  #ph-work{display:block!important;margin-top:6.4vw!important;padding-top:8vw!important}
  #ph-work .ex-list{display:block}
  #ph-work .wk{color:#fff;margin-bottom:16vw}
  #ph-work .ex-tpl .wk:last-child{margin-bottom:0}
  #ph-work .wk-t{display:block;margin:21px 0 0;font-size:17.68px;line-height:1.2;max-width:337px}
  #ph-work .wk-n{font-weight:600}
  #ph-work .wk-cap{display:inline;margin:0;font-size:inherit;line-height:inherit;max-width:none}
  #ph-work .wk-sub{margin-top:5.3333vw}
  /* capabilities: Summary entries on white */
  #ph-cap{padding-top:26.6667vw!important;padding-bottom:26.6667vw!important}
  .cap-item{margin:0;padding:8vw 0;border-top:1px solid rgba(0,0,0,.14)}
  #ph-cap h2 + .cap-item{margin-top:10.6667vw}
  .cap-item .pf-media{display:block;margin:0 0 6.4vw}
  .cap-item h3{font-size:6.4vw!important;line-height:1.15!important;letter-spacing:-.02em!important;font-weight:400!important;margin:0!important}
  .cap-item 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}
  .cap-item .claimlist{list-style:none!important;margin:6.4vw 0 0!important;padding:0!important}
  .cap-item .claimlist li{display:block!important;font-size:4.2667vw!important;line-height:1.35!important;padding:3.4667vw 0!important;margin:0!important;border-top:1px solid rgba(0,0,0,.13)!important;color:#000!important}
  .cap-item .claimlist .ck{display:none!important}
  .cap-item .mfe-quote{margin:10.6667vw 0 0!important;padding:0!important;border:0!important;background:none!important;text-align:left!important;max-width:none!important}
  .cap-item .mfe-quote blockquote{font-size:6.4vw!important;line-height:1.2!important;letter-spacing:-.02em!important;font-weight:400!important;margin:0!important;padding:0!important;border:0!important;color:#000!important;text-align:left!important;max-width:none!important}
  .cap-item .mfe-quote figcaption{font-size:3.7333vw!important;line-height:1.4!important;margin:5.3333vw 0 0!important;opacity:.6;text-align:left!important;color:#000!important}
  /* filter states: tiles come directly under the filter */
  main[data-exf="kunden"] #ph-work .ex-tpl-head,main[data-exf="kunden"] #ph-work .ex-tpl{display:none!important}
  main[data-exf="kunden"] #ph-work .ex-kunden .wk:last-child{margin-bottom:0}
  main[data-exf="vorlagen"] #ph-work .ex-kunden,main[data-exf="vorlagen"] #ph-work .ex-tpl-head{display:none!important}
}

/* 2026-10-03: own closing artwork (a wall of project tiles, the wide middle tile holds the pill), tools/phone/card-art/outro_pages.py ex */
@media (max-width:940px){
  .phs-outro.-ex .phs-oart-b{background-image:url("../outro-ex-art.webp?v=1"),var(--oart-edge);
    background-image:image-set(url("../outro-ex-art-2x.webp?v=1") 2x,url("../outro-ex-art.webp?v=1") 3x),var(--oart-edge)}
  .phs-outro.-ex .phs-oart-g{background-image:url("../outro-ex-glow.webp?v=1")}
}