/* V16.11: echte Screenshot-Galerie, zurückhaltende FDS-Markenmittel, kein generisches Demo-Raster. */
.portfolio-hero { padding-bottom: 36px; }
.portfolio-hero .page-h1 { max-width: 20ch; }
.case-studies { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; margin: 20px 0 58px; }
.case-card { position: relative; min-width: 0; padding: clamp(22px,3.4vw,38px); border-radius: var(--radius-lg); background:var(--color-cream-soft); border:1px solid var(--color-line); box-shadow: var(--shadow-sm); scroll-margin-top:110px; }
.case-card .work-card-label { margin-bottom:15px; }
.case-card h2 { font-family:var(--font-display); font-size: clamp(1.8rem,2.6vw,2.45rem); line-height:1.12; font-weight:500; letter-spacing:-.02em; margin-bottom:14px; }
.case-card p { color:var(--color-ink-soft); line-height:1.7; font-size:1rem; }
.case-context { margin-top:14px; font-size:.88rem !important; color: var(--color-muted) !important; }
.case-facts { border-top: 1px solid var(--color-line); margin-top:23px; padding-top:12px; display:grid; gap:9px; }
.case-facts > div { display:grid; grid-template-columns:110px minmax(0,1fr); column-gap:14px; font-size:.83rem; line-height:1.5; }
.case-facts dt { font-weight:600; color:var(--color-ink); }
.case-facts dd { color: var(--color-muted); margin:0; min-width:0; overflow-wrap:anywhere; }
.case-facts a { color:var(--color-forest); text-decoration:underline; text-underline-offset:3px; }
.case-image { margin-top:23px; overflow:hidden; }
.case-image img { width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--color-line); }
.case-image figcaption, .case-phones figcaption { font-size:.77rem; line-height:1.4; color:var(--color-muted); margin-top:9px; }
.case-phones { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items:start; gap:clamp(12px,2vw,30px); background:#f1e9df; padding:clamp(18px,3vw,30px); border:1px solid #e7dbce; border-radius:var(--radius-lg); }
.case-phones figure { min-width:0; text-align:center; }
.case-phones img { width:auto; max-width:100%; max-height:460px; aspect-ratio:auto; margin:0 auto; border:1px solid rgba(20,32,31,.10); border-radius:19px; box-shadow:0 10px 22px rgba(20,32,31,.10); }
.case-card.case-feature { background:#f9f5ee; }
.case-afterword { margin:0 0 52px; max-width:76ch; }
.case-afterword h2 { font-family:var(--font-display); font-size: clamp(1.55rem, 3vw, 2.3rem); line-height:1.18; margin-bottom:14px; }
.case-afterword p { line-height:1.7; }
.hash-alias { display:block; position:relative; top:-110px; height:0; }
@media (min-width: 760px) {
 .case-studies { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .case-feature { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(20px,4vw,48px); align-items:center; }
 .case-image-card { display:flex; flex-direction:column; }
 .case-image-card .case-image { margin-top:auto; padding-top:22px; }
 .case-image-card .case-facts { margin-top:18px; }
}
@media (max-width: 430px) {
 .case-card { padding:18px; }
 .case-phones { padding:12px; gap:10px; }
 .case-phones img { border-radius:12px; }
 .case-facts>div { grid-template-columns:1fr; gap:2px; }
 .case-image figcaption { line-height:1.5; }
}
/* Alias-IDs dürfen das CSS-Grid nicht als unsichtbare Zellen verschieben. */
.hash-alias { position:absolute; top:-105px; left:0; width:1px; height:1px; overflow:hidden; }
.portfolio-intro-actions { margin-top: 26px; }

/* V17.0: same surface vocabulary as homepage, existing case information unchanged. */
.case-card { background:var(--color-surface-elevated); border-color:var(--color-line-sage); }
.case-card.case-feature { background:var(--color-surface-sage-soft); }
.case-phones { background:var(--color-surface-sage); border-color:var(--color-line-sage); }
.case-image img { border-color:var(--color-line-sage); }
@media (prefers-reduced-motion: reduce) { .case-card, .case-phones { transition:none; } }