/* #2649 — case screenshots: no more "cropped" look.
   Landscape screens sit in a padded stage inside a dark browser window (chrome bar + dots),
   shown whole (height:auto, no crop). Portrait/square panels sit in the same stage, capped height.
   Case cards (hub, related) show the whole cover instead of a 16:10 slice. */
.case-feature__media.cfm-web,
.case-feature__media.cfm-panel{
  display:flex !important; align-items:center; justify-content:center;
  padding:clamp(16px,2.6vw,36px) !important;
  border-radius:var(--radius-xl,24px) !important;
  background:radial-gradient(120% 90% at 50% 0%,rgba(63,107,255,.20),rgba(63,107,255,0) 62%),var(--card,#10152a) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important; overflow:hidden;
}
.case-feature__media.cfm-web::before,
.case-feature__media.cfm-panel::before{display:none !important}
.cfm-win{
  display:block; width:100%; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.10);
  transition:transform .48s cubic-bezier(.16,1,.3,1);
}
.cfm-win::before{
  content:""; display:block; height:24px;
  background:
    radial-gradient(circle at 16px 50%,#ff5f57 0 4.5px,transparent 5.5px),
    radial-gradient(circle at 33px 50%,#febc2e 0 4.5px,transparent 5.5px),
    radial-gradient(circle at 50px 50%,#28c840 0 4.5px,transparent 5.5px),
    linear-gradient(180deg,#1f2640 0%,#171c30 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.case-feature__media.cfm-web img{
  display:block !important; width:100% !important; max-width:100% !important;
  height:auto !important; max-height:none !important; aspect-ratio:auto !important;
  object-fit:contain !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; transform:none !important; background:#fff;
}
.case-feature__media.cfm-web:hover .cfm-win{transform:translateY(-5px)}
.case-feature__media.cfm-panel img{
  display:block !important; width:auto !important; max-width:100% !important;
  height:auto !important; max-height:clamp(380px,56vh,560px) !important;
  object-fit:contain !important; border:0 !important; border-radius:14px !important;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.10) !important;
}
@media (prefers-reduced-motion:reduce){.cfm-win{transition:none}.case-feature__media.cfm-web:hover .cfm-win{transform:none}}
/* cards: whole cover, no 16:10 slice */
.ccard .ph{aspect-ratio:4/3 !important}
.proj .pcard .ph{aspect-ratio:5/4 !important}
/* tablet: the tilted 3D cover rose over the hero meta row — push it down */
@media (min-width:561px) and (max-width:1023.98px){main.case-detail .case-detail__hero-visual:has(.case3d){margin-top:clamp(56px,10vw,96px)}}
/* narrow: long compound words in case H1 (DE "Laravel-Multi-Tenant-Plattform") pushed the hero grid past the viewport */
main.case-detail .case-detail__hero-grid>*{min-width:0}
main.case-detail .case-detail__hero-copy h1{overflow-wrap:break-word;hyphens:manual}
@media (max-width:480px){main.case-detail .case-detail__hero-copy h1{overflow-wrap:anywhere}}
/* narrow: long DE compounds in section titles / card h3 («Dokumentenmanagementsystem») */
main.case-detail :is(h2,h3){overflow-wrap:break-word}
/* v2649d: no syllable breaks of short words on desktop («ei-nen», «Ser-vice»); only long compounds, only narrow */
@media (max-width:600px){main.case-detail :is(h1,h2,h3){hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 6}}
/* related-case cards: whole 4:3 cover, no 3:2 slice (edplace, joyjet, limp-vpn, healthband) */
.pcard .ph{aspect-ratio:4/3 !important}
.proj .pcard .ph{aspect-ratio:5/4 !important}
.card--case .card__cover{aspect-ratio:4/3 !important;height:auto !important}
/* v2649d: landscape panel shots reserve their box before lazy load (no 42px collapsed panel, no CLS) */
.case-feature__media.cfm-panel.cfm-land img{width:100% !important;max-height:none !important}