/*
 * Hero op de homepage onder 1181px: één vloeiende opmaak in plaats van drie trappen.
 * Elke kaart schaalt mee met zijn eigen breedte (container queries): titel, beschrijving, prijs en
 * tekening passen op elke breedte, de tekening blijft binnen de kaart. Boven 1180px geldt ilko.css.
 * Laadt als laatste (na mobiel.css), alleen op de homepage.
 */
@media (max-width:1180px){
.ik .b4{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(268px,auto);gap:12px}
.ik .b4 .hb,.ik .b4 .hb.rev{container-type:inline-size;display:flex;align-items:stretch;padding:clamp(18px,2.2vw,26px);overflow:hidden;min-height:0}

/* tekst links, altijd */
.ik .b4 .hb .hb-txt,.ik .b4 .hb.rev .hb-txt{position:relative;z-index:2;width:58%;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ik .b4 .hb-mt{display:none}
.ik .b4 .hb-t,.ik .b4 .hb-s,.ik .b4 .hb-price{display:block}
.ik .b4 .hb-t{font-size:clamp(21px,7cqw,32px);line-height:1.04;letter-spacing:-.035em;margin:0;padding:0}
.ik .b4 .hb-hoe .hb-t{padding-left:0}
.ik .b4 .hb-s{font-size:clamp(13.5px,3.4cqw,15px);line-height:1.45;font-weight:400;letter-spacing:0;max-width:none}
.ik .b4 .hb-foot{position:static;margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:12px}
.ik .b4 .hb-go{width:clamp(36px,9cqw,44px);height:clamp(36px,9cqw,44px)}
.ik .b4 .hb-price{display:flex;flex-direction:column;line-height:1.15}
.ik .b4 .hb-price small{font-size:12px;font-weight:500}
.ik .b4 .hb-price strong{font-size:clamp(16px,4.6cqw,22px)}
.ik .b4 .hb-hoe .hb-price small{font-size:12px;font-weight:500;line-height:1.3}

/* tekening rechts, binnen de kaart (mag onderaan iets aflopen); groter in het blok van vier */
.ik .b4 .hb .hb-vis,.ik .b4 .hb.rev .hb-vis{position:absolute;inset:0;margin:0;min-height:0;z-index:1}
.ik .b4 .hb-tel .tel-ring{width:40cqw;height:40cqw;right:3cqw;left:auto;top:50%;margin-top:-20cqw}
.ik .b4 .hb-tel .v-tel{width:50cqw;right:-2cqw;left:auto;top:50%;bottom:auto;margin-top:-17cqw;max-width:none}
.ik .b4 .hb-rep .rep-ring{width:64cqw;height:64cqw;left:auto;right:-16cqw;top:auto;bottom:-26cqw;margin:0;border-width:7cqw}
.ik .b4 .hb-rep .ph-front{left:auto;right:7cqw;top:16%;bottom:auto;margin:0;width:28cqw;height:calc(28cqw * 2.1714);font-size:calc(28cqw / 21)}
.ik .b4 .hb-ele .v-acc{width:60cqw;right:-9cqw;left:auto;bottom:-3cqw}
.ik .b4 .hb-hoe .v-cases{width:60cqw;left:auto;right:-12cqw;bottom:-12cqw}

/* het stempel in het midden: alleen als de kaarten in een blok van vier staan */
.ik .b4 .seal{width:clamp(76px,10vw,120px);height:clamp(76px,10vw,120px);margin:calc(clamp(76px,10vw,120px) / -2) 0 0 calc(clamp(76px,10vw,120px) / -2)}
}

/* telefoon: kaarten onder elkaar, compacter, zonder stempel */
@media (max-width:559px){
.ik .b4{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:10px}
.ik .b4 .hb,.ik .b4 .hb.rev{min-height:176px}
.ik .b4 .hb .hb-txt,.ik .b4 .hb.rev .hb-txt{width:60%}
.ik .b4 .hb-t{font-size:clamp(21px,6.6cqw,26px)}
.ik .b4 .hb-tel .tel-ring{width:32cqw;height:32cqw;right:5cqw;margin-top:-16cqw}
.ik .b4 .hb-tel .v-tel{width:40cqw;right:1cqw;margin-top:-14cqw}
.ik .b4 .hb-rep .ph-front{width:24cqw;height:calc(24cqw * 2.1714);font-size:calc(24cqw / 21);top:14%;right:8cqw}
.ik .b4 .hb-rep .rep-ring{width:52cqw;height:52cqw;right:-10cqw;bottom:-22cqw;border-width:6cqw}
.ik .b4 .hb-ele .v-acc{width:46cqw;right:-7cqw;bottom:-2cqw}
.ik .b4 .hb-hoe .v-cases{width:48cqw;right:-9cqw;bottom:-12cqw}
.ik .b4 .seal{display:none}
}