/* 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")}
}

/* 2026-10-06 (Max memo, mobile Portfolio): References / Concepts / Marketing are separate views (assets/phone/views.js,
   shared rules in phone.css). Marketing keeps the Process rings artwork (Max: "this one works"). */
@media (max-width:940px){
  #ph-work .wk-wip{cursor:default}
  .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")}
}
/* the view heroes now carry the title + intro; the older in-list heads would repeat them */
@media (max-width:940px){ main #ph-work .ex-kunden-head,main #ph-work .ex-tpl-head{display:none!important} }

/* 2026-10-06 (Max memo): own closing art per view, Gmax-Media-Web/tools/phone/card-art/outro_views.py (refs = shop fronts tied to their websites, conc = fan of page layouts) */
@media (max-width:940px){
  .phs-outro.-refs .phs-oart-b{background-image:url("../outro-refs-art.webp?v=2"),var(--oart-edge);
    background-image:image-set(url("../outro-refs-art-2x.webp?v=2") 2x,url("../outro-refs-art.webp?v=2") 3x),var(--oart-edge)}
  .phs-outro.-refs .phs-oart-g{background-image:url("../outro-refs-glow.webp?v=2")}
  .phs-outro.-conc .phs-oart-b{background-image:url("../outro-conc-art.webp?v=2"),var(--oart-edge);
    background-image:image-set(url("../outro-conc-art-2x.webp?v=2") 2x,url("../outro-conc-art.webp?v=2") 3x),var(--oart-edge)}
  .phs-outro.-conc .phs-oart-g{background-image:url("../outro-conc-glow.webp?v=2")}
}
/* Max 2026-10-06: the gap between the last project and the FAQ was ~250 px; the list now ends the section */
@media (max-width:940px){
  main[data-pv="refs"] #ph-work,main[data-pv="concepts"] #ph-work{padding-bottom:0!important}
  main[data-pv="refs"] #ph-work .ex-kunden,main[data-pv="concepts"] #ph-work .ex-tpl{margin-bottom:0!important;padding-bottom:0!important}
}
/* 2026-10-07 (Max spacing pass). References: the last client card kept #ph-work .wk margin-bottom 16vw; with the section's bottom
   padding at 0 that margin collapsed OUT of the black #ph-work and showed as a 62 px white strip before the black FAQ.
   Marketing: hero line -> first evidence 104 -> 41.6 px (10.6667vw, the view-hero rhythm of SEO / Advertising); after the last item
   #ph-cap padding 104 px + FAQ 104 px -> padding 0 (the item's own 31 px remain, like #ph-after -> FAQ). */
@media (max-width:940px){
  main #ph-work .ex-kunden .wk:last-child{margin-bottom:0!important}
  main[data-pv="marketing"] #ph-cap{padding-top:10.6667vw!important;padding-bottom:0!important}
}

/* 2026-10-07 (Max memo, Concepts breadth pass): ten concept cards, one consistent GMAX wrapper: preview, name,
   niche line, a clear "view concept" action. The concepts differ; the wrapper does not. */
@media (max-width:940px){
  #ph-work .wk-cn .wk-cap{display:block;margin-top:4px;opacity:.7;font-size:15.5px;line-height:1.35}
  #ph-work .wk-go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:15.5px;font-weight:600;line-height:1.2;
    padding-bottom:3px;border-bottom:1.5px solid currentColor}
  #ph-work .wk-go::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-left:1px}
}