/* chrishob.de v5.0.3 - restrained, varied visuals */
.experience-v503-restrained .restrained-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(260px,320px);
    gap:34px;
    padding-top:40px;
    padding-bottom:40px;
}
.experience-v503-restrained .restrained-hero-media{
    height:205px;
    max-width:320px;
    width:100%;
    justify-self:end;
    border-radius:16px;
    box-shadow:0 12px 32px rgba(5,35,72,.09);
}
.experience-v503-restrained .restrained-hero-media img{object-position:center;filter:saturate(.78) brightness(1.03)}

/* Start cards use meaningful icons instead of four more large photos. */
.experience-v503-restrained .restrained-feature-card{position:relative;padding-top:0;overflow:hidden}
.experience-v503-restrained .restrained-feature-icon{
    width:46px;height:46px;margin:18px 18px 0;border-radius:13px;display:grid;place-items:center;
    background:#edf4ff;color:#0b5bd3;border:1px solid #dbe9fa;
}
.experience-v503-restrained .restrained-feature-icon .v503-icon{width:24px;height:24px}
.experience-v503-restrained .restrained-feature-card:nth-child(2) .restrained-feature-icon{background:#eef8f1;color:#168047;border-color:#d9edde}
.experience-v503-restrained .restrained-feature-card:nth-child(3) .restrained-feature-icon{background:#f4f0ff;color:#6d46c7;border-color:#e7ddff}
.experience-v503-restrained .restrained-feature-card:nth-child(4) .restrained-feature-icon{background:#fff6e8;color:#a76500;border-color:#f8e6c8}

/* Only selected landing pages keep a real photo, as a small supporting thumbnail. */
.experience-v503-restrained .page-hero.v503-has-thumb{
    min-height:215px;
    padding-top:40px;
    padding-bottom:40px;
    background:#f8fbff;
}
.experience-v503-restrained .page-hero.v503-has-thumb::before{display:none}
.experience-v503-restrained .page-hero.v503-has-thumb .v503-hero-thumb{
    position:absolute;
    left:auto;
    right:max(24px,calc((100vw - 1200px)/2));
    top:50%;bottom:auto;
    transform:translateY(-50%);
    width:250px;
    height:145px;
    margin:0;
    border-radius:14px;
    border:1px solid #d9e5f1;
    box-shadow:0 10px 26px rgba(5,35,72,.08);
    overflow:hidden;
    background:#0a2544;
}
.experience-v503-restrained .page-hero.v503-has-thumb .v503-hero-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.76) brightness(1.04)}
.experience-v503-restrained .page-hero.v503-has-thumb .narrow{max-width:min(760px,calc(100% - 305px));margin-right:auto}
.experience-v503-restrained .page-hero.v503-has-thumb h1{font-size:clamp(2.05rem,3.3vw,3.35rem)}

/* Detail pages use a small thematic symbol instead of repeating the same photograph. */
.experience-v503-restrained .page-hero{position:relative}
.experience-v503-restrained .v503-hero-symbol{
    position:absolute;
    right:max(24px,calc((100vw - 1160px)/2));
    top:50%;transform:translateY(-50%);
    width:58px;height:58px;border-radius:17px;display:grid;place-items:center;
    background:linear-gradient(145deg,#edf5ff,#f8fbff);color:#0b5bd3;border:1px solid #dbe8f6;
    box-shadow:0 9px 24px rgba(9,49,96,.06);
}
.experience-v503-restrained .v503-hero-symbol-icon{width:28px;height:28px}

/* Old visual-system media is removed by the runtime postprocessor. Keep fallbacks tiny if cached markup survives. */
.experience-v503-restrained .topic-card-media,
.experience-v503-restrained .article-card-media,
.experience-v503-restrained .finder-side-media{display:none!important}

@media (max-width:980px){
    .experience-v503-restrained .restrained-hero-grid{grid-template-columns:minmax(0,1fr) 250px;gap:24px}
    .experience-v503-restrained .restrained-hero-media{height:175px;max-width:250px}
    .experience-v503-restrained .page-hero.v503-has-thumb .v503-hero-thumb{width:210px;height:125px}
    .experience-v503-restrained .page-hero.v503-has-thumb .narrow{max-width:calc(100% - 250px)}
}
@media (max-width:760px){
    .experience-v503-restrained .restrained-hero-grid{grid-template-columns:1fr;padding-top:34px;padding-bottom:30px}
    .experience-v503-restrained .restrained-hero-media{height:145px;max-width:none;justify-self:stretch}
    .experience-v503-restrained .page-hero.v503-has-thumb{min-height:0;padding-top:40px;padding-bottom:40px}
    .experience-v503-restrained .page-hero.v503-has-thumb .v503-hero-thumb{display:none}
    .experience-v503-restrained .page-hero.v503-has-thumb .narrow{max-width:none}
    .experience-v503-restrained .v503-hero-symbol{display:none}
}
@media (max-width:520px){
    .experience-v503-restrained .restrained-hero-media{height:120px}
}